Introduction
In this tutorial, we’re going to show you how to make product titles and images in your cart and upsell section non-clickable using CSS. This can prevent customers from navigating back to the product page during checkout, helping them stay focused on completing their purchase.
Why is this useful? First, it reduces distractions and keeps customers on track, increasing the chances they’ll finish checking out. Second, if you offer exclusive upsell products that aren’t meant to be browsed outside of the cart, this is a great way to ensure they’re only accessed as intended.
This tutorial is designed for store owners or developers with basic CSS knowledge. We’ll guide you through the steps to make this customization quick and easy, helping you streamline the checkout process and protect your upsell strategies.
Let’s dive in and lock down those product titles and images for a smoother, more controlled checkout experience!
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:
.upcart-product-title-link,
.upcart-product-image-wrapper a,
.upcart-upsell-item-card a {
cursor: none !important;
pointer-events: none !important;
}
Conclusion
With a few simple CSS changes, you’ve now learned how to make product titles and images in your cart and upsell section non-clickable. This will help keep customers focused and protect your upsell products from being accessed outside the checkout flow.
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.