The important thing to remember is that the cart editor's preview is not 100% accurate, and may look slightly different in your theme. Here's why:
Since UpCart runs on your storefront, this means it's completely possible for your theme's styling files to interact with elements from the cart.
UpCart's editor does not have access to your theme's files and therefore can't predict what the cart will actually look like! We recommend working on a Draft theme so that you can view the changes on the storefront directly, without needing to show the cart to your customers yet.
Example
Here's an example going over a common interaction that theme files may have with the cart, affecting heading styles like font size and color.
In the example below, this theme has a CSS file that says
"All level 3 headings need to have a font size of 20px and need to be the color red.":
UpCart does use level 3 headings in some elements. This means some of the elements on the live cart will have a font size of 20px and will be colored red since the theme is telling them to be styled this way.
In the image below, you can see our product titles, upsell item titles, as well as add-on titles are all red and have a font size of 20px:
Solution
You can easily fix this by enabling the following Advanced Setting:
UpCart > Cart Editor > Settings > Advanced Settings > Render Cart in Shadow DOM
The setting above isolates UpCart from your theme CSS, making it so that it is not affected by its custom features placed in the theme code.
💡Alternative solution using custom CSS
💡Alternative solution using custom CSS
Alternatively, These can usually be corrected by adding CSS code to the Custom CSS section in UpCart's settings.
For example, below we wrote some CSS code to tell the product title, upsell item title, and add-ons title to have a font size of 16px and to be colored black instead.
This adjustment resolves the conflict with the theme's styling. Our cart now looks the way we want it to look.
