Introduction
Welcome to this tutorial on how to reposition your UpCart Upsells and Add-Ons underneath the products in your customer's cart! If you’re looking to optimize your cart layout by placing upsells or add-ons in a more strategic spot, you’re in the right place. We’ll guide you through the steps to achieve this using HTML and CSS.
By moving your upsells and add-ons just below the cart items, you create a more seamless shopping experience. Customers are more likely to notice these offers after reviewing their selected products, increasing the chance of additional purchases. Whether you're a store owner or developer with basic CSS knowledge, this adjustment can help you create a more effective upsell strategy that fits naturally into your customer’s buying journey.
Let’s jump in and get those upsells in the perfect spot!
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:
[class*="styles_CartPreview__bottomModules__"]
{
margin-top: 0px;
}
Example Image of end results:
Conclusion
And there you have it! By moving your upsells and add-ons underneath the cart items, you're enhancing the shopping experience and increasing the chances of additional sales. Remember, a well-organized cart layout can make a big difference in customer satisfaction and your overall sales strategy.
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.