テーマ設定のカスタマイズ

テーマエディタのサイドバーメニューにある「テーマ設定」セクションから、タイポグラフィ、色、SNSリンク、カートページなど、オンラインストアの全体的な設定をカスタマイズできます。「テーマ設定」セクションで行った変更は、オンラインストア全体に適用されます。

セクションとブロックにも、テーマの個々のセクションをカスタマイズするために調整できる個別の設定があります。セクションとブロックについて、詳しくはこちらをご覧ください。

このページの内容

ロゴ

ビジネスのロゴをオンラインストアに追加できます。ロゴは以下の場所に表示されます。

すべてのページのヘッダー
パスワードページ

ロゴのカスタマイズ

ロゴ画像の最大幅は 300 ピクセルです。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「ロゴ」をクリックします。
「ロゴ」エリアで、画像を追加するか、無料の画像を使用します。
- 画像を追加するには、 画像を選択をクリックし、新しい画像または既存の画像を追加します。
  - 管理画面にすでにアップロードされている画像を使用するには、画像を選択して 「完了」をクリックします。
  - お使いのコンピューターの画像を使用するには、「画像を追加する」をクリックします。画像を選択して追加し、「完了」をクリックします。
- 無料の画像を使用するには、「無料画像を探す」をクリックします。画像を見つけてクリックして選択し、「選択する」をクリックします。
任意：ロゴ画像に代替テキストを追加します。
1. 「ロゴ」エリアで、「編集」をクリックします。
2. 「代替テキスト」フィールドに、画像の簡単な説明を入力します。
3. 「保存」をクリックします。
任意：「デスクトップのロゴの幅」エリアで、範囲スライダーを使用してロゴのピクセル幅を調整します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
「ロゴ」をタップします。
「ロゴ」エリアで、画像を追加するか、無料の画像を使用します。
- 画像を追加するには、 画像を選択をクリックし、新しい画像または既存の画像を追加します。
  - 管理画面にすでにアップロードされている画像を使用するには、画像を選択して 「完了」をタップします。
  - お使いのデバイスの画像を使用するには、「画像を追加する」をタップします。お使いのデバイスから画像を選択して追加し、画像をタップして選択してから、「完了」をタップします。
- 無料の画像を使用するには、「無料画像を探す」をタップします。画像を見つけてタップして選択し、「完了」をタップします。
任意：ロゴ画像に代替テキストを追加します。
1. 「ロゴ」エリアで、「編集」をタップします。
2. 「代替テキスト」フィールドに、画像の簡単な説明を入力します。
3. 「保存」または「✓」をタップします。
任意：「デスクトップのロゴの幅」エリアで、範囲スライダーを使用してロゴのピクセル幅を調整します。
「保存」または「✓」をタップします。

ファビコンの追加

オンラインストアのブランディングに役立つ、お気に入りアイコン (ファビコン) を追加できます。ファビコンは以下の場所に表示されます。

ウェブブラウザのタブ
ウェブブラウザの履歴
デスクトップ上のアイコン
ウェブサイトがブックマークされた際の、オンラインストア名の横

ファビコンの詳細。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
ファビコンを追加するテーマを見つけてから、[テーマを編集] をクリックします。
「テーマ設定」 アイコンをクリックします。
テーマのバージョンに応じて、[ロゴ] または [ファビコン] をクリックします。
[ファビコン画像] セクションで [画像を選択] をクリックし、新規または既存の画像を追加します。
- すでに管理画面にアップロード済みの画像を選択するには、画像を検索または特定し、チェックボックスを使用して選択します。
- ローカルコンピューターから画像を選択するには、[画像を追加] をクリックしてローカルコンピューターから画像を開き、チェックボックスを使用して選択します。
[完了] をクリックします。
任意：ファビコン画像に代替テキストを追加します。
1. [ファビコン画像] セクションで、[編集] をクリックします。
2. 「代替テキスト」フィールドに、画像の簡単な説明を入力します。
3. 「保存」をクリックします。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
ファビコンを追加するテーマを見つけてから、[テーマを編集] をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
テーマのバージョンに応じて、[ロゴ] または [ファビコン] をタップします。
[ファビコン画像] セクションで [画像を選択] をタップし、新規または既存の画像を追加します。
- すでに管理画面にアップロード済みの画像を選択するには、画像を検索または特定し、チェックボックスを使用して選択します。
- お使いのデバイスから画像を選択するには、[画像を追加] をタップしてお使いのデバイスから画像を開き、チェックボックスで選択します。
[完了] をタップします。
ファビコン画像に代替テキストを追加します。
1. [ファビコン画像] セクションで、[編集] をタップします。
2. 「代替テキスト」フィールドに、画像の簡単な説明を入力します。
3. 「保存」または「✓」をタップします。
「保存」または「✓」をタップします。

カラー

テーマ設定でさまざまな配色を定義し、配色ピッカーを使用してオンラインストア全体のさまざまなセクションに配色を適用できます。配色とは、色のセットのことです。テーマにはデフォルトの配色セットが適用されており、テーマエディタでいつでも変更できます。ブランドカラーを追加して、オンラインストア全体でカラーパレットが一貫して適用されるようにすることができます。

オンラインストアのデザインがウェブサイト全体で一貫性を保つように、テンプレートには個別の色設定がありません。テンプレートは、ストアのメインページまたはメインコンテンツと見なされます。ストア全体で配色が異なると、ユーザーエクスペリエンスが低下し、お客様が商品を購入せずにストアから離脱する原因となる可能性があります。

最大 21 種類の独自の配色を作成、カスタマイズして、オンラインストアのさまざまなセクションに適用できます。

配色

配色は、要素とそれぞれの色を視覚的に分かりやすくグループ化するテーマ設定です。配色ピッカーが利用可能なテーマ全体で適用できる一貫した配色で、さまざまな要素に異なる色を割り当てることができます。配色は最大 21 種類まで設定できます。また、配色のプレビューで色がどのように表示されるかを確認することもできます。

テーマエディタで配色に適用できるさまざまな設定のリストです。
設定	説明
背景	一部のセクションの背景と、枠線ボタンの背景に色が適用されます。
背景のグラデーション	一部のセクションの背景には、色のグラデーションが適用されます。背景のグラデーションは、可能な場合、背景を置き換えます。
テキスト	セクションまたはブロックのテキストに色が適用されます。
塗りつぶしボタンの背景	メインボタンの背景に色が適用されます。
塗りつぶしボタンのラベル	メインボタンのテキストに色が適用されます。
枠線ボタン	サブボタンのテキストと枠線に色が適用されます。
影	影に色が適用されます。

配色を管理する

ストアの配色とカラーオプションは、テーマ設定で設定します。単色の場合、カラーピッカーを使用して新しい色を選択するか、テキストフィールドに色の値を入力します。カラーフィールドでは、次の色の名前と値を使用できます。

red、black、blue などの色の名前。
RGB カラーコード。
16進数の色の値。

手順：

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
カスタマイズするテーマの横にある [テーマを編集] をクリックします。
アイコンをクリックし、[カラー] をクリックします。
[配色] セクションで、既存の配色をクリックするか、[配色を追加] をクリックして新しい配色を追加します。
変更したいコンテンツタイプの色のカラー見本をクリックします。
色を設定するには、16進数カラーコードを入力するか、カラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進数コードを削除します。
「保存」をクリックします。

配色を適用する

テーマ設定で配色を定義した後、テーマのセクションとブロックで配色ピッカーを使用して配色を割り当てることができます。配色ピッカーは、特定のセクション、ブロック、および一般的なテーマ設定でのみ使用できます。

グラデーション

一部のテーマでは、色のグラデーションを設定して、視覚的に面白い背景オプションを作成できます。color_background 設定は、CSS の background プロパティをカスタマイズするために使用されます。

グラデーションピッカーでは、グラデーションの色、スタイル、角度、位置、不透明度を選択できます。グラデーションピッカーで選択したオプションは、テーマエディタでリアルタイムにプレビューされます。また、検証チェッカーが含まれている CSS コードを使用して、グラデーションの背景を作成することもできます。

グラデーションを設定する

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
カスタマイズするテーマの横にある [テーマを編集] をクリックします。
アイコンをクリックし、[カラー] をクリックします。
[配色] セクションで、編集する既存の配色をクリックします。
[背景のグラデーション] など、グラデーションのカラー見本オプションをクリックします。
以前にグラデーションを設定したことがない場合は、選択可能なプリセットオプションがいくつか表示されます。いずれかのプリセットグラデーションを選択して、オプションパネルを開きます。
グラデーションオプションを選択します。

線形グラデーションまたは円形グラデーションから選択します。ボタンを使用して、希望するグラデーションスタイルを選択します。
上下の矢印でグラデーションの角度を設定します。上または下の矢印をクリックすると、角度のパーセンテージが 5 ずつ増減します。
スライダーを使用してグラデーションの「位置」を選択するか、フィールドに数値を入力します。
特定のカラー16進コードを入力するか、カラースライダーを使用して色合いを選択します。最近選択した色は、グラデーションオプションパネルの下部に表示されます。
グラデーションを不透明にするには、右側のスライダーを使用してグラデーションの透明度を選択します。16進カラーコードの横にあるフィールドにパーセンテージを入力することもできます。

「保存」をクリックします。

CSS を使用してグラデーションを設定する

ほとんどの CSS background プロパティ値は、背景色を設定するために使用できます。このフィールドは、単色 (例: #000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0, 0%, 0%)、hsla(0, 0%, 0%, 1) はすべて、黒一色の背景を生成します) やグラデーション (例: linear-gradient(red, green)、radial-gradient(red, green)、conic-gradient(red, green)) に使用できます。グラデーションは繰り返すこともできます。

手順：

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
カスタマイズするテーマの横にある [テーマを編集] をクリックします。
アイコンをクリックし、[カラー] をクリックします。
[配色] セクションで、編集する既存の配色をクリックします。
編集するグラデーションをクリックします。
「グラデーション」の横にある矢印をクリックし、「CSS」を選択します。
「CSS コード」フィールドに、グラデーションコードを入力または貼り付けます。テーマエディタのプレビューの該当するロケーションにグラデーションが表示されます。
「保存」をクリックします。

グラデーションを削除する

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
カスタマイズするテーマの横にある [テーマを編集] をクリックします。
アイコンをクリックし、[カラー] をクリックします。
[配色] セクションで、編集する既存の配色をクリックします。
削除するグラデーションをクリックします。
「グラデーションを削除」をクリックします。
「保存」をクリックします。

タイポグラフィ

オンラインストアのテキストのフォントスタイルとサイズを設定できます。システムフォントを選択するか、カスタムフォントを追加することができます。テーマで使用できるフォントは、テーマの開発者によって異なります。すべてのShopify の無料テーマでは、Shopify のフォントライブラリーのフォントが使用されています。

システムフォントは、ユーザーのコンピューターにすでにインストールされているため、ストアでシステムフォントを使用することを検討してください。システムフォントを使用すると、お客様のコンピューターに新しいフォントをダウンロードする必要がなくなり、ストアの読み込み速度に悪影響が及ぶのを回避できます。お客様のコンピューターに表示されるフォントは、お客様のオペレーティングシステムによって異なります。

フォントタイプをカスタマイズする

利用可能なフォントの一覧については、Shopify のフォントライブラリーを参照してください。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「タイポグラフィ」をクリックします。
ストアの見出しまたは本文テキストのフォントタイプを変更するには、「見出し」または「本文」セクションで「変更」をクリックします。
使用するフォントの名前をクリックし、「選択」をクリックします。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
「タイポグラフィ」をタップします。
ストアの見出しまたは本文テキストのフォントタイプを変更するには、「見出し」または「本文」セクションで「変更」をタップします。
使用するフォントの名前をタップし、「完了」をタップします。
「保存」または「✓」をタップします。

フォントサイズをカスタマイズする

「タイポグラフィ」のテーマ設定で、見出しと本文テキストのデフォルトのフォントサイズを設定できます。

最小フォントサイズは 100%、最大フォントサイズは 150% です。スケールを 1 段階上げるごとに、フォントサイズが 5% ずつ大きくなります。デフォルトの設定は 100% です。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「タイポグラフィ」をクリックします。
「見出し」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「本文」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
「タイポグラフィ」をタップします。
「見出し」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「本文」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「保存」または「✓」をタップします。

レイアウト

オンラインストアが表示される最大幅を設定したり、セクション間の垂直方向および水平方向のスペースを設定したりできます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「レイアウト」をクリックします。
「ページの幅」の範囲スライダーを使用して、1000 px～1600 px の間でページの幅を選択します。デフォルト設定は 1600 px です。
任意：「テンプレートセクション間のスペース」の範囲スライダーを使用して、ページに垂直方向のスペースを追加します。セクション間には最大 100 px のスペースを追加できます。
任意：「グリッド」レイアウトを使用している場合は、「水平方向のスペース」と「垂直方向のスペース」の範囲スライダーを使用して、ページのグリッドコンテンツ間にスペースを追加します。水平方向のスペースを追加すると、ページのコンテンツの行に最大 40 px のスペースが追加され、垂直方向のスペースを追加すると、ページのコンテンツの列に最大 40 px のスペースが追加されます。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
「レイアウト」をタップします。
「ページの幅」の範囲スライダーを使用して、1000 px～1600 px の間でページの幅を選択します。デフォルト設定は 1600 px です。
任意：「テンプレートセクション間のスペース」の範囲スライダーを使用して、ページに垂直方向のスペースを追加します。セクション間には最大 100 px のスペースを追加できます。
任意：「グリッド」レイアウトを使用している場合は、「水平方向のスペース」と「垂直方向のスペース」の範囲スライダーを使用して、ページのグリッドコンテンツ間にスペースを追加します。水平方向のスペースを追加すると、ページのコンテンツの行に最大 40 px のスペースが追加され、垂直方向のスペースを追加すると、ページのコンテンツの列に最大 40 px のスペースが追加されます。
「保存」または「✓」をタップします。

アニメーション

アニメーションを使用すると、オンラインストアに動きと視覚的な面白さを加えることができます。スクロール時にストアのセクションが表示されるフェードインアニメーションや、カードとボタンのホバーエフェクトを有効にできます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「アニメーション」をクリックします。
任意：スクロール時にオンラインストアのセクションを表示するアニメーションを有効にするには、「スクロール時にセクションを表示する」を選択します。
任意：カードとボタンにホバーエフェクトアニメーションを追加するには、「ホバーエフェクト」設定から次のいずれかのオプションを選択します。
- 垂直リフト：お客様がカードまたはボタンにカーソルを合わせると、要素が上に移動します。
- 3D リフト：お客様がカードまたはボタンにカーソルを合わせると、要素が手前に移動して 3D 効果が生まれます。また、要素上をかすかな光が移動し、立体感がさらに増します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
「アニメーション」をタップします。
任意：スクロール時にオンラインストアのセクションを表示するアニメーションを有効にするには、「スクロール時にセクションを表示する」を選択します。
任意：カードとボタンにホバーエフェクトアニメーションを追加するには、「ホバーエフェクト」設定から次のいずれかのオプションを選択します。
- 垂直リフト：お客様がカードまたはボタンにカーソルを合わせると、要素が上に移動します。
- 3D リフト：お客様がカードまたはボタンにカーソルを合わせると、要素が手前に移動して 3D 効果が生まれます。また、要素上をかすかな光が移動し、立体感がさらに増します。
「保存」または「✓」をタップします。

視覚要素のカスタマイズ設定

「テーマ設定」ページから、ボタン、商品カード、バリエーションなど、テーマの要素の外観を調整できます。各オプションには、その要素に関連する設定が含まれています。

テーマの以下の要素に関する設定を調整できます。

ボタン: ボタンには、スライドショーやテキスト付き画像などのセクションにある行動を促すボタンのほか、お問い合わせフォーム、商品ページ、カートページのボタンが含まれます。
バリエーションピル: バリエーションピルを使用すると、商品ページまたは特集商品セクションに商品のバリエーションを表示できます。お客様は、商品ページを変更することなく、希望のバリエーションを選択して商品をカートに追加できます。オンラインストアにバリエーションピルがどのように表示されるかをカスタマイズできます。
入力: 入力とは、数量セレクター、メール登録フォーム、カートメモなど、お客様の入力が必要なインタラクティブなエリアのことです。オンラインストアの入力項目の外観を調整できます。
商品カード、コレクションカード、ブログカードの設定では、各カードがページのセクションに表示される際のスタイルをカスタマイズできます。
- 商品カード: 商品カードは、コレクションテンプレート、コレクションセクション、検索結果など、テーマ内で複数の商品が一覧表示されるエリアに、商品に関する情報を表示します。
- コレクションカード: コレクションカードは、コレクションリストのテンプレートやセクションなど、テーマ内でコレクションが一覧表示されるエリアに、コレクションに関する情報を表示します。
- ブログカード: ブログカードは、ブログテンプレート、ブログセクション、検索結果など、テーマ内で複数の商品が一覧表示されるエリアに、ブログ記事に関する情報を表示します。
コンテンツコンテナ: コンテナは、スライドショーのテキストボックス、画像バナー、複数列セクションの列など、コンテンツセクションのテキスト要素に使用されます。オンラインストアのコンテンツコンテナの外観をカスタマイズできます。
メディア: メディアは、商品メディアや「テキスト付き画像」セクションの画像など、セクションの視覚的なコンポーネントです。メディアに枠線や影を追加できます。
ドロップダウンとポップアップ: オンラインストアのドロップダウンメニュー、ポップアップモーダル、カートのポップアップの外観を調整できます。
ドロワー: ドロワーは、折りたたみ式メニューやコレクションの絞り込みオプションなど、タップまたはクリックすると表示される非表示のインタラクティブなコンテナです。オンラインストアのドロワーの枠線と影をカスタマイズできます。
バッジ: セールバッジと売り切れバッジは、価格を引き下げたとき、または在庫数が 0 になったときに、商品画像に自動で追加されます。テーマ設定では、セールバッジと売り切れバッジの位置、形、色をそれぞれ調整できます。ページバッジとブログバッジは、関連する検索結果に表示されます。これらのバッジの位置と形はカスタマイズできますが、ページバッジとブログバッジの色は変更できません。
ブランド情報: オンラインストアにブランドに関する情報を含めることができます。以下の手順を完了すると、オンラインストアのフッターにブランド情報ブロックを追加できるようになります。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマの横にある「テーマを編集」をクリックします。
アイコンをクリックします。
要素をクリックすると、設定が開きます。
利用可能な設定のいずれかを調整します。プレビューウィンドウでテーマのさまざまなエリアに移動して、変更内容を確認できます。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
編集するテーマの横にある「テーマを編集」をタップします。
アイコンをタップします。
要素をタップすると、設定が開きます。
利用可能な設定のいずれかを調整します。プレビューウィンドウでテーマのさまざまなエリアに移動して、変更内容を確認できます。
「保存」または「✓」をタップします。

オンラインストアのフッターに表示される、SNSアカウントへのリンクを追加できます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
SNS をクリックします。
SNSアカウントへのリンクを追加するには、該当する「ソーシャルアカウント」の各フィールドに、アカウントのウェブサイトアドレスを入力します。https://instagram.com/shopifyやhttps://tiktok.com/@shopifyなどの完全なリンクを入力する必要があります。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
SNS をタップします。
SNSアカウントへのリンクを追加するには、該当する「ソーシャルアカウント」の各フィールドに、アカウントのウェブサイトアドレスを入力します。https://instagram.com/shopifyやhttps://tiktok.com/@shopifyなどの完全なリンクを入力する必要があります。
「保存」または「✓」をタップします。

検索の動作

オンラインストアには予測検索機能があります。お客様が検索フィールドに入力を始めると、検索候補が表示されます。検索候補は、お客様が検索クエリを明確化したり、絞り込んだりするのに役立ち、オンラインストアを探索する新しい方法も提供します。また、検索候補により、お客様は現在のページを離れて別の検索結果リストを表示することなく、一致する項目をすばやく閲覧できます。

検索候補の仕組みについて詳しくは、予測検索を参照してください。

お客様に検索候補がどのように表示されるかをカスタマイズできます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
検索の動作 をクリックします。
検索候補を有効または無効にするには、「検索候補を有効にする」を選択または選択解除します。
任意: 検索候補に商品の販売元を表示または非表示にするには、「商品の販売元を表示する」を選択または選択解除します。
任意: 検索候補に商品価格を表示または非表示にするには、「商品価格を表示する」を選択または選択解除します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
検索の動作 をタップします。
検索候補を有効または無効にするには、「検索候補を有効にする」を選択または選択解除します。
任意: 検索候補に商品の販売元を表示または非表示にするには、「商品の販売元を表示する」を選択または選択解除します。
任意: 検索候補に商品価格を表示または非表示にするには、「商品価格を表示する」を選択または選択解除します。
「保存」または「✓」をタップします。

通貨形式

商品の価格と一緒に通貨コードを表示するかどうかを選択できます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
通貨形式 をクリックします。
通貨コードを表示するには、「通貨コードを表示する」を選択します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
通貨形式 をタップします。
通貨コードを表示するには、「通貨コードを表示する」を選択します。
「保存」または「✓」をタップします。

カート

オンラインストアのカートのスタイルを変更できます。お客様がストアから商品をカートに追加すると、カートをドロワー、ページ、またはポップアップ通知として表示できます。お客様を商品ページにとどめておくには、ドロワーまたはポップアップ通知のオプションを使用します。お客様をカートページに移動させるには、ページのオプションを使用します。お客様のカートが空の場合、カートドロワーに特集コレクションを表示できます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
カート をクリックします。
「カートタイプ」ドロップダウンメニューを使用して、「ドロワー」、「ページ」、または「ポップアップ通知」のカートスタイルを選択します。
任意: お客様のカートにあるアイテムの販売元を表示するには、「販売元を表示する」を選択します。
任意: お客様が特別なリクエストの入力や追加の注文情報の追加を行えるテキストボックスを提供するには、「カートメモを有効にする」を選択します。
任意: 「カートタイプ」として「ドロワー」を選択した場合、カートが空のときにカートドロワーにコレクションを表示できます。
1. 「カートドロワー」エリアで、「コレクションを選択」をクリックします。
2. 表示するコレクションの名前をクリックしてから、「選択」をクリックします。
任意: 「カートタイプ」として「ドロワー」を選択した場合は、以下の手順でカートドロワーの配色を変更できます。
1. カートドロワー > 配色の項目で、[変更] をクリックします。
2. カートドロワーで使用する配色を選択します。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
[カート] をタップします。
ドロワー、ページ、またはポップアップ通知のオプションからカートタイプを選択します。
任意: お客様のカートにあるアイテムの販売元を表示するには、「販売元を表示する」を選択します。
任意: お客様が特別なリクエストの入力や追加の注文情報の追加を行えるテキストボックスを提供するには、「カートメモを有効にする」を選択します。
任意: 「カートタイプ」として「ドロワー」を選択した場合、カートが空のときにカートドロワーにコレクションを表示できます。
1. カートドロワーの項目で、[コレクションを選択] をタップします。
2. 表示するコレクションの名前をタップしてから、[完了] をタップします。
任意: 「カートタイプ」として「ドロワー」を選択した場合は、以下の手順でカートドロワーの配色を変更できます。
1. カートドロワー > 配色の項目で、[変更] をタップします。
2. カートドロワーで使用する配色を選択してから、[完了] をタップします。
「保存」または「✓」をタップします。

カスタム CSS

カスタム CSS セクションでは、独自の CSS コードを入力できます。たとえば、利用可能なデフォルト設定の範囲を超えてオンラインストアのボタンの見た目をカスタマイズしたり、特定のテキスト要素に固有のスタイルを適用したりできます。

テーマ設定のカスタム CSS は、チェックアウトを除くオンラインストアのすべてのページに適用されます。

テーマへのカスタム CSS の追加について詳しくはこちら。

テーマスタイル

テーマスタイルとは、テーマデザイナーによって選択された設定のコレクションです。テーマスタイルをストアに適用すると、洗練された見た目と雰囲気を演出できます。すべてのテーマには、デフォルトでテーマスタイルが適用されています。利用できるその他のテーマスタイルオプションは、使用しているテーマによって異なります。

テーマをカスタマイズすると、テーマスタイルの設定が独自の設定に置き換えられます。テーマにテーマスタイルを適用すると、色やタイポグラフィなどの現在の設定が変更されます。

手順：

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」 に移動します。
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
[テーマスタイル] をクリックします。
使用するテーマスタイルを選択してから、[スタイルを変更] をクリックします。
「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
「…」または「⋮」をタップしてから、「テーマ設定」をタップします。
[テーマスタイル] をタップします。
使用するテーマスタイルを選択してから、[完了] をタップします。
「保存」または「✓」をタップします。