⚠️ Important notice

This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.

If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.

We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

Overview

If invalid or broken HTML is added to the Cart Editor’s Custom HTML field, it can break the layout and make the editor interface unusable. This guide walks you through how to temporarily fix the layout so you can safely remove the broken code and restore full functionality.

What Causes the Issue

This problem usually occurs when a merchant:

Inserts <style> or <script> tags without proper structure
Leaves HTML tags unclosed or mismatched
Adds layout-breaking content to the Custom HTML field

As a result, the Cart Editor becomes unreadable or unusable and may lock users out from editing or even scrolling the page.

Temporary Fix Using Developer Tools

Follow these steps to temporarily fix the layout using your browser’s Developer Tools so you can access the Custom HTML field.

Step 1: Open DevTools

Open the Cart Editor in the Upcart app
Right-click anywhere on the page and select Inspect, or press:
- Cmd + Option + I (Mac)
- Ctrl + Shift + I (Windows)

Step 2: Find the Broken Layout Container

In the Elements tab of DevTools, click the selector tool (top-left corner of DevTools)
Hover over the Cart Editor layout and find the green-highlighted section to the left of the settings panel. It should be labeled:
```
.Polaris-Page__Content--fullWidth
```
Go six levels up in the hierarchy until you reach:
```
.Polaris-Frame__Content
```

Step 3: Disable the Fixed Position

With .Polaris-Frame__Content selected, look under the Styles tab
Find the position: fixed property and uncheck it

This should unlock the page and let you scroll through the layout again.

Remove the Invalid HTML

Now that the layout is accessible again:

Scroll to the Custom HTML field
Look for any broken HTML or embedded CSS that might have caused the issue

Example of what typically breaks the layout:

<style>
  body {
    background: red;
  }
</style>

Copy the content elsewhere as a backup, then delete it
Save your changes

Confirm It’s Fixed

After saving, the Cart Editor should load normally again. If the issue persists, check again for leftover invalid tags or reach out to the merchant to confirm what was added.

Best Practices to Prevent This Issue

Only insert complete and valid HTML
Avoid adding inline <style> blocks directly in HTML locations
Use the Custom CSS section instead of adding CSS into HTML fields
Always preview your changes in Sandbox mode if unsure

Custom HTML

Fixing Missing Carousel Arrows In Upcart's Upsell Module

How to Customize Your Mobile Cart Width with CSS

Prevent Upsell-Only Purchases in the Cart

AI Prompt Suggestions for adding Custom Code to Your Upcart Settings

How to Fix Broken Cart Editor Layout from Invalid HTML