Why Is Upcart Always Open?

This article outlines the troubleshooting steps for determining why Upcart is always open.

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:

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)

   

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:

   

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:

Cart is stuck on the left

The problem most likely occurs because your translation app is translating some of Upcart’s settings to another language. For example, it could be translating the metafield called cartPosition. cartPosition can either be set to “left” or “right”, but your translation app could be translating these to the language of your choice, like “gauche” or “droite” in French.

Shopify Metafields only understand English, so when it sees that the cartPosition is not left or right,it doesn’t know what to do! So it then defaults to the top-left of the page, causing the issue you’re seeing.

The Solution

In this case you’d want to remove translations for all Upcart metafields that change the cart’s behaviour. Using the cartPosition example from earlier, you’d want to make sure cartPosition is not translated.

Here is a video walking you through steps for fixing this issue: