Add custom HTML or CSS to the cart drawer

Use the built-in settings first for colours, images, and text. Custom HTML and CSS are available for changes that need your own markup or styling.

Add a Custom HTML block

1. Edit your cart and open Cart.
2. Use Add custom HTML in the content or footer area.
3. Enter the markup in HTML, then position the block with its drag handle within that area.
4. Review the layout, save, and check the storefront.

You can add up to 10 Custom HTML blocks per area. The editor accepts up to 10,000 characters per block; the complete cart configuration also has a size limit.

Add custom CSS

Open Style > Custom CSS. Scope rules to the drawer, for example with #bxc-drawer, so they do not unintentionally restyle the rest of your theme. Keep a copy of existing CSS before replacing it.

Preview and storefront behaviour differ

The preview shows custom HTML layout but removes scripts and interactive attributes. On the storefront, custom markup is treated like theme code. Ordinary inserted <script> tags are not automatically executed, so this field is not a general script installer.

Only paste code you understand or have reviewed with your developer. Check the published result on desktop and mobile, including adding an item and opening checkout. If the drawer breaks after a change, remove that custom code, save again, and retest.