この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元このレッスンでは、カートボタンをカスタマイズします。カート自体をカスタマイズするには、ショッピングカートのカスタマイズをご覧ください。
デフォルトのカート要素にスタイルを設定する
デフォルトでは、カートボタンにはアイコン、テキストブロック「カート」、カート数量要素が含まれています。
カートアイコン
カートアイコンの色を変更するには、フォントの色を適用できます。
カート [テキストブロック]
ボタンのテキストを編集したり、ダブルクリックしてカートの数量または小計に接続したりできます。これを、通常のタイポグラフィ要素のようにスタイル設定できます。
カート数量 [Text block]
このテキストブロックはカート数量フィールドに接続されており、編集はできません。これを通常のタイポグラフィ要素のようにスタイル設定できます。
カートボタンに要素を追加または削除する
カートに他の要素を追加したり、異なる画像やテキストブロックを追加して、カートボタンを自由にスタイル設定できます。カートアイコンとテキストブロックは削除できますが、カート数量要素は削除できません。これはカートの設定を使用して非表示にすることができます。以下で詳しく説明します。
カート数量の設定をカスタマイズする
デフォルトでは、カートボタンにはカート数量（カート内の合計アイテム数）が表示されます。
Cart quantity elementを非表示にするには：
- Cart buttonをダブルクリックします。
- 右側に表示される要素設定パネルからCart quantityボタンを切り替えます。
カートが空の場合にカート数量を非表示にするには：
- Cart quantityをダブルクリックします。
- Cart quantity settingsからHide when the cart is emptyをチェックします。
カート内に小計を表示する
カートボタンにカートの小計を表示するには：
- カートにtext blockを追加します。
- Get the text from Cart > Subtotal（ Inner text settingsから）を選択します。
目次
トップへ