Introduction
Hey there! If you’re looking to hide your rewards bar based on the countries you sell to, you’re in the right place! In this tutorial, we’ll show you how to use some simple CSS to control when and where your rewards bar is visible, depending on the customer’s location. This can be super useful if you offer rewards programs in certain regions but not others, helping to keep your site clean and relevant for your audience.
These customization options are perfect if you have a bit of CSS knowledge and want to tweak your store to create a more tailored shopping experience. Let’s dive in and get your rewards bar working just the way you want!
And remember, if you need any extra help along the way, our support team is always here to assist you!
Getting Started:
First, find the country codes for the countries you WANT the rewards bar to display. You can find them here in the Shopify Country Coded developer doc and write them down or keep the page open for reference.
IMPORTANT NOTE: Even if the rewards bar is hidden, it still exists. This means that any product rewards setup in the module will still automatically be added to the cart.
Accessing Custom CSS and 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 to the bottom of the page until you find the section labeled “Custom HTML” and "Custom CSS".
Applying Custom HTML
Next we need to add the function that will effectively hide the countries. This is done through adding the custom javascript below into the HTML section.
Copy and paste the code into the HTML section titled: “Above Announcements/Rewards”.
Click Save.
Copy and paste the code into the HTML section titled: "On Empty Cart”.
Click Save.
Note: Swap out the country codes as you need where the code says "US" in brackets.
<script>
function hideRewards() {
let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-rewards");
let country = window.Shopify.country;
if (country.includes("US")) {
rewardsBar.classList.remove("hide");
return
}
rewardsBar.classList.add("hide");
}
window.upcartOnCartOpened = setTimeout(hideRewards, 300);
window.upcartOnCartLoaded = hideRewards;
</script>
Applying Custom CSS
Once you are in the Custom CSS section, use the code below.
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
.hide {
display: none;
}
Conclusion
Now that you've learned how to hide the rewards bar based on countries, you'll have better control over your store's appearance and offers.
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.