Introduction
Welcome to this CSS tutorial, where we’ll show you how to set your mobile cart width to zero unless it’s triggered by UpCart. This is a handy way to keep your cart hidden and streamline the mobile shopping experience until your customers are ready to view it.
This guide is designed for store owners or developers with basic CSS knowledge. By using this customization, you can keep your cart out of sight and improve page layout, reducing distractions and helping your customers focus on shopping. It’s a small tweak that can make a big difference in your store’s mobile experience.
Let’s get started and make your mobile cart work smarter, not harder!
Accessing Custom CSS Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled "Custom CSS".
Next, copy and paste the code into the CSS input area
When you are done “Click Save” and refresh your storefront page to see the results live.
Here is the CSS Code to Copy and Paste into the CSS Section:
@media (max-width: 440px) {
.upcartPopupShow [class*="styles_CartPreview__right__"] {
width: 100%;
max-width: 440px;
}
[class*="styles_CartPreview__right__"] {
width: 0px;
max-width: 440px;
}
}Conclusion
And that’s it! You’ve now learned how to change your mobile cart width to zero until it’s triggered by UpCart, creating a cleaner and more focused shopping experience.
Still Need Help?
If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.