Skip to main content

Hide the Rewards Bar for Specific Countries

Use custom HTML and CSS to show or hide your rewards bar based on customer location.

Updated over 3 weeks ago

Overview

If you only offer rewards in certain regions, you can hide the rewards bar from customers in specific countries using a combination of JavaScript and CSS. This helps keep your cart clean and relevant for shoppers based on where they are browsing from.

Note:

Even when hidden, the rewards logic still runs in the background. For example, a free gift may still be added to the cart if the conditions are met, even if the bar is not visible.


Step 1: Find your target country codes

You’ll need to define which countries should see the rewards bar. To find codes, refer to Shopify’s list of ISO 2-letter country codes.

Examples:

  • US → United States

  • CA → Canada

  • MX → Mexico


Step 2: Add custom HTML

  1. Go to Upcart > Cart Editor > Settings > Custom HTML

  2. Paste the following code into both of these locations:

    • Above announcements/rewards

    • On empty cart

Replace "US" with your desired country code(s).

<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>

Alternative Code For Rewards V2 version

If you have upgraded your rewards to the V2 version, the code is just slightly different as the rewards selector is replaced with the new .upcart-internal-rewards selector. Use the below code if you have upgraded your tiered rewards module

<script>
function hideRewards() {
let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-internal-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>

To support multiple countries, adjust the condition like this:

if (["US", "CA", "GB"].includes(country)) {

Step 3: Add custom CSS

  1. Go to Upcart > Cart Editor > Settings > Custom CSS

  2. Paste this code to control visibility:

.hide {   display: none; }

Final result

Customers from excluded countries will not see the rewards bar in their cart, even though reward logic still functions in the background.

Use this method if:

  • You only offer rewards in select markets

  • You want to avoid displaying non-applicable promotions

  • You need a short-term workaround before setting up proper region-based logic


Need help?

For advanced regional logic or JavaScript support, we recommend working with a Shopify Expert. Upcart support does not assist with writing or troubleshooting custom code.

Did this answer your question?