Hey friends! 👋

This time, we’re not just talking about how we built a smart Add to Cart button — we’re showing it with demo links and working code.

Let’s say your store sells pet food in Small, Medium, and Large sizes. You also offer subscriptions, and you want to throw in a freebie too. Here’s how we made everything click together.

🧪 DEMO Add to Cart + Buy Now Links

Let’s use the following demo values:

• Product Variant IDs:

  • Small: 1234567890

  • Medium: 1234567891

  • Large: 1234567892

• Free Product Variant IDs:

  • Small: 2234567890

  • Medium: 2234567891

  • Large: 2234567892

• Subscription Plan ID: 87654321

• Quantity: 2

🛒 Add to Cart link:

https://webiste.com/cart/add?items[0][id]=1234567891&items[0][quantity]=2&items[0][selling_plan]=87654321&items[1][id]=2234567891&items[1][quantity]=1

⚡ Buy Now link (goes straight to checkout):

https://webiste.com/cart/clear?return_to=%2Fcart%2Fadd%3Fitems%5B0%5D%5Bid%5D%3D1234567891%26items%5B0%5D%5Bquantity%5D%3D2%26items%5B0%5D%5Bselling_plan%5D%3D87654321%26items%5B1%5D%5Bid%5D%3D2234567891%26items%5B1%5D%5Bquantity%5D%3D1%26return_to%3D%2Fcheckout

💡 JavaScript Code (Copy and Paste)

Here’s the full code that does all the magic:

<!-- Buttons -->
<div class="cart-btn" style="margin:20px 0px;">
<a id="cart-url-output" href="#" class="add-cart-custom" target="_blank">Add to cart</a>
<a id="checkout-url-output" href="#" class="buy-now-custom" target="_blank">Buy Now!</a>
</div>

$(document).ready(function () {
let productData = {
size_small: '1234567890',
size_medium: '1234567891',
size_large: '1234567892'
};

let freeProductData = {
size_small: '2234567890',
size_medium: '2234567891',
size_large: '2234567892'
};

function getSelectedSizeValue() {
return $('.all-inputs-sizes input[name="option2"]:checked').val();
}

function getSelectedQuantity() {
let qty = parseInt($('#qty-input').val(), 10);
if (isNaN(qty) || qty < 1) qty = 1;
return qty;
}

function getSelectedSubscription() {
const selectedSub = $('.subscription-option.selected');
return {
frequency: selectedSub.data('frequency'),
subscriptionValue: selectedSub.data('subscription-value')
};
}

function generateURLs() {
const selectedSize = getSelectedSizeValue().toLowerCase();
const quantity = getSelectedQuantity();
const subscription = getSelectedSubscription();

const productSizeID = productData[`size_${selectedSize}`];
const freeProductSizeID = freeProductData[`size_${selectedSize}`];

const cartURL = `https://waggyy.com/cart/add?` +
`items[0][id]=${productSizeID}&` +
`items[0][quantity]=${quantity}&` +
`items[0][selling_plan]=${subscription.subscriptionValue}&` +
`items[1][id]=${freeProductSizeID}&` +
`items[1][quantity]=1`;

const checkoutURL = `https://waggyy.com/cart/clear?return_to=` +
encodeURIComponent(`/cart/add?items[0][id]=${productSizeID}&items[0][quantity]=${quantity}&items[0][selling_plan]=${subscription.subscriptionValue}&items[1][id]=${freeProductSizeID}&items[1][quantity]=1&return_to=/checkout`);

$('#cart-url-output').attr('href', cartURL);
$('#checkout-url-output').attr('href', checkoutURL);
}

function refreshSelectionsAndURLs() {
generateURLs();
}

// Simulated click/select events
$('.all-inputs-sizes input[name="option2"]').on('change', refreshSelectionsAndURLs);
$('.subscription-option').on('click', function () {
$('.subscription-option').removeClass('selected');
$(this).addClass('selected');
refreshSelectionsAndURLs();
});

$('#qty-increase').on('click', function () {
let qty = getSelectedQuantity();
$('#qty-input').val(qty + 1);
refreshSelectionsAndURLs();
});

$('#qty-decrease').on('click', function () {
let qty = getSelectedQuantity();
if (qty > 1) {
$('#qty-input').val(qty - 1);
refreshSelectionsAndURLs();
}
});

$('#qty-input').on('input change', function () {
refreshSelectionsAndURLs();
});

// First load
refreshSelectionsAndURLs();
});

✅ What You Need to Make This Work

1. Replace the variant IDs with your own from Shopify admin.

2. Set your own selling_plan IDs from your subscription app.

3. Add simple radio buttons for size and subscription in HTML.

4. Add quantity input field with increase/decrease buttons.

Final Thoughts

This setup makes life easier for your customers — and you! It removes steps, adds flexibility, and works great with Shopify’s cart system. Try it on your store, or ask us if you get stuck — we’re happy to help! 💬