Skip to main content

​
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. Ensure you have activated the Cart Editor by setting its status to “Active” under Upcart > Cart Editor before testing.

​
Why the Editor and Live Store Look Different

The editor preview renders your cart using default theme settings. Your live store may have custom CSS overrides applied at the theme level that the editor cannot access or replicate. Common reasons for differences include:
  • Custom CSS in your theme - Global heading, font, color, or spacing rules in your theme’s CSS files apply to all elements on your storefront, including Upcart. The editor has no access to these files.
  • App-injected styles - Third-party apps may inject CSS that affects how Upcart elements render on the live store but not in the editor.
  • Browser rendering differences - The editor preview may render fonts or spacing slightly differently depending on your browser and screen resolution.

​
Common Differences

​
Example

In this example, the store’s theme includes a CSS rule that says: “All level 3 headings (H3) should have a font size of 20px and be red.” Upcart renders some cart titles using heading elements, so theme heading rules can bleed in. Which titles are affected depends on your cart version:
  • V2 (the current default): upsell item titles render as <h3>, product titles as <h4>, and add-on titles as a <span>. A theme H3 rule would therefore restyle upsell item titles only.
  • V1 (legacy): product titles, upsell item titles, and add-on titles all render as <h3>, so the theme rule would restyle all three.
As a result, the affected titles display in red at 20px on the live cart, even though they appear correctly in the editor.

​
How to Force-Refresh the Editor Preview

If you have made changes in Upcart but the editor preview is not updating:
  1. Save your changes in the Upcart Cart Editor.
  2. Hard refresh the editor by pressing Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac) to clear the cached preview.
  3. If the preview still does not update, try opening the editor in a private or incognito browser window.
  4. To see how your changes look on the live store without publishing, use a Draft theme with the Upcart Bridge enabled. See Enabling Upcart in a Draft Theme Only for instructions.
The editor preview will never be a perfect match for your live store. For the most accurate view of how your cart looks to customers, always test on a Draft theme or place a test order on your live store.

​
Solution 1: Enable Shadow DOM

You can fix theme CSS conflicts by enabling Render Cart in Shadow DOM in your Upcart settings. This isolates Upcart from your theme’s CSS, preventing theme or app code from changing Upcart’s styling.
  1. Go to Upcart > Cart Editor > Settings > Advanced Settings.
  2. Check Render cart in Shadow DOM.
For a detailed explanation of how Shadow DOM works, when to enable it, and edge cases where it may need to be temporarily disabled for specific integrations, see the full Shadow DOM Setting guide.

​
Solution 2: Use Custom CSS

If you prefer to manually adjust styling, you can add Custom CSS directly in Upcart’s settings.
  1. Go to Upcart > Cart Editor > Settings > Custom CSS.
  2. Add or modify CSS to match your desired design. The class names differ between cart versions, so use the block that matches your cart.
For V2 carts (the current default):
For V1 (legacy) carts:
This sets the product, upsell, and add-on titles to a 16px font size and black color, overriding your theme’s inherited styles. New carts are V2 by default; only pre-existing carts may still be on V1 (see Cart versioning). After saving your changes, refresh your storefront to confirm the cart displays correctly.

​
Recommendation

To ensure the best results:
  • Test your cart design using a Draft theme for an accurate preview before publishing.
  • Review your theme’s CSS files for global heading or text rules that may affect Upcart elements.
  • Use Shadow DOM to keep your cart styling consistent and isolated from theme CSS.
Need help? If you are still seeing unexpected differences between the editor and your live store, reach out to our support team via the in-app chat.