料金プランを有効化して学習を始めましょう。
Customize the cart button

購入ボタンをカスタマイズ

このレッスンでは、カートボタンをカスタマイズします。カート自体をカスタマイズするには、ショッピングカートのカスタマイズをご覧ください。

レッスン内容

デフォルトのカート要素にスタイルを設定する

デフォルトでは、カートボタンにはアイコン、テキストブロック「カート」、カート数量要素が含まれています。

カートアイコン

カートアイコンの色を変更するには、フォントの色を適用できます。

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

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

カート数量 [Text block]

このテキストブロックはカート数量フィールドに接続されており、編集はできません。これを通常のタイポグラフィ要素のようにスタイル設定できます。

カートボタンに要素を追加または削除する

カートに他の要素を追加したり、異なる画像やテキストブロックを追加して、カートボタンを自由にスタイル設定できます。カートアイコンとテキストブロックは削除できますが、カート数量要素は削除できません。これはカートの設定を使用して非表示にすることができます。以下で詳しく説明します。

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

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

Cart quantity elementを非表示にするには:

  1. Cart buttonをダブルクリックします。
  2. 右側に表示される要素設定パネルからCart quantityボタンを切り替えます。

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

  1. Cart quantityをダブルクリックします。
  2. Cart quantity settingsからHide when the cart is emptyをチェックします。

カート内に小計を表示する

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

  1. カートにtext blockを追加します。
  2. Get the text from Cart > SubtotalInner text settingsから)を選択します。

関連レッスン

No items found.

コースのレッスン

No items found.

次のレッスン

サポート

チャットで講師に質問を聞きましょう

質問する

学習進捗

閲覧後に「完了」を押して、進捗を保存しましょう