Skip to main content
⚠️ 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

  1. Open the Cart Editor in the Upcart app
  2. 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

  1. In the Elements tab of DevTools, click the selector tool (top-left corner of DevTools)
  2. 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
  3. Go six levels up in the hierarchy until you reach: 
    .Polaris-Frame__Content

​
Step 3: Disable the Fixed Position

  1. With .Polaris-Frame__Content selected, look under the Styles tab
  2. 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:
  1. Scroll to the Custom HTML field
  2. 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>
  1. Copy the content elsewhere as a backup, then delete it
  2. 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