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. If changes fail to appear as expected, review common troubleshooting suggestions, such as refreshing caches in both the browser and Upcart editor, checking CSS placements, and ensuring proper specificity in your CSS rules.
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. For situations where styles are not applied correctly, consider increasing CSS specificity or appending !important to your CSS rules. Doing so ensures they override any conflicting styles. Example:
.upcart-cart .upcart-checkout-button {
border-radius: 20px !important;
background-color: #CFA17E !important;
color: #1A1A1A !important;
}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; }
Common Problems and Solutions
CSS Not Appearing on Mobile Devices
If your custom text or styles are not visible on mobile:
Refresh the page in both UpCart Editor and your mobile browser to clear cached versions.
Ensure the latest published cart version is active.
Confirm that CSS is saved in Upcart > Settings > Custom CSS.
Discrepancies Between Editor and Live Store
Styles showing correctly in the editor but not on the live site may need increased selector specificity or !important added to key rules. .upcart-cart .checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
Incorrect CSS Selector Usage
Verify that the correct class or ID is being targeted. Always include prefixes like .upcart- for Upcart-specific elements to avoid unintended results. If the style does not apply as expected, ensure that the selector .thank-you-message is accurately targeting the intended HTML element and check that the CSS code is placed in the correct section (Upcart > Settings > Custom CSS).
Support for Customizations:
Upcart Support cannot assist with implementing or debugging custom CSS. For advanced styling help, we recommend working with a Shopify Expert. For troubleshooting custom CSS, refer to the common problems section for guidance on resolving issues such as missing styles on mobile devices, discrepancies between editor previews and live storefronts, and selector misplacement.