Overview
The cart editor preview is not 100% accurate and may look slightly different when viewed on your live store. Upcart runs directly on your storefront, which means your theme’s CSS styling files can affect how cart elements appear. These theme styles can change font sizes, colors, spacing, or other design aspects.
Upcart’s editor does not have access to your theme’s files, so it cannot perfectly reflect your store’s live appearance.
We recommend working in a Draft theme so you can view real-time changes on your storefront without affecting your live cart.
Example
In this example, the store’s theme includes a CSS rule that says:
“All level 3 headings should have a font size of 20px and be red.”
Because Upcart uses level 3 headings (H3) for some elements, these styles apply to:
Product titles
Upsell item titles
Add-on titles
As a result, the live cart displays these elements in red with a 20px font size, even though they appear differently in the editor.
Solution 1: Enable Shadow DOM
You can fix this by enabling Render Cart in Shadow DOM in your Upcart settings.
Go to Upcart > Cart Editor > Settings > Advanced Settings.
Check Render cart in Shadow DOM.
This setting isolates Upcart from your theme’s CSS, preventing theme or app code from changing Upcart’s styling.
Solution 2: Use Custom CSS
If you prefer to manually adjust styling, you can add Custom CSS directly in Upcart’s settings.
Go to Upcart > Cart Editor > Settings > Custom CSS.
Add or modify the following CSS to match your desired design:
.upcart-product-title, .upcart-upsell-item-title, .upcart-addons-title { font-size: 16px !important; color: black !important; }This example sets the product, upsell, and add-on titles to a 16px font size and black color, which overrides your theme’s inherited styles.
After saving your changes, refresh your storefront to confirm that the cart displays correctly.
Recommendation
To ensure the best results:
Test your cart design using a Draft theme.
Review theme CSS files for global heading or text rules that may affect Upcart.
Use Shadow DOM to keep your cart styling consistent across all devices.