Introduction
In this tutorial, we’ll show you how to hide specific elements like classes or the rewards bar from your cart based on product IDs using CSS. This is especially useful if you want to simplify the cart view for certain products or create a more focused checkout experience.
This guide is for store owners or developers with some basic CSS knowledge. Whether you’re looking to hide a rewards bar for a specific product or control the visibility of other elements, this customization will give you more flexibility over your cart’s appearance.
Let’s dive in and make those elements disappear as needed!
Excluding Product ID’s
First, to exclude products from your UpSells using the Product ID, follow these steps to locate the Product ID in Shopify:
Go to your Shopify Admin and click Products.
Click on the product you wish to exclude.
The Product ID is the long number found in the URL of the product page, right after
/products/. For example:/products/1234567890.
For more details on finding Product IDs, visit Shopify's Help Documentation on Product IDs.
Once you have the Product IDs, you can insert them into the
array in your HTML code to prevent them from showing up in UpSells.
Accessing Custom HTML 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 down the page until you find the section labeled “Custom HTML”.
Copy and paste the following code into the “Custom HTML” input area.
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements” AND also into the section titled “Empty Cart Screen”:
Please Note: Modify the product ID’s in the code below to the productIDsToExclude array using your own product ID’s. Remember to add commas after each product ID except the last one.
Next, change the .YOUR-CLASS-HERE to any class you’d like to hide. For example, you can replace “.upcart-rewards” with any other class if you’d like to hide it when a product ID is in the cart.
<script>
upcartOnCartLoaded = (cart) =>
{
// The cart's items
var items = cart.items;
// Whether or not the cart contains excluded items
var cartContainsExcludedItem = false;
// The product ID's to look for, when found this will cause the rewards bar to hide.
var productIDsToExclude = [
6958755512411,
6958755610712,
7736708759774
];
// Check if there's any excluded product ID's in the cart
items.forEach(item => {
productIDsToExclude.forEach(id => {
cartContainsExcludedItem = item.product_id == id ? true : cartContainsExcludedItem;
});
});
// Find selected class
var rewards = document.querySelector(".YOUR-CLASS-HERE");
// If the rewards bar exists and we found an excluded item
if(rewards && cartContainsExcludedItem)
{
// Hide the rewards bar
rewards.style.display = "none";
}
// If the rewards bar exists and we didn't find an excluded item
else if(rewards && !cartContainsExcludedItem)
{
// Show the rewards bar
rewards.style.display = "block";
}
}
</script>
Conclusion
And that’s it! Now you know how to hide specific elements or the rewards bar in your cart using product IDs with CSS. This simple adjustment helps you customize the shopping experience to better match your store’s needs.
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.