Overview
This section allows you to change the look and feel of existing cart elements or apply styles to custom HTML added through the editor.
Where to Find It
Go to:
Upcart > Cart Editor > Settings > Custom CSS
Located directly below the Custom HTML section.
How It Works
You can add CSS to:
Style default cart elements
Modify the appearance of custom HTML
Adjust spacing, alignment, typography, and more
As you type, an auto-complete popup will suggest valid Upcart selectors to help speed up editing. Selecting a suggestion will auto-complete the rule and help you structure your code.
Using Selectors
Upcart provides a wide range of custom selectors. Click "Show list" to view all available options.
Avoid using global selectors like body, div, or h3 unless scoped with .upcart-cart to prevent unintentional changes to your storefront.
Example (safe selector):
.upcart-cart h3 { font-size: 20px; }
Example: Thank You Message Styling
Suppose you added this custom HTML below the checkout button:
<div class="thank-you-message">Thanks for shopping with us!</div>
Without CSS, the message will look plain. To style it:
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }Support for Customizations
Upcart Support cannot assist with implementing or debugging custom CSS.
For advanced styling help, we recommend working with a Shopify Expert.