ショッピング カート アイコンを表示する

ストアのシ⁠ョ⁠ッピング カ⁠ート アイコンをスタイル設定または非表示にする手順⁠。

最終更新日 2024年8月08日

顧客のカ⁠ート内の商品数を表示し⁠、精算ペ⁠ージに誘導するシ⁠ョ⁠ッピング カ⁠ート アイコンは⁠、すべてのサイトがサポ⁠ートしています⁠。

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

シ⁠ョ⁠ッピング カ⁠ート アイコンのスタイルを設定する方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイト ヘ⁠⁠ッダ⁠⁠ーのシ⁠⁠ョ⁠⁠ッピング カ⁠⁠ート アイコンは⁠⁠、既定ではカ⁠⁠ートとして表示されます⁠⁠。

カ⁠⁠ート アイコンを有効にしてスタイルを設定するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

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

モバイル端末でのテキスト カ⁠⁠ート アイコン

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

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

テンプレ⁠⁠ートごとの表示

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

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

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

  • Brine
  • Skye
  • Tremont
  • Farro
  • York

ヒント

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

クラシ⁠⁠ック ボタン

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

classic-button-desktop.png

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

classic-button-mobile.png

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

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

テンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ー コンピ⁠⁠ュ⁠⁠ータ⁠⁠ーでの表示 モバイルでの表示

Brine

ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ート⁠⁠、テキスト⁠⁠、またはバ⁠⁠ッグとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

モバイルではスタイルが異なります⁠⁠。上部または下部のナビゲ⁠⁠ーシ⁠⁠ョン バ⁠⁠ーにカ⁠⁠ート⁠⁠、テキスト⁠⁠、またはバ⁠⁠ッグとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

Farro

ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ート⁠⁠、テキスト⁠⁠、またはバ⁠⁠ッグとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

モバイルではスタイルが異なります⁠⁠。上部または下部のナビゲ⁠⁠ーシ⁠⁠ョン バ⁠⁠ーにカ⁠⁠ート⁠⁠、テキスト⁠⁠、またはバ⁠⁠ッグとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

Pacific

右上隅の四角いボタン内に表示されます⁠⁠。テキストのみです⁠⁠。色をカスタマイズできます⁠⁠。非表示にはできません⁠⁠。詳しくはこちら⁠⁠。

見た目はコンピ⁠⁠ュ⁠⁠ータ⁠⁠ーと同じです⁠⁠。右下隅に表示されます⁠⁠。非表示にはできません⁠⁠。詳しくはこちら⁠⁠。

Skye

サイトにストア ペ⁠⁠ージを追加すると⁠⁠、右上隅にバ⁠⁠ッグ アイコンとして表示されます⁠⁠。非表示にはできません⁠⁠。詳しくはこちら⁠⁠。

見た目はコンピ⁠⁠ュ⁠⁠ータ⁠⁠ーと同じです⁠⁠。ナビゲ⁠⁠ーシ⁠⁠ョン バ⁠⁠ーの下部に表示されます⁠⁠。詳しくはこちら⁠⁠。

Tremont

ナビゲ⁠⁠ーシ⁠⁠ョンにテキストとして表示されるか⁠⁠、右上隅にバ⁠⁠ッグまたはカ⁠⁠ート アイコンとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

見た目はコンピ⁠⁠ュ⁠⁠ータ⁠⁠ーと同じです⁠⁠。メニ⁠⁠ュ⁠⁠ー アイコン (⁠⁠テキスト⁠⁠) をタ⁠⁠ップすると⁠⁠、右上 (⁠⁠アイコン⁠⁠) またはナビゲ⁠⁠ーシ⁠⁠ョン リンクの下に表示されます⁠⁠。コンピ⁠⁠ュ⁠⁠ータ⁠⁠ーで非表示にな⁠⁠っている場合は⁠⁠、モバイルでも非表示になります⁠⁠。詳しくはこちら⁠⁠。

York

ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ート⁠⁠、テキスト⁠⁠、またはバ⁠⁠ッグとして表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

モバイルではスタイルが異なります⁠⁠。メニ⁠⁠ュ⁠⁠ー アイコンをタ⁠⁠ップすると⁠⁠、ナビゲ⁠⁠ーシ⁠⁠ョン リンクの下に表示されます⁠⁠。非表示にすることもできます⁠⁠。詳しくはこちら⁠⁠。

シ⁠ョ⁠ッピング カ⁠ート アイコンを非表示にする

シ⁠ョ⁠ッピング カ⁠ート アイコンを非表示にする方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

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

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

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

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

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

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

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

  • Brine - [⁠⁠カ⁠⁠ートの位置⁠⁠]
  • Farro - [⁠⁠カ⁠⁠ートの位置⁠⁠]
  • Tremont - [⁠⁠カ⁠⁠ート リンクの表示⁠⁠]
  • York - [⁠⁠カ⁠⁠ートの位置⁠⁠]
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

ショッピング カート アイコンを表示する