Create the discount code. In our example: FREE_AUTO_ADDED_PRODUCT
Determine the variant id of the product you wish to be added.
If your product has multiple variants, just click into the variant and take the last long number from the URL.
If your product only has one variant, visit the product page in Shopify admin, e.g. https://admin.shopify.com/store/myStore/products/10028233720087 and then add .json to the end. E.g. https://admin.shopify.com/store/myStore/products/10028233720087.json
Now you’ll see a bunch of text. Find “variants”: [ . Then copy the “id” from below (not the product_id, but “id”). In below example 50829687161111.
In the Custom HTML section, choose any section. Then type an AI prompt like: I want to check whether the discount code FREE_AUTO_ADDED_PRODUCT is used and if it is then I want to automatically add product with variant id 50829687161111 to cart.
This will result in code like like the following. Save the EliteCart settings, open EliteCart in your theme, and check whether everything works as intended.
<div id="discount-auto-add-handler" class="tw-hidden">
<script>
(function() {
const TARGET_DISCOUNT_CODE = 'FREE_AUTO_ADDED_PRODUCT';
const AUTO_ADD_VARIANT_ID = '50829687161111';
let isProcessing = false;
function hasTargetDiscount(cartData) {
if (!cartData) return false;
// Check if discount codes are available in cart data
if (cartData.discount_codes && Array.isArray(cartData.discount_codes)) {
return cartData.discount_codes.some(discount =>
discount.code && discount.code.toUpperCase() === TARGET_DISCOUNT_CODE
);
}
// Fallback: check if discounts are in cart attributes or other location
if (cartData.attributes && cartData.attributes.discount_code) {
return cartData.attributes.discount_code.toUpperCase() === TARGET_DISCOUNT_CODE;
}
return false;
}
function hasAutoAddProduct(cartData) {
if (!cartData || !cartData.items) return false;
return cartData.items.some(item =>
item.variant_id && item.variant_id.toString() === AUTO_ADD_VARIANT_ID
);
}
async function addAutoProduct() {
if (isProcessing) return;
isProcessing = true;
try {
// Use fetch to add product to cart
const response = await fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: AUTO_ADD_VARIANT_ID,
quantity: 1
})
});
if (response.ok) {
// Trigger cart update in EliteCart
if (window.EliteCart && typeof window.EliteCart.refreshCart === 'function') {
window.EliteCart.refreshCart();
}
}
} catch (error) {
console.warn('Failed to auto-add product:', error);
} finally {
isProcessing = false;
}
}
async function removeAutoProduct() {
if (isProcessing) return;
const cartData = window.EliteCart.getCurrentCart();
if (!cartData || !cartData.items) return;
const autoProduct = cartData.items.find(item =>
item.variant_id && item.variant_id.toString() === AUTO_ADD_VARIANT_ID
);
if (!autoProduct) return;
isProcessing = true;
try {
const response = await fetch('/cart/change.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: autoProduct.variant_id,
quantity: 0
})
});
if (response.ok) {
// Trigger cart update in EliteCart
if (window.EliteCart && typeof window.EliteCart.refreshCart === 'function') {
window.EliteCart.refreshCart();
}
}
} catch (error) {
console.warn('Failed to remove auto product:', error);
} finally {
isProcessing = false;
}
}
function handleCartChange(cartData) {
if (!cartData || isProcessing) return;
const hasDiscount = hasTargetDiscount(cartData);
const hasProduct = hasAutoAddProduct(cartData);
if (hasDiscount && !hasProduct) {
// Discount present but product not in cart - add it
addAutoProduct();
} else if (!hasDiscount && hasProduct) {
// Discount not present but product is in cart - remove it
removeAutoProduct();
}
}
// Initialize on page load
const initialCart = window.EliteCart.getCurrentCart();
handleCartChange(initialCart);
// Listen for cart changes
window.EliteCart.onCartChange(handleCartChange);
})();
</script>
</div>