Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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

ElementEditor PreviewLive Store
Font sizeUses Upcart defaultMay inherit theme’s global font rules
Font colorUses Upcart defaultMay be overridden by theme heading or text color rules
Spacing and paddingUses Upcart defaultMay be affected by theme global margin or padding rules
Product title stylingUses Upcart defaultMay inherit H3 or H4 styles from theme CSS
Button stylingUses Upcart defaultMay be overridden by theme button CSS
Custom app stylesNot reflectedThird-party app CSS may apply on live store only

​
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.

​
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. For example:
.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, overriding your theme’s inherited styles. 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.