Overview
Welcome to this tutorial on customizing the mobile cart width to suit your preferences! Adjusting the mobile cart width can greatly enhance your customers' shopping experience by ensuring that your cart is easy to view and interact with on smaller screens. This customization allows you to control the layout, making sure it fits seamlessly with your overall store design and keeps things looking clean and organized.
These steps are designed for store owners or developers with basic CSS knowledge. By tweaking the mobile cart width, you can improve usability and make the checkout process smoother for your customers, potentially increasing conversions and customer satisfaction.
Let’s get started and make your mobile cart look and work exactly how you want it!
Example
Here is what it will look like after the changes to make it less wide:
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".
Applying Custom CSS
Once you are in the Custom CSS section, you can change the mobile cart width by following these steps below. Change the number from 90% to any number you desire, the larger the number, the more space the cart takes up.
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
Please note: Currently it’s set to take up 90% of a mobile’s screen width. Replace 90% with the width of the cart desired.
.upcart-cart
{
--widthOfMobileCart: 90%;
}
@media only screen and (max-width: 600px)
{
[class*="styles_CartPreview__right__"]
{
right: calc(var(--widthOfMobileCart) * -1);
}
[class*="styles_CartPreview__right__"] [class*="styles_active__"]
{
right: var(--widthOfMobileCart);
}
[class*="styles_CartPreview__"]
{
width: var(--widthOfMobileCart);
}
.upcart-backdrop,
[class*="styles_CartPreview__empty__"],
[class*="styles_CartPreview__card__"],
[class*="styles_CartPreview__upsells__"],
[class*="styles_CartPreview__bottomModules__"],
.upcart-cart-body
{
width: 100% !important;
}
}
Conclusion
By following this tutorial, you’ve successfully customized the mobile cart width, making it more user-friendly and aligned with your store’s design. These small changes can have a big impact on your customers' shopping experience, making it easier for them to browse and buy on mobile devices.
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.