Custom CSS and HTML Reference
Most of the drawer's look is set with normal settings. For anything else, you can add your own CSS and HTML. This article lists the selectors to target and what works inside a Custom HTML block.
Check first: many styling questions already have a setting. See Styling the Cart Drawer.
Where to add custom CSS
- Open Settings, then the Design tab.
- Open Custom CSS, paste your rules and save.
Changes apply to the cart configuration you are editing. To apply the same CSS to another cart configuration, copy the contents of the Custom CSS block into that configuration. It may not show in the editor preview, so check your live store. If you need help setting this up, contact our support team.
How to target an element
Most parts of the drawer have a data-essential-cart-element attribute. Target it like this:
[data-essential-cart-element="line-item-title"] { text-transform: uppercase; }
Add !important if your theme's CSS wins.
Selectors
| Part | Selectors |
|---|---|
| Drawer shell | cart-drawer-overlay, cart-drawer-header, cart-drawer-title, cart-drawer-header-image, cart-drawer-close-button, cart-drawer-content, cart-drawer-footer, cart-drawer-footer-wrapper |
| Empty cart | cart-drawer-empty, cart-drawer-empty-message, cart-drawer-empty-button |
| Cart lines | cart-drawer-item, line-item-title, line-item-variant-title, line-item-variant-selector, line-item-price, line-item-regular-price, line-item-discounted-price, line-item-discounts, line-item-remove, line-item-properties |
| Quantity | quantity-select, quantity-decrement, quantity-increment, quantity-value |
| Subscriptions | line-item-selling-plan, line-item-selling-plan-select, line-item-subscribe-button, line-item-cancel-subscription-button |
| Timer and announcement | announcement-wrapper, announcement-bar-wrapper, announcement-bar-text |
| Spend tiers | reward-goal-bar-wrapper, reward-goal-bar, reward-progress-bar-track, reward-progress-bar-fill, reward-progress-text, reward-milestone, reward-milestone-icon, reward-milestone-label |
| Free gift picker | choose-gift-modal, choose-gift-title, choose-gift-list, choose-gift-row |
| Upsells | upsells-wrapper, upsell-offer, upsell-title, upsell-offer-badge, upsell-product, upsell-image, upsell-product-title, upsell-price, upsell-regular-price, upsell-discounted-price, upsell-variant-select, upsell-add-to-cart-button, upsell-navigation, upsell-dots |
| Side cart upsell | side-cart-upsell-wrapper, side-cart-upsell |
| Order upsells | order-upsell-wrapper, order-upsell-item, cart-drawer-order-upsell-decline |
| Order note | order-note-wrapper, order-note-link, order-note-textarea, order-note-error |
| Discounts | discount-code-wrapper, discount-code-link, discount-code-input, discount-code-button, discount-code-error, discount-code-row, discount-code-amount, discount-code-tag |
| Subtotal | subtotal-wrapper, subtotal-strike-through-price |
| Checkout | checkout-button-wrapper, cart-drawer-checkout-button, cart-drawer-checkout-button-text, cart-drawer-agreement, cart-drawer-agreement-checkbox |
| Express checkout and icons | accelerated-checkout-wrapper, payment-icons, payment-icon |
| Custom HTML | custom-block-wrapper |
| Sticky Add-to-Cart | essential-sticky-cart-container, add-to-cart-button, add-to-cart-button-text |
The page's <html> element gets essential-cart__open while the drawer is open and essential-cart__closed when it's shut. Use them to style other page elements, like hiding a chat button.
Examples
Uppercase product titles:
[data-essential-cart-element="line-item-title"] { text-transform: uppercase; }
Bigger cart title:
[data-essential-cart-element="cart-drawer-title"] { font-size: 22px !important; }
Custom HTML blocks
Click Add custom HTML at the bottom of the editor's left menu. Add a Name and your HTML content, then drag the block to its place in the cart.
| Works | Doesn't work |
|---|---|
| HTML and inline styles | Shopify Liquid ({{ cart.total_price }} and similar) |
| Images and links | Different content for mobile and desktop (use CSS media queries instead) |
<script> tags. Scripts run when the block shows |
To stop checkout from a script, listen for the essential-cart:before-checkout event and call event.preventDefault(). It works on the drawer's normal checkout button, not when that button is set to Go to cart, and it may not cover third-party express checkout buttons. See JavaScript API, Events and URL Parameters.
Before you build a block, check for a built-in setting: the header logo (Settings > Header > Show image), the terms checkbox (Checkout button > Require agreement before checkout) and the order note are all settings now.