Skip to main content
If you’re experiencing an issue in Upcart where the cart drawer remains visible, whether on the left side of the screen or appearing to the right or below the store interface, there are two potential causes, depending on whether you’re using a translation app.

​
The cart appears on the right side or overlays the product page interface.

This issue typically appears as shown on desktop (highlighted on the right: Image You will need to insert a short script into Upcart’s HTML Settings to fix this issue. Please follow these steps:
  1. In your Shopify Admin, go to Upcart > Cart Editor > Settings
  2. Under Custom HTML, Select HTML Location dropdown > Scripts (Before load) Image
  3. Copy and paste the following code: 
    <script>  
    window.onload = () => {  
        const upcartHTML = document.getElementById("upCart");  
        document.body.append(upcartHTML);  
    }  
</script>
    This is how your custom HTML settings should look like in Upcart: Image
  4. Scroll to the top and click Save. Saving Upcart changes will require up to a minute for the changes to take place.

​
Why does this happen?

When Upcart loads, we expect it to appear off-screen to the right of the store page. However, certain store themes and third-party Shopify apps may alter the page layout, including Upcart’s placement. As a result, Upcart may load in a different position, leading to a visual bug where it’s visible at all times. Implementing the above code changes will reposition Upcart, restoring its original behavior.

​
Additional Steps

If you’re experiencing any flickering during the page loading stage by Upcart, you can also try applying some CSS changes to hide the cart drawer. Please keep in mind, this will hide Upcart on the preview page as well. 
.upcartPopupShow [class*="styles_CartPreview__right__"] {  
    width: 100%;  
    max-width: 440px;  
}  
  
[class*="styles_CartPreview__right__"] {  
    width: 0px;  
    max-width: 440px;  
}
You can find the Custom CSS section by continuing to scroll down past the Custom HTML section, where you can paste the code that has been provided above: Image

​
Cart is stuck on the left

This is usually caused by a translation app translating Upcart settings that should stay in English. Upcart stores certain settings as English words in Shopify metafields. For example, the cart position setting is stored as “right” or “left.” If a translation app changes “right” to “droite” in French, Upcart can’t understand the instruction and defaults to the top left of the screen, staying open permanently. Not all metafields should be translated There are two types of Upcart metafields:
  • Text fields like button labels or reward messages are safe to translate
  • Behavior settings like cart position or upsells direction must stay in English
Translating behavior settings will cause Upcart to break. The fix
  1. Open your translation app and find the store metadata or metafields section
  2. Look through the Upcart metafields and remove any translations on behavior-related fields such as cartPosition and upsellsDirection
  3. Refresh your storefront and the cart should return to its correct position
Note: Upcart now has built-in translation support, which avoids this issue entirely. If you haven’t set up translations yet, we recommend using that instead. See Cart Translations for more details.