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 the Upcart > Cart Editor section before testing.

​
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. Enabling the Shadow DOM setting also helps resolve missing preview issues that may occur due to theme CSS interference.
  1. Go to Upcart > Cart Editor > Settings > Advanced Settings.
  2. 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.
  1. Go to Upcart > Cart Editor > Settings > Custom CSS.
  2. 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.