In many subscription use cases, you might want to bundle an add-on product along with the main product - for example, offering a free digital product, upselling an accessory, membership as opt in or attaching a mandatory companion product.
By default, Shopify treats each product independently. However, with Recurpay and a small theme customization, you can automatically add an add-on product along with the main product during subscription purchase, ensuring a seamless bundled experience for your customers.
How it works?
This setup works by overriding the default "Add to Cart" behaviour and programmatically adding both the main product and the add-on product together using Shopify's cart API.
You can control whether each product is added as a one-time purchase or subscription based on your use case.
Step 1: Create a custom snippet on your theme files.
Go to Shopify Admin → Online Store → Themes → Edit Code.
Under the Snippets directory, Add a new snippet and name it recurpay-custom.liquid:
Open your theme.liquid file and include the snippet right before the closing
</body>tag using:
{% render 'recurpay-custom' %}
Any scripts that we add from next step will be included in this newly created snippet.
Step 2: Fetch the Selling Plan ID of addon product and main product
Do a GET request for the respective product by calling the product js API to get the selling plan details from Shopify
https://{{shop.permanent_domain}}/products/{{product.handle}}.js
The response received from the above API call will have the selling plan info
https://shopify.dev/api/ajax/reference/product#selling-plan-example
Loop the selling_plan_groups object and fetch the selling_plans. The selling plans is an array of objects which will contain the plan name, discount and all other plan data.
Recurpay automatically creates and manage subscription selling plans on Shopify store so you need not use our direct APIs for the integration.
Step 3: Override default "Add to Cart" behaviour via JavaScript
You will need to use custom JS logic to bundle both products, the below code should run on the click of add to cart button on the product page where addon is rendered:
Option 1: Addon product should be added as a subscription purchase and main product as one time purchase.
letformData= {
'items': [
{
'id': '<addon_product_variant_id>',
'quantity': '<quantity>',
'selling_plan': '<selling_plan_id>'
},
{
'id': '<main_product_variant_id>',
'quantity': '<quantity>',
},
]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
Option 2: Addon product should be added as a one time purchase and main product as a subscription purchase.
letformData= {
'items': [
{
'id': '<addon_product_variant_id>',
'quantity': '<quantity>'
},
{
'id': '<main_product_variant_id>',
'quantity': '<quantity>',
'selling_plan': '<selling_plan_id>'
},
]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
Option 3: Both main product and addon product should be added as a subscription purchase.
letformData= {
'items': [
{
'id': '<addon_product_variant_id>',
'quantity': '<quantity>',
'selling_plan': '<selling_plan_id>'
},
{
'id': '<main_product_variant_id>',
'quantity': '<quantity>',
'selling_plan': '<selling_plan_id>'
},
]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
You are all set now. Test out the flow on a preview theme and if everything looks fine you can make it live.
Facing any issue with the flow? Click the green chat button or write us at help@recurpay.com