Skip to main content

​
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. See Shopify Experts