Skip to main content

Bundle Examples

To initialize the Recharge JavaScript SDK, you will need to do it within the root of your theme (wherever the <head> element is located). Generally this tag is located in a file called theme.liquid.

Pre-requisites​

Before using the SDK, make sure you have configured your bundle in the Recharge Bundle admin.

Overview​

The object to represent a bundle looks like this:

{
  "externalProductId": "7200062308549",
  "externalVariantId": "41291293425861",
  "selections": [
    {
      "collectionId": "285790863557",
      "externalProductId": "7200062308549",
      "externalVariantId": "41504991412421",
      "quantity": 2
    },
    {
      "collectionId": "288157827269",
      "externalProductId": "7200061391045",
      "externalVariantId": "41510929465541",
      "quantity": 2
    }
  ]
}

Bundle Object​

AttributeTypeDescription
externalProductIdstringShould match the Shopify Product ID of the Bundle Product
externalVariantIdstringShould match the Shopify Variant ID of the Bundle Product
selectionsarrayHas the contents of the bundle. The items here must respect the rules that are configured in the bundle

Selections Object​

AttributeTypeDescription
collectionIdstringThe Shopify Collection ID where the selected product is included
externalProductIdstringThe Shopify Product ID of the selected product
externalVariantIdstringThe Shopify Variant ID of the selected product
quantitynumberThe number of items of this product

Subscription attributes​

In case you want to create the bundle as a subscription, you will need to add the following optional attribute to the selections of the bundle:

AttributeTypeDescription
sellingPlanIdnumberThis is the ID of the selling plan that you want to associate this product with

Example​

Load the JavaScript SDK script, and then initialize it with your store domain:

<head>
  <!-- Rest of your code -->
  <script src="https://static.rechargecdn.com/assets/storefront/recharge-client-1.55.0.min.js"></script>
  <script>
    recharge.init({
      // This should be your myshopify.com domain
      storeIdentifier: '{{shop.permanent_domain}}',
      appName: 'appName',
      appVersion: '1.0.0',
    });
  </script>
</head>