#64|カートボタンのカスタマイズ

カートをページに追加したら、カートボタンとカート自体を完全にカスタマイズしてスタイル設定することができます。

目次

このレッスンでは、カートボタンをカスタマイズします。カート自体をカスタマイズするには、次ページの「ショッピングカートをカスタマイズする」を参照してください。

このレッスンでは

  1. デフォルトのカート要素のスタイル
  2. カートボタンへの要素の追加と削除
  3. カートの数量設定をカスタマイズする
  4. カートで小計を表示する

について説明しています。

1. デフォルトのカート要素のスタイル

デフォルトでは、カートボタンは、アイコン、テキストブロック「cart」の文字、カート数量の要素を含みます。

The Cart button includes a shopping cart icon, the word Cart and a blue number three in a white circle. There are three items in the cart.

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

カートアイコンの色をフォントカラーを適用して変更することができます。

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

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

The Inner text settings panel includes a collection list check box to "get text from" Cart, a drop down menu to select the field none, quantity or subtotal and an x icon to close on the top right of the panel.

"カート数量" [テキストブロック]

このテキストブロックは、編集できないCart quantityフィールドに接続されています。この要素は、他のタイポグラフィー要素と同様にスタイルを設定することができます。

2. カートボタンへの要素の追加と削除

カートには、別の画像やテキストブロックなどの要素を追加して、カートボタンのスタイルを自由に変更することができます。カートアイコンとテキストブロックは削除できますが、カート数量エレメントは削除できません。ただし、非表示にすることができます。

3.カートの数量をカスタマイズする

デフォルトでは、カートボタンはカートの数量(カート内のアイテムの合計)を表示します。

カート数量の要素を非表示にするには

  1. Cartボタンをダブルクリックします。
  2. Cart quantity(合計)ボタンを切り替える(右側に開く要素設定パネルから)。


The cart button settings includes the text Cart Quantity and a switch button on the right side.

カートが空のときにカート数量を隠すには

  1. カートの中身をダブルクリックします。
  2. カートの数量の設定から、カートが空になったら隠すをチェックします。
The cart quantity settings includes a check box for "Hide when cart is empty"

4. カートの小計を表示する

  1. カートの小計をカートボタンに表示させCartにテキストブロックを追加します。
  2. カートからテキストを取得 > 小計(内側のテキスト設定から)を選択します。
A text block inner text settings panel includes a check box to "Get text from" Cart. The subtotal field is selected in the drop down menu. There is also a show all settings button.