Introduction
Welcome to this tutorial on excluding specific products from your Shopify UpSells using HTML and CSS! If you want to fine-tune your upsell strategy by keeping certain products out of post-purchase offers, you’re in the right place. We’ll show you how to exclude products using Product ID, Product Handle, or Product Tags, giving you the flexibility to create a more personalized upsell experience.
Whether you’re a store owner or a developer, these simple tweaks can help you filter out items like shipping protection or warranties, making for a smoother checkout and boosting customer satisfaction. Let’s get started!
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.
Version 1: Excluding Product ID’s
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.
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements/Rewards”:
Note: Once you have the Product IDs, you can insert them into the productIDsToExclude array in your HTML code to prevent them from showing up in UpSells. Make sure to add a comma after each entry except for the last one.
<script>
window.upcartModifyListOfUpsells = (upsells) =>
{
var productIDsToExclude = [
6958755512477,
6958755610781
];
for(var i = 0; i < upsells.length; i++)
{
for(var x = 0; x < productIDsToExclude.length; x++)
{
upsells = upsells.filter((item) => item.id !== productIDsToExclude[x]);
}
}
return upsells;
}
</script>
Version 2: Excluding Product Handles
To exclude products by Product Handle, you first need to find the handle for the product:
Go to your Shopify Admin and click Products.
Select the product you want to exclude.
Scroll down to the Search engine listing preview, and click Edit.
The Product Handle is located in the URL and handle section (it looks like
product-name).
For more detailed steps on finding the Product Handle, check out Shopify’s Help Documentation on Product Handles.
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements” AND also into the section titled “Rewards”:
Note: Once you have the Product Handles, add them to the productHandlesToExclude array in your code to exclude these products from UpSells. Make sure to add a comma after each entry except for the last one.
<script>
window.upcartModifyListOfUpsells = (upsells) =>
{
var productHandlesToExclude = [
"ocean-blue-shirt",
"yellow-wool-jumper"
];
for(var i = 0; i < upsells.length; i++)
{
for(var x = 0; x < productHandlesToExclude.length; x++)
{
upsells = upsells.filter((item) => item.handle !== productHandlesToExclude[x]);
}
}
return upsells;
}
</script>
Version 3: Excluding Product Tags
To exclude products using Product Tags, here’s how to find or create a tag:
In your Shopify Admin, click Products.
Choose the product you want to tag.
Scroll down to the Tags section and either select an existing tag or create a new one.
Be sure to note the tag exactly as it is, since tags are case-sensitive.
For more information on Product Tags, check out Shopify’s Help Documentation on Tags.
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements” AND also into the section titled “Rewards”:
Note: Once you have the Product Tags, you can enter them into the productTagsToExclude array in your HTML code to ensure they don’t appear in your upsell offers. Make sure to add a comma after each entry except for the last one.
<script>
window.upcartModifyListOfUpsells = (upsells) =>
{
// Tags are CASE SENSITIVE
var productTagsToExclude = [
"Exclude From UpCart Upsells"
];
var newUpsellList = upsells.filter((item) => {
const hasExcludedTag = item.tags.some(tag => productTagsToExclude.includes(tag));
return !hasExcludedTag;
});
return newUpsellList;
}
</script>
Conclusion
Now that you've learned how to exclude products from your Shopify UpSells using Product IDs, Handles, and Tags, you're well on your way to optimizing your store's upsell strategy. By filtering out irrelevant or unnecessary items, you can create a more curated shopping experience that increases customer engagement and boosts sales. The ability to customize your product recommendations ensures your offers are more appealing and relevant, ultimately driving higher conversions and a better overall shopping experience.
By implementing these techniques, you’ll have more control over what’s shown in your upsell offers and can tailor them to your business’s goals.
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.