既定では、サイトのヘッダーにはショッピング カートのアイコンがあり、買い物客が商品を追加した際にはカート確認画面 (ミニ カート) が表示されます。

ミニ カートを編集する手順は以下のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [エレメントを追加] をクリックし、次に [カート] をクリックします。
4. [カートに追加] 確認で、ミニ カートをオンまたはオフにするオプションを選択します。
   • [バッジとボタン] – (推奨) ミニ カート ウィンドウを表示します。この設定は既定値でオンになっています。視認性を高めるため背景色とは対照的な色が自動的に設定されます。
   • [ボタンのみ] – ボタンに「追加しました！」という短いメッセージが表示されます。ミニ カートを無効にするには、このオプションを選択します。
5. [保存] をクリックして変更を保存します。

カートアイコンのスタイルを設定する

ショッピング カートのアイコンを編集する手順は次のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [エレメントを追加] をクリックし、次に [カート] をクリックします。
4. 鉛筆アイコンをクリックします。
5. スタイルを選択します。
   • [アイコン] を選択した場合は、ヘッダーに表示するカート、バスケット、バッグのアイコンを選択し、[戻る] をクリックしてカート アイコンのサイズを設定します。
   • [テキスト] を選択すると、アイコンの代わりに10文字までのカスタム テキストが表示されます。これはナビゲーション リンクのスタイルにマッチします。
   • アイコンまたはテキストの色は、サイトのナビゲーション リンクの色に従います。
6. [境界線] で図形を選択してアイコンを囲む境界線を有効にし、[外枠] または [単色] を選択してデザインを変更します。[外枠] を選択した場合は、外枠の太さを設定します。
7. 顧客が何かを追加する前にカートの横に0を表示するには、[カートに「0」を表示] トグルをオンに切り替えます。
8. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

モバイル端末でカート アイコンをテキストとして表示する

カート アイコンが [テキスト] に設定されている場合、モバイル端末ではカート内のアイテム数として表示されます。サイトでは、最初は「(0)」がカート アイコンとしてヘッダーに表示されます。[カートに「0」を表示] トグルを切り替えても、モバイル端末での表示には影響しません。

ショッピング カート アイコンの表示は、テンプレートによって異なります。以下の点に留意してください。

• ほとんどのテンプレートでは、顧客がカートに商品を追加すると、カート アイコンがすべてのページに自動的に表示されます。
• テンプレートによっては、カート アイコンがヘッダーに永続的に表示されます。
• エクスプレス チェックアウトが有効になっている場合、カートは表示されません。
• カートが表示されない場合は、トラブルシューティングのヒントを参照してください。

テンプレートごとの表示

以下のテンプレート ファミリーにはクラシック ボタンがあります。

• Adirondack
• Avenue
• Aviator
• Bedford - ただし、ヘッダー エレメントの下に表示
• Five
• Flatiron - ただし、ヘッダーの下に表示
• Forte - ただし、右下隅に表示
• Galapagos
• Ishimoto
• Momentum - ただし、ナビゲーション バーが下にある場合は左上に、ナビゲーション バーが上にある場合は左下に表示
• Montauk
• Native
• Pacific - ただし、長方形。色とフォントを設定可能。モバイルでもボタンの外観は同じ (ナビゲーション バーはなし)
• Supply - ただし、長方形
• Wells - ただし、長方形
• Wexley

以下のテンプレート ファミリーには高度なオプションがあります。

• Brine
• Skye
• Tremont
• Farro
• York

ヒント: スタイルを設定できるその他のエレメントには、[カートに追加] ボタン、ストア ページ、および [買い物を続ける] ボタンなどがあります。

クラシック ボタン

ほとんどのテンプレートは、右上隅の黒色のカプセル型ボタンの中にショッピング カート アイコンが表示されるクラシック ボタンをサポートしています。これは、顧客が商品をカートに追加すると、すべてのページに自動的に表示されます。スタイルのオプションはありません。

モバイルでは、クラシック ボタンは、下部にナビゲーション バーとして表示されます。

高度なスタイル オプション

以下のテンプレート ファミリーの [サイト スタイル] パネルで、ショッピング カートのスタイルをカスタマイズできます。

サイトのヘッダーからアイコンを非表示にするには、次の手順に従ってください。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [エレメントを追加] をクリックします。
4. [カート] トグルをオフに切り替えます。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

ショッピング カート アイコンを非表示にすると、ユーザーが商品をカートに追加したときにページの下部にカート アイコンが表示されます。アイコンの色を変更するには、次の手順に従ってください。

1. ページを編集するときは、サイト スタイルを開いて [色] をクリックします。
2. [ボタン] で、背景とテキストの色を設定します。ショッピング カートは、サイトの既定のカラー テーマに従います。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

アイコンを無効にしたり、サイズや形状を変更したりすることはできません。

ショッピング カート アイコンを非表示にすると、顧客は精算ページを見つけられなくなります。エクスプレス チェックアウトを使用する場合、またはサブスクリプション商品のみを販売する場合にのみ非表示にしてください。その場合、顧客は商品を選択すると自動的に精算ページに移動します。

以下のテンプレート ファミリーのショッピング カートの表示/非表示は、サイトのスタイル微調整オプションを使用して切り替えることができます。

• Brine - [カートの位置]
• Farro - [カートの位置]
• Tremont - [カート リンクの表示]
• York - [カートの位置]