Last updated: April 13, 2024
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".
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:
In Smartrr's admin, navigate to Subscription Programs > Bundles
Click Manage
Save the bundle to the theme (or a duplicate theme) that you want the bundle builder button to appear on
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:
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:
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
.
Below are the line item properties that will be added to a given bundle product:
Below are the line item properties from the example above, All In Cheese and Fruit Bundle.
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:
If a bundle purchase is one-time and not a subscription, "selling_plan"
will be omitted. Example:
Below is a plain-text schema of the parsed JSON:
Below is the JSON schema that can be used for reference:
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
)
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.
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.