ショッピングカートボタンをカスタマイズする

ページにカートを追加すると、カート自体だけでなく、カート ボタンも完全にカスタマイズしてデザインできるようになります。

このチュートリアルについて

このチュートリアルでは、カート ボタンのカスタマイズについて説明します。カート自体を変更するには、「ショッピング カートのカスタマイズ」を参照してください。

1. デフォルトのカートコンポーネントを設計する
2. カートボタンにコンポーネントを追加したり削除したりする
3. カートの数量設定をカスタマイズする
4. カート内の小計を表示する

デフォルトのカート要素を設計する

カート ボタンには、アイコン、「カート」というラベルの付いたテキスト ブロック、およびカート数量コンポーネントがデフォルトで付属しています。

カートアイコン [アイコン]

フォントの色を選択することで、カート アイコンの色を変更することができます。

「カート」[テキストブロック]

ボタンのテキストを自由に編集したり、ダブルクリックしてカートの数量や小計に接続したりできます。他のタイポグラフィ要素と同様にスタイルを設定できます。

「カートの数量」[テキストブロック]

このテキスト ブロックは、編集できないカート数量フィールドにリンクされています。他のタイポグラフィ要素と同様に、このコンポーネントのスタイルを設定できます。

カートボタンにコンポーネントを追加したり削除したりする

カートに別の画像やテキスト ブロックなどの代替コンポーネントを追加したり、必要に応じてカート ボタンのスタイルを設定したりすることもできます。カート アイコンとテキスト ブロックを削除することは可能ですが、カート数量コンポーネントは削除できません。カート設定を使用して非表示にすることができます。詳細は以下を参照してください。

カートの数量設定をカスタマイズする

デフォルトでは、「カート」ボタンをクリックすると、カート内の合計アイテム数であるカート数量が表示されます。

隠すために カートの数量 成分：

1. ダブルタップして カートボタン
2. 電源を切って カートの数量 ボタン（右側にポップアップ表示される要素設定パネルから）

カートが空のときにカートの数量を非表示にするには:

1. ダブルタップ カートの数量
2. マーク カートが空のときは非表示 から カートの数量設定

カートに小計を表示する

カートボタンにカートの小計を表示するには:

1. 組み込む テキストブロック カートに追加
2. 選択する テキストを取得するカート > 小計 （から 内部テキスト設定)