If you’re experiencing a store issue with UpCart where the cart drawer is always open or can always be seen on the right side, there's two possible causes for this depending on whether you're using a translation app or not!
With A Translation App
The Problem
In this case, chances are your translation app is able to translate metafields.
Metafields store pieces of information that UpCart can use to determine things like its position, colours of elements, displayed text, and pretty much any other setting you can find in the app's interface!
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!
UpCart only understands 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!
Without A Translation App
The Problem
If you aren't using a translation app, then UpCart may not be understanding the page's structure and may be placing itself in an incorrect location.
The Solution
The possible solution here would be to try and move UpCart to a new location on the page, generally the page's body.
Here's how you can do this!
Head over to UpCart in the Shopify Admin Panel, and click the cart editor settings on the left.
From there, we can click on the settings:
On the settings page, under Custom HTML, we have to select an HTML location to apply changes to. In our example, I will be using the Scripts (Before Load) section at the bottom of the dropdown.
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:
Scroll to the top and click save. Saving UpCart changes will require up to a minute for the changes to take place.
Explanation: When we load UpCart, we expect UpCart to be to the right of the store page off screen. However, some store themes and other third party Shopify applications will rearrange the layout content of the page - which includes UpCart. As a result, when Shopify displays UpCart, UpCart has moved to a different position. This causes a visual bug where UpCart can always been seen. Applying the code changes above will move UpCart back which will restore the 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 unless the popup has been set to show:
.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:
