在購物車抽屜中新增自訂 HTML 或 CSS

請先使用內建設定調整色彩、圖片和文字。若需要使用自訂標記或樣式，則可使用自訂 HTML 和 CSS。

新增自訂 HTML 區塊

(1) 在 HTML 程式碼編輯器中輸入備註標記。(2) 編輯器會說明預覽會移除指令碼、框架和互動屬性。請使用店面檢查最終行為。

每個區域最多可新增 10 個自訂 HTML 區塊。每個區塊的編輯器最多接受 10,000 個字元；完整購物車設定也有大小限制。

(1) 將選取器限定於 #bxc-drawer 和備註類別。此規則會為備註新增藍色左框線和內距。

開啟樣式，捲動至底部的進階，然後開啟自訂 CSS。請將規則限定於抽屜，例如使用#bxc-drawer，避免意外重新設定佈景主題其他部分的樣式。替換現有 CSS 前，請先保留一份副本。此欄位最多接受 10,000 個字元。

此欄位是程式碼編輯器：輸入時會為 CSS 套用色彩、建議屬性名稱，並以紅色標示無法讀取的規則，因此儲存前就能發現缺少大括號。格式化可整理縮排。

(1) 公告位於商品上方。(2) 簡短的徽章標籤位於商品下方。(3) 自訂備註套用了限定範圍的藍色框線。商品控制項和結帳功能仍可正常使用。

此範例會新增品牌備註。請使用 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>標籤不會自動執行，因此此欄位不是通用的指令碼安裝工具。

請只貼上您了解的程式碼，或已與開發人員審閱過的程式碼。在桌面和行動裝置上檢查已發布的結果，包括新增商品和開啟結帳。如果變更後抽屜無法正常運作，請移除該自訂程式碼，再次儲存並重新測試。