Instruction for Creating a Gift Product
I managed to implement it without using any additional apps!
Below is the instruction to make it easier to replicate this process.
1. Create Two Metafields for Products:
- Redirect to Product: custom.redirect (Single line of text)
- Hide from Search: seo.hidden (Single line of text)
If there is an error when creating the seo.hidden metafield, install the free app "Edit Metafields," which allows you to set this using a different approach.
2. Edit layout/theme.liquid
Add the following inside <head></head>:
{% if product.metafields.custom.redirect != blank %}
<meta http-equiv="refresh" content="0; url={{ product.metafields.custom.redirect }}">
{% endif %}
3. Create a Duplicate Product:
- Make a copy of the original product.
- Add "GIFT" or "FREE" at the end of the product title.
3.1 Set the Price to 0:
- Set the price of the newly created gift product to 0.
3.2 Set "Hide from Search" to 1:
- If you were unable to create this metafield manually, you can set it using an app:
- Click the More actions button (top right) → select Edit Metafields.
- Fill in the following fields:
- Namespace: seo
- Key: hidden
- Value: 1
4. Get the JSON URL of the Product:
Use the following URL format:
https://your-shopify-store.com/products/<product_address>.json
Example:
https://hiutdenim.co.uk/collections/washed-black/products/italian-black-organic-the-work-straight-fit.json
4.1 Find Variant ID in JSON:
- Look inside the JSON file for Variant id, for example:
[{"id": 41175859724358, "product_id": ...}]- The required Variant ID: 41175859724358
5. Create the snippets/free-gift.liquid File:
{% comment %}
/**
* Automatic Free Gift with Purchase
*
* This snippet adds a free gift to the cart when the cart total exceeds a specified threshold.
* The gift is automatically added/removed as the cart changes, and the functionality can be
* toggled on/off through the Shopify admin.
*
* Features:
* - Automatically adds specified product as a free gift when cart total exceeds threshold
* - Automatically removes the free gift when cart total falls below threshold
* - Can be enabled/disabled via a Shopify liquid variable
* - Handles various cart update scenarios including AJAX updates
* - Hides quantity controls for the free gift in cart
*/
{% endcomment %}
{% assign enable_free_gift = false %} {% comment %} Set to true to enable free gift functionality {% endcomment %}
{% assign product_variant_id = 41175859724358 %} {% comment %} The variant ID of the free gift product {% endcomment %}
{% assign threshold = 90000 %} {% comment %} Cart threshold in cents (900 USD) {% endcomment %}
<style>
/*
* Hide quantity adjustment controls for the free gift product in cart
* This prevents customers from changing the quantity of the free gift
*/
[data-key^="{{ product_variant_id }}"] .js-qty__wrapper {
display: none !important;
}
</style>
<script>
/**
* Free Gift Management System
*
* This script handles the automatic addition and removal of a free gift
* product based on the cart total and a defined threshold.
*/
// Prevents multiple concurrent executions of the gift logic to avoid race conditions
let isGiftProductLogicRunning = false;
// Get the enable/disable setting from Shopify Liquid
const enableFreeGift = {{ enable_free_gift }};
/**
* Initialize the script when the page is fully loaded
*/
document.addEventListener('DOMContentLoaded', function() {
console.log('Gift product script initialized');
console.log('Free gift feature is ' + (enableFreeGift ? 'enabled' : 'disabled'));
// Run the gift logic once on page load
runGiftProductLogic();
// Set up event listeners to detect cart changes
setupCartUpdateListeners();
// Intercept cart additions to detect new products
interceptAddToCart();
});
/**
* Intercepts fetch API calls to detect when products are added to cart
* This helps catch cart updates that might not trigger standard events
*/
function interceptAddToCart() {
const originalFetch = window.fetch;
window.fetch = function() {
const args = arguments;
const url = args[0];
// If this is a cart addition, trigger our logic
if (typeof url === 'string' && url.includes('/cart/add.js')) {
console.log('Product added to cart detected via fetch:', args);
runGiftProductLogic();
}
// Call the original fetch function
return originalFetch.apply(this, arguments);
};
}
/**
* Sets up multiple event listeners to detect cart updates via different methods
* This ensures the gift logic runs regardless of how the cart is updated
*/
function setupCartUpdateListeners() {
// Listen for native cart request complete events
document.addEventListener('cart.requestComplete', function() {
console.log('Cart update detected via cart.requestComplete event');
runGiftProductLogic();
});
// Listen for jQuery-based cart update events (used by many themes)
if (typeof jQuery !== 'undefined') {
jQuery(document).on('cart.loaded cart.requestComplete cart:refresh cart:updated', function(event) {
console.log('Cart update detected via jQuery event:', event.type);
runGiftProductLogic();
});
}
// Fallback: Poll the cart state regularly to catch any missed updates
let lastCartState = JSON.stringify({{ cart | json }});
setInterval(function() {
fetch('/cart.js')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch cart data');
return response.json();
})
.then(cart => {
const currentCartState = JSON.stringify(cart);
if (currentCartState !== lastCartState) {
console.log('Cart update detected via polling');
lastCartState = currentCartState;
runGiftProductLogic();
}
})
.catch(error => console.error('Polling error:', error));
}, 3000); // Check every 3 seconds
}
/**
* Main function that manages the free gift logic
* This ensures the correct products are in the cart based on the current state
*/
function runGiftProductLogic() {
// Prevent multiple simultaneous executions
if (isGiftProductLogicRunning) return;
isGiftProductLogicRunning = true;
console.log('Running gift product logic');
// Get current cart data
fetch('/cart.js')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch cart data');
return response.json();
})
.then(cart => {
// Check if the free gift feature is enabled
if (enableFreeGift) {
// Process cart normally, adding or removing gift as needed
processCart(cart);
} else {
// If feature is disabled, ensure free gift is removed if present
removeFreeGiftIfPresent(cart);
}
})
.catch(error => console.error('Error fetching cart:', error))
.finally(() => {
// Reset flag when done
isGiftProductLogicRunning = false;
});
}
/**
* Removes the free gift product from cart if present
* Used when the feature is disabled or cart total drops below threshold
*
* @param {Object} cart - The current cart object
*/
function removeFreeGiftIfPresent(cart) {
const freeProductVariantId = "{{ product_variant_id }}";
// Check if free product is in cart
for (const item of cart.items) {
if (String(item.variant_id) === String(freeProductVariantId)) {
// Free gift found - remove it
fetch('/cart/change.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id: freeProductVariantId, quantity: 0 })
})
.then(response => {
if (!response.ok) throw new Error('Failed to remove gift product');
return response.json();
})
.then(data => {
console.log('Successfully removed free product (feature disabled):', data);
delayedCartUpdate();
})
.catch(error => console.error('Error removing free product:', error));
break;
}
}
}
/**
* Processes the cart to add or remove the free gift based on cart total
*
* @param {Object} cart - The current cart object
*/
function processCart(cart) {
let cartContainsFreeProduct = false;
const freeProductVariantId = "{{ product_variant_id }}";
const qualifyingCartTotal = {{ threshold }} / 100; // Convert from cents to dollars
const cartTotal = cart.total_price / 100;
// Check if free product is already in cart
for (const item of cart.items) {
if (String(item.variant_id) === String(freeProductVariantId)) {
cartContainsFreeProduct = true;
break;
}
}
// Case 1: Cart meets threshold but free gift isn't in cart yet -> Add it
if (cartTotal >= qualifyingCartTotal && !cartContainsFreeProduct) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({ items: [{ id: freeProductVariantId, quantity: 1 }] })
})
.then(response => {
if (!response.ok) throw new Error('Failed to add gift product');
return response.json();
})
.then(data => {
console.log('Successfully added free product:', data);
delayedCartUpdate();
})
.catch(error => console.error('Error adding free product:', error));
}
// Case 2: Cart below threshold but free gift is in cart -> Remove it
else if (cartTotal < qualifyingCartTotal && cartContainsFreeProduct) {
fetch('/cart/change.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id: freeProductVariantId, quantity: 0 })
})
.then(response => {
if (!response.ok) throw new Error('Failed to remove gift product');
return response.json();
})
.then(data => {
console.log('Successfully removed free product:', data);
delayedCartUpdate();
})
.catch(error => console.error('Error removing free product:', error));
}
// Case 3: No action needed (cart either meets threshold and has gift, or is below threshold and has no gift)
}
/**
* Forces a cart UI update after changes to ensure all elements reflect the current state
* Uses a short delay to ensure the Shopify API has processed any changes
*/
function delayedCartUpdate() {
setTimeout(() => {
fetch('/cart.js')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch cart for UI update');
return response.json();
})
.then(cart => {
// Try multiple methods to refresh the cart UI for different themes
// Method 1: Custom cart:build event
document.dispatchEvent(new CustomEvent('cart:build'));
console.log('Cart UI updated programmatically via cart:build');
// Method 2: jQuery events (used by many themes)
if (typeof jQuery !== 'undefined' && typeof jQuery(document.body).trigger === 'function') {
jQuery(document.body).trigger('cart:refresh');
jQuery(document.body).trigger('cart:build');
}
// Method 3: Theme-specific cart popup update function
if (typeof window.updateCartPopup === 'function') {
window.updateCartPopup(cart);
}
// Method 4: Theme object cart builder
if (typeof theme !== 'undefined' && theme.cart && typeof theme.cart.buildCart === 'function') {
theme.cart.buildCart();
}
})
.catch(error => console.error('Error updating cart UI:', error));
}, 400); // Wait 400ms for Shopify to process the cart change
}
// Custom event that other scripts can listen for
document.addEventListener('cartUpdated', function(event) {
console.log('Cart was updated:', event.detail);
});
</script>
5.1 Specify the Product Variant ID of the Gift Product:
{% assign product_variant_id = 41175859724358 %}5.2 Set enable_free_gift to true:
{% assign enable_free_gift = true %}
6. Add Redirect to the Original Product:
Go back to the free product editing page.
In the Redirect to Product field, enter the URL of the original product with the full price.
(This ensures that the free product cannot be purchased directly but can be added to the cart only as a free gift.)
7. Add Code to Track Cart Value and Manage Free Gift Product:
- Add the following code to snippets/header-cart-drawer.liquid:
<!-- start free-shipping-alert -->
{%- render 'free-gift' -%}
<!-- end free-shipping-alert -->
PS
I am using Expanse theme.
Like it?
Thank me using SOL
HjfwGa9XzUugZxREiHSBSJBKAHiVNtk91aYTsaa4rVAs
