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

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

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

このページの内容

ロゴ

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

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

ロゴのカスタマイズ

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

手順：

デスクトップ

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

モバイル

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

ファビコンの追加

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

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

ファビコンの詳細。

手順：

デスクトップ

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

モバイル

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

カラー

テーマの色設定は、オンラインストア全体で使用される色を制御します。テーマ設定の 「色」 セクションで、テーマ全体の色を設定できます。テーマに応じて、以下のいずれかのカラーシステムを通じて色が管理されます。

カラーパレットは、Horizon 4.0.0 以降などの新しいテーマで利用できます。カラーパレットは、テーマ全体に適用される名前付きブランド色のセットです。セクションやブロックには色の入力フィールドがあり、カスタム色でパレットの色を上書きしたり、割り当てられたパレットの色を変更したりするために使用できます。
配色は、Horizon 4.0.0 のリリース前のすべての無料の Shopify テーマなど、ほとんどのテーマで利用できます。配色は、背景、テキスト、ボタンなどの異なる色のグループであり、オンラインストア全体のさまざまなセクションに適用します。テーマ設定で複数の配色を作成できます。

カラーパレットを管理する

カラーパレットは、テーマエディタ内の複数の設定で色をすばやく再利用するための方法です。カラーパレットから色を変更すると、その色を使用しているすべての設定が動的に新しい色に更新されます。また、色を複数回使用したい場合に、16 進数コードを覚えておく必要がないことを意味します。

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマの横にある、「テーマを編集」 をクリックします。
アイコンをクリックし、「色」 をクリックします。
「色」 セクションで + をクリックして、パレットに追加する色を選択します。
オプション: パレットで不要になった色を削除するには、以下の操作を行います。
1. 色をクリックし、「色を削除」 をクリックします。
2. 代わりの色を選択して、テーマ内で削除された色が使用されているすべての場所を置き換えます。
3. 「確認」 をクリックします。
「保存」をクリックします。

モバイル

Shopify アプリから、をタップし、 「設定」 をタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「すべてのテーマを管理する」をタップします。
編集するテーマを見つけて、「テーマを編集」をタップします。
またはをタップし、「テーマ設定」 をタップします。
「色」 をタップします。
「色」 セクションで + をタップして、パレットに追加する色を選択します。
オプション: パレットで不要になった色を削除するには、以下の操作を行います。
1. 色をタップし、「色を削除」 をタップします。
2. 代わりの色を選択して、テーマ内で削除された色が使用されているすべての場所を置き換えます。
3. 「確認」 をタップします。
「保存」または「✓」をタップします。

配色を管理する

テーマ設定で、新しい配色を作成したり、配色を削除したり、配色の色を管理したりできます。テーマエディタでは、最大 21 個の配色を作成できます。

手順：

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

タイポグラフィ

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

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

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「タイポグラフィ」をクリックします。
ストアの見出しまたは本文テキストのフォントタイプを変更するには、「見出し」または「本文」セクションで「変更」をクリックします。
使用するフォントの名前をクリックし、「選択」をクリックします。
「保存」をクリックします。

モバイル

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

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

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「タイポグラフィ」をクリックします。
「見出し」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「本文」テキストのデフォルトのフォントサイズを変更するには、「フォントサイズのスケール」の範囲スライダーを使用してデフォルトのフォントサイズを選択します。
「保存」をクリックします。

モバイル

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

レイアウト

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
「レイアウト」をクリックします。
「ページの幅」の範囲スライダーを使用して、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 のスペースが追加されます。
「保存」または「✓」をタップします。

アニメーション

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

手順：

デスクトップ

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

モバイル

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

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

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

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマの横にある「テーマを編集」をクリックします。
アイコンをクリックします。
要素をクリックすると、設定が開きます。
利用可能な設定のいずれかを調整します。プレビューウィンドウでテーマのさまざまなエリアに移動して、変更内容を確認できます。
「保存」をクリックします。

モバイル

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
SNS をクリックします。
SNSアカウントへのリンクを追加するには、該当する「ソーシャルアカウント」の各フィールドに、アカウントのウェブサイトアドレスを入力します。https://instagram.com/shopifyやhttps://tiktok.com/@shopifyなどの完全なリンクを入力する必要があります。
「保存」をクリックします。

モバイル

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

検索の動作

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

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
検索の動作 をクリックします。
検索候補を有効または無効にするには、「検索候補を有効にする」を選択または選択解除します。
任意: 検索候補に商品の販売元を表示または非表示にするには、「商品の販売元を表示する」を選択または選択解除します。
任意: 検索候補に商品価格を表示または非表示にするには、「商品価格を表示する」を選択または選択解除します。
「保存」をクリックします。

モバイル

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

通貨形式

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
通貨形式 をクリックします。
通貨コードを表示するには、「通貨コードを表示する」を選択します。
「保存」をクリックします。

モバイル

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

カート

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

手順：

デスクトップ

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

モバイル

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

カスタム CSS

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

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

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

テーマスタイル

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

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

手順：

デスクトップ

From your Shopify admin, go to Online Store.
編集するテーマを見つけて、「テーマを編集」をクリックします。
「テーマ設定」 アイコンをクリックします。
[テーマスタイル] をクリックします。
使用するテーマスタイルを選択してから、[スタイルを変更] をクリックします。
「保存」をクリックします。

モバイル

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