LogoLogo
  • πŸ› οΈWelcome to Smartrr help docs
  • Links
    • Changelog
    • API Docs
  • Getting Started
    • Implementation
      • πŸͺ„Installing Smartrr on a Shopify 2.0 theme (Automatic Install)
      • πŸ—ΊοΈInstalling Smartrr on a custom Shopify theme (Guided Install)
      • πŸ§Ÿβ€β™‚οΈInstalling Smartrr on a headless store
      • πŸ’»Adding Smartrr to a custom page (Shopify Liquid)
    • Onboarding
      • ⛑️Basic onboarding process
      • 🧀Smartrr team led onboarding
      • πŸ’΅Plans
      • πŸ’³Migrating subscriptions from payment processors
  • Support
    • Subscription Setup
      • πŸ“‡Subscription Programs
      • βš“Subscription anchor dates
      • πŸ—“οΈMaximum/minimum (finite) subscription plans
      • πŸ“§Email subscription notifications (Customer Notifications)
      • πŸ“²SMS subscription notifications (via Twilio)
      • πŸ›οΈSubscription discount codes
      • πŸ’ΈPrepaid subscriptions
      • πŸͺœSequential Flow Builder?
      • πŸ“¦Shipping methods
      • ❔Subscriptions when an item is unavailable
      • πŸ’²Buy-now-pay-later payment methods for subscriptions
      • 🏁Checkout Extensions
    • Admin Portal
      • πŸ”Adjusting customers’ subscriptions
      • πŸ“‡Adjusting customers' information
      • πŸ€Έβ€β™‚οΈ"View as customer" feature
      • πŸ•’Event log
      • πŸ“ŠAdvanced Analytics reporting
      • πŸ–ŒοΈCustomer account portal theming
      • πŸ”€Translations
      • πŸ’»Available actions for customers in account portal
      • 🎨CSS overrides
      • πŸ” Adjusting typography with CSS overrides
      • πŸ“£Marketing Banners
      • πŸ’­Retention
      • 🧺Bundles
      • 🎁Loyalty
      • πŸ”Passwordless login
      • πŸ’ŸCreator upsells
      • 🎞️Instagram feed
    • Customer Account Portal
      • πŸšͺAccessing the Customer Account Portal
      • πŸ”„Creating an account
      • πŸ”œViewing next orders
      • πŸ“Manage subscriptions
      • πŸ—ƒοΈOrder history
      • πŸ“§Updating email address
    • Transactions
      • 🀝Subscription transactions
      • 🚫Failed payments
      • πŸ“†Billing schedule
    • Integrations
      • 🌐Available integrations with Smartrr
      • πŸ“±Attentive x Smartrr Integration
      • πŸ“±Blueprint x Smartrr Integration
      • πŸ“¬Gorgias x Smartrr Integration
      • πŸ“©Klaviyo x Smartrr Integration
      • 🦁Loyalty Lion x Smartrr Integration
      • πŸ“±Postscript x Smartrr Integration
      • πŸ”Recharge x Smartrr Integration
      • 🟩Shopify Flow x Smartrr Integration
      • πŸͺWebhooks
    • Shopify Questions
      • πŸ’²Will updating product prices in Shopify reflect in Smartrr?
    • Developer Documentation
      • Bundles: Developer Documentation
    • Troubleshooting
      • ⏸️Why did my customer's subscription automatically pause?
      • πŸ“žWhy is my customer's shipping address invalid? (Phone number formatting)
      • πŸ†˜Can’t find the answer to your question?
    • RSS Feed
      • πŸ“³Smartrr’s changelog: Stay up-to-date with Slack
Powered by GitBook
On this page
  • Initial Setup
  • Liquid Customizations & Custom Bundles

Was this helpful?

Export as PDF
  1. Support
  2. Developer Documentation

Bundles: Developer Documentation

PreviousDeveloper DocumentationNextTroubleshooting

Last updated 1 year ago

Was this helpful?

Last updated: April 13, 2024

For information on how to set up Bundles within the Smartrr app, view: 🧺 If you're on our πŸ’Ž Excel plan, our implementation team can set up bundles on your storefront for you. The below provides supporting technical documentation that can be used by in-house developers.

The ability to trigger the bundle-builder modal can be placed anywhere on your site. For example, it can live on a parent bundle PDP as a CTA button: "Build my bundle".

Initial Setup

Once Subscription Programs and Bundles have been created in the Smartrr admin, (see above article link), you can add the Smartrr bundle builder button to your shop by taking the following steps:

  1. In Smartrr's admin, navigate to Subscription Programs > Bundles

  2. Click Manage

  3. Save the bundle to the theme (or a duplicate theme) that you want the bundle builder button to appear on

Liquid Customizations & Custom Bundles

In the Shopify theme that the bundle has been saved to, click the "more options" icon left of the Customize button, click Edit code and search for snippets that begin with smartrr-bundle-.

In the example above, we've created the bundle All In Cheese and Fruit Bundle in Smartrr. The corresponding file smartrr-bundle-all-in-cheese-and-fruit-bundle.liquid has been injected into the theme's code. This file contains information about the bundle's name and slug, both of which need to be sent to the cart.

Tip: To manually render on any existing page, add {% render 'smartrr-bundle-{bundle-name}' %} to that page's liquid template.

Next, add the following code at the end of <body> in theme.liquid:

  <!-- END SMARTRR RENDER SNIPPET -->
  {% render 'smartrr-bundle-modal', smartrr_default_page_url: '' %}
  {% render 'smartrr-bundle-css' %}
  <!-- BEGIN SMARTRR RENDER SNIPPET -->

Be sure to change the page URL (ex./pages/bundle) to the page where you have rendered the bundle. Prior to that you need to create a liquid file and a page in the Online Store. First head to the 'Edit Code' for the theme you are using. In the 'Templates' section create a new liquid file, using 'Page' as a template and '.liquid' as a file extension. Add the code described in the 'Tip' section to that page. Head to the Shopify admin, click on the 'Online store' navigation button, then click on 'Pages'. Create a new page and use the 'page.{bundle-name}.liquid' file as a 'Theme template'.

Finally, add in the CTA button code that will trigger the bundle to open with the code:

<div data-smartrr-modal-cta>
  <span>Build Your Box</span>
</div>

Add a test bundle to your cart in your theme. View /cart.json after adding to view the line item properties that have been added.

Tip: The recommended function for adding to cart is: addBundleToCartAndRedirect in smartrr-bundle-js.liquid.

Line Item Properties

Below are the line item properties that will be added to a given bundle product:

{
  "properties": {
    "Bundle": "Name of Bundle",
    "Product1": 4,
    "Product2": 2,
    "ProductN": "Number: Quantity",
    "_smartrr_info": "JSON String: Information about the Bundle"
  } 
}

Below are the line item properties from the example above, All In Cheese and Fruit Bundle.

{
  "properties": {
    "Bundle": "All In Cheese And Fruit Bundle",
    "Brie's Fine Cheese": 1,
    "Ben's Cheese": 1,
    "Juicy Apricots": 1,
    "Red Grapes": 1,
    "_smartrr_info": "{\"items\":[{\"id\":41346996043967,\"quantity\":1,\"selling_plan\":\"2153971903\"},{\"id\":41300866465983,\"quantity\":1,\"selling_plan\":\"2153971903\"},{\"id\":41925668634815,\"quantity\":1,\"selling_plan\":\"2153971903\"},{\"id\":41925668470975,\"quantity\":1,\"selling_plan\":\"2153971903\"}],\"date\":1670278109299,\"page\":\"https://briescheese.myshopify.com/\",\"bundle\":{\"name\":\"All In Cheese And Fruit Bundle\",\"slug\":\"all-in-cheese-and-fruit-bundle/777cdce8-451d-41d8-9fe4-136c969fa7c0\"}}"
  } 
}

Note: _smartrr_info is stringified JSON. If you're using a JS object to store these line item properties then be sure to use JSON.stringify when adding this information to cart item properties.

When the JSON is parsed, you'll see:

{
   "items":[
      {
         "id":41346996043967,
         "quantity":1,
         "selling_plan":"2153971903"
      }{
         "id":41300866465983,
         "quantity":1,
         "selling_plan":"2153971903"
      }{
         "id":41925668634815,
         "quantity":1,
         "selling_plan":"2153971903"
      }{
         "id":41925668470975,
         "quantity":1,
         "selling_plan":"2153971903"
      }
   ],
   "date":1670278109299,
   "page":"https://briescheese.myshopify.com",
   "bundle":{
      "name":"All In Cheese And Fruit Bundle",
      "slug":"all-in-cheese-and-fruit-bundle/777cdce8-451d-41d8-9fe4-136c969fa7c0"
   }
}

If a bundle purchase is one-time and not a subscription, "selling_plan" will be omitted. Example:

{
   "items":[
      {
         "id":41346996043967,
         "quantity":1
      }{
         "id":41300866465983,
         "quantity":1
      }{
         "id":41925668634815,
         "quantity":1
      }{
         "id":41925668470975,
         "quantity":1
      }
   ],
   "date":1670278109299,
   "page":"https://briescheese.myshopify.com",
   "bundle":{
      "name":"All In Cheese And Fruit Bundle",
      "slug":"all-in-cheese-and-fruit-bundle/777cdce8-451d-41d8-9fe4-136c969fa7c0"
   }
}

Below is a plain-text schema of the parsed JSON:

{
   "Array:items":[
      {
         "id":"Number: Variant Id",
         "quantity":"Number: Quantity",
         "selling_plan":"String/Number: Selling Plan ID"
      }
   ],
   "date":"Number: Time of purchase",
   "page":"URLString: Page of purchase",
   "Object:bundle":{
      "name":"String: Name of Bundle",
      "slug":"String: Unique Slug of Bundle"
   }
}

Below is the JSON schema that can be used for reference:

{
   "$schema":"http://json-schema.org/draft-04/schema#",
   "type":"object",
   "properties":{
      "items":{
         "type":"array",
         "items":[
            {
               "type":"object",
               "properties":{
                  "id":{
                     "type":"integer"
                  },
                  "quantity":{
                     "type":"integer"
                  },
                  "selling_plan":{
                     "type":"integer"
                  }
               },
               "required":[
                  "id",
                  "quantity",
                  "selling_plan"
               ]
            }
         ]
      },
      "date":{
         "type":"integer"
      },
      "page":{
         "type":"string"
      },
      "bundle":{
         "type":"object",
         "properties":{
            "name":{
               "type":"string"
            },
            "slug":{
               "type":"string"
            }
         },
         "required":[
            "name",
            "slug"
         ]
      }
   },
   "required":[
      "items",
      "date",
      "page",
      "bundle"
   ]
}

Use these line item properties to integrate with any existing 3PL setup to ensure your bundle contains the correct products.

Below is the code for generating line properties( see function addBundleToCartAndRedirect in smartrr-bundle-js.liquid)

var bundleInfo = {
  items: [],
  date: new Date().getTime(),
  page: window.location.toString(),
  bundle: {
    name: bundle.name,
    slug: bundle.slug,
  },
};
...;
/* For each item in bundle */
bundleInfo.items.push({
  id: lineItem.variant.id,
  quantity: lineItem.quantity,
  selling_plan: sellingPlan,
});
properties[lineItem.product.title] = lineItem.quantity;
/* End For Each */
...;
properties["Bundle"] = bundle.name;
properties["_smartrr_info"] = JSON.stringify(bundleInfo);

Tip: We recommend testing the bundle on a clean for your shop. This will allow you to preview information about the bundle builder and make it easier to compare end results with your desired custom bundle.

Dawn theme
What are Bundles?
Saving to a theme will inject a snippet into the theme's liquid code.
When smartrr-bundle-{bundle-name}.liquid is rendered on the page, you will see the default bundle builder UI.