You're running a marketing campaign (e.g., a clearance sale, a VIP email drip, or a segment-specific promotion) and want visitors arriving from that campaign to see a different reward bar configuration. For example, you might want to hide certain reward tiers that don't apply to the promotion.
This script checks for a specific UTM parameter in the URL, remembers it for the duration of the browsing session, and uses window.eliteCartOverwrites to hide one or more reward tiers.
When a visitor lands on your store with a matching utm_campaign value, the script stores a flag in sessionStorage
On every page load during that session, the flag is checked
If active, the script sets window.eliteCartOverwrites to hide the specified reward tier(s)
The reward bar is re-initialized with the updated configuration
Note:
sessionStoragepersists only for the current browser tab/session. Once the visitor closes the tab, the flag is cleared.
Paste the following into a Custom HTML section (or your theme's <head> via Shopify Admin → Online Store → Themes → Edit Code). Adjust the UTM parameter, storage key, and hidden rewards to fit your campaign.
<script>
(function() {
try {
// ── Configuration ──────────────────────────────────────
var STORAGE_KEY = 'elitecart_my_campaign'; // Unique key per campaign
var UTM_PARAM = 'utm_campaign'; // The URL parameter to check
var UTM_VALUE = 'summer-sale'; // The value that activates hiding
// ────────────────────────────────────────────────────────
// 1. Check URL for the matching parameter
var urlParams = new URLSearchParams(window.location.search);
var hasMatch = urlParams.get(UTM_PARAM) === UTM_VALUE;
// 2. Persist the flag for the rest of the session
if (hasMatch) {
sessionStorage.setItem(STORAGE_KEY, 'true');
}
// 3. Apply overwrite if the flag is active
if (hasMatch || sessionStorage.getItem(STORAGE_KEY) === 'true') {
window.eliteCartOverwrites = Object.assign(
{},
window.eliteCartOverwrites || {},
{
hideReward1: true, // ← Set to true to hide Reward 1
// hideReward2: true, // ← Uncomment to also hide Reward 2
// hideReward3: true // ← Uncomment to also hide Reward 3
}
);
// 4. Tell EliteCart to re-render the reward bar
window.dispatchEvent(new CustomEvent('eliteCart:reinitializeRewardBar'));
}
} catch (error) {
console.error('EliteCart UTM segment handler error:', error);
}
})();
</script>
| A unique sessionStorage key. Use a different key for each campaign so they don't conflict. |
|
| The URL query parameter name to look for. |
|
| The exact value that must match to activate the segment. |
|
| Hides the first reward tier when set to |
|
| Hides the second reward tier when set to |
|
| Hides the third reward tier when set to |
|
Example 1 — VIP email campaign hides Reward 1 and 3, keeps Reward 2:
A visitor clicks a link like https://yourstore.com?utm_campaign=vip-exclusive
var STORAGE_KEY = 'elitecart_vip_exclusive';
var UTM_PARAM = 'utm_campaign';
var UTM_VALUE = 'vip-exclusive';
// ...
{
hideReward1: true,
hideReward3: true
}
Example 2 — Referral partner link hides Reward 2:
A visitor arrives via https://yourstore.com?ref=partner-abc
var STORAGE_KEY = 'elitecart_partner_abc';
var UTM_PARAM = 'ref';
var UTM_VALUE = 'partner-abc';
// ...
{
hideReward2: true
}
You can use any URL parameter — it doesn't have to be a UTM parameter. Common alternatives include ref, source, or a custom parameter like segment.
If you need the flag to persist across sessions (not just the current tab), replace sessionStorage with localStorage. Keep in mind this means the override stays active until the visitor clears their browser data.
To target multiple UTM values with the same behavior, adjust the condition:
var hasMatch = ['summer-sale', 'flash-deal'].indexOf(urlParams.get(UTM_PARAM)) !== -1;
Make sure each campaign uses a unique STORAGE_KEY to avoid conflicts between active campaigns.
Custom HTML & AI-Generated Sections — Overview of the Custom HTML feature and the EliteCart API.