カートドロワーにカスタムHTMLまたはCSSを追加する

色、画像、テキストには、まず組み込み設定を使用してください。独自のマークアップやスタイルが必要な変更には、カスタムHTMLとCSSを使用できます。

カスタムHTMLブロックを追加する

1. カートを編集してカートを開きます。
2. コンテンツまたはフッター領域でカスタムHTMLを追加を使用します。
3. HTMLにマークアップを入力し、その領域内でドラッグハンドルを使ってブロックの位置を設定します。このフィールドは、行番号と色付きタグに対応したコードエディターです。フォーマットをクリックすると、インデントが整います。
4. レイアウトを確認して保存し、ストアフロントを確認します。

領域ごとに最大10個のカスタムHTMLブロックを追加できます。エディターで入力できるのは1ブロックあたり最大10,000文字です。カート設定全体にもサイズ制限があります。

カスタムCSSを追加する

スタイルを開き、下部までスクロールして詳細設定を開き、カスタムCSSを開きます。テーマの他の部分が意図せず再スタイルされないよう、#bxc-drawerなどを使ってドロワーにルールのスコープを設定してください。既存のCSSを置き換える前に、コピーを保存しておいてください。フィールドには最大10,000文字まで入力できます。

このフィールドはコードエディターです。CSSに色を付け、入力中にプロパティ名を提案し、読み取れないルールを赤で示すため、保存前に閉じ括弧の不足を確認できます。フォーマットをクリックするとインデントが整います。

簡単なメモを試す

この例ではブランドメモを追加します。コンテンツにはHTMLブロックを使用します。

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

次に、カスタムCSSにスコープ付きルールを追加して、メモに左ボーダーを付けます。

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

保存し、デスクトップとスマートフォンでメモ、商品コントロール、チェックアウトボタンを確認します。

プレビューとストアフロントの動作は異なります

プレビューにはカスタムHTMLのレイアウトが表示されますが、スクリプトとインタラクティブ属性は削除されます。ストアフロントでは、カスタムマークアップはテーマコードとして扱われます。通常挿入された<script>タグは自動的に実行されないため、このフィールドは一般的なスクリプトインストーラーではありません。

理解しているコード、または開発者と確認したコードだけを貼り付けてください。商品を追加してチェックアウトを開く操作を含め、デスクトップとモバイルで公開結果を確認します。変更後にドロワーが壊れた場合は、そのカスタムコードを削除して再度保存し、もう一度テストしてください。