All Collections
Bundles
Setting Up a Custom Bundle Page
Setting Up a Custom Bundle Page

Learn how to add a parent product and edit your Shopify template to enable creating and managing bundles in Stay.

Cecilia Wilbur avatar
Written by Cecilia Wilbur
Updated over a week ago

Are you looking to incentivize customers so they'll purchase more products? Try creating bundles. A bundle consists of one (1) bundle parent product and any number of child product options. Customers can choose a selection of products to buy together and receive a discounted price for their order.

This guide will help you understand what needs to be set up in your Shopify account before you can set up bundles in Stay.

Setting Up a Bundle Parent in Shopify

What does it mean to set up a Bundle Parent?

The bundle parent is the starting point for setting up a bundle. After you've created your product in Shopify, you will select it as the bundle parent in the Stay Ai app, which identifies the product as the core of the bundle selling plan.

Here are a few key things you need to know about setting up bundle parent products:

  • A new bundle parent product will need to be created for each bundle. A new bundle is required for different product options, size restrictions, or pricing.

  • A parent product’s store page is the page on which the default bundle build appears. Additionally, the parent product has several Shopify metafields written to it that assist with the front-end rendering.

  • A bundle parent can have a price, which dictates the price of the bundle. In this case, the child products should be $0. OR, for dynamically priced bundles, the parent product can be $0, which means the child products should be priced.

  • Any standard products you already have in your Shopify store are accessible for adding to a bundle.

  • Once products are setup in Shopify, you can now configure your bundle selling plan in Stay.

As mentioned, this parent product acts as a “container” for the other child products in the bundle. The parent product's store page is where your customers will be able to build their bundle.

To get started, create a new product in Shopify via the Products page.

Create a bundle parent as a product

  1. In Shopify, navigate to the Products page and create a new product named for your Bundle.

    1. When your customers check out with a Stay Ai bundle, they will be subscribed to the parent product in addition to the products that make up the bundle. You can then use the presence of this parent product in fulfillment to identify bundle-based orders.

  2. Make sure the Track quantity checkbox is unchecked to ensure that the bundle parent does not have any inventory tracking.

  3. If necessary, create any additional unique bundle-only products if necessary.

    1. This is only necessary if you need different products for bundles based on SKU, inventory tracking, etc.

Each bundle parent can be assigned other products or product variants that make up the available product options for a customer to choose from. We recommend that products used as options in the bundle be separate from existing products in the catalog, either duplicated or new.


Setting up a New Template for Custom Bundles

Bundle product templates are created as JSON for easier duplication and management within the customizer. By default, it will display information for the product based on the URL visited. However, assigning blocks to the bundle builder section will load the products from those blocks instead. These blocks are used to have multiple product bundles on the same page. A toggle is created that switches between the different bundle parents assigned to each block.

In your Shopify settings, navigate to the Themes section.

  1. In your Current Theme, find the Actions drop-down and select Edit Code.

  2. Select your product.json file located in the Templates folder. Select the contents of the product.json file and copy to your clipboard.

  3. Extract the zip file attached to this article by scrolling down to the bottom of the page and clicking on the BYOBv2r.zip file. You should see the files used for this component split into their respective folders for Shopify.

  4. Create a new template:

    1. From the Select a template to create dropdown, select product.

    2. Click JSON

    3. Enter bundle in the File name field.

    4. Click Done.

  5. Copy the contents of your product.json file into the newly created product.bundle.json file.

  6. Copy the files associated with the component(s) you wish to install into the respective folders.

  7. You'll need to now create a new section to use with the new template. In the sidebar, click Add a new section

    1. Enter product-bundle in the File name field.

    2. Click Done.

  8. Create necessary product(s) and bundle selling plan(s) and assign the product.bundle.json template to the bundle parent product.

    1. Bundle children products will include selling plan groups from the bundle in addition to any others assigned. If a product option in the bundle is also displayed in the product catalog, it will need logic to hide the bundle selling plans or a separate product will be required for the main catalog and for a bundle option.

    2. If this is done on a live site, be sure that any irrelevant products are hidden from the product catalog on the live site.

The following list is coded (italicized for bundle, bolded for cart) to help identify which files belong to the module.

assets

  • lsg-bundle.css

  • lsg-bundle.js

  • lsg-cart.js

  • lsg-cart.scss

sections

  • lsg-bundle-builder.liquid

  • slidecart.liquid

snippets

  • lsg-bundle-atc.liquid

  • lsg-bundle-frequency-select.liquid

  • lsg-bundle-interval-select.liquid

  • lsg-bundle-product-select.liquid

  • lsg-bundle-selected-products.liquid

  • lsg-bundle-variant-select.liquid

  • lsg-bundle.liquid

templates

  • cart.upselljson.liquid

  • product.bundle.json

Section Settings & Blocks

Section Settings

  • Update URL:
    If this checkbox is toggled, the URL will be dynamically updated as the user interacts with the bundle builder. This updated URL can be used to copy and paste preloaded bundles.

  • Bundle Select Heading:
    This heading appears above the bundle selector, which appears when blocks are used.

  • Frequency Select Heading:
    This heading appears above the OTP/Subscription selector.

  • Frequency One-Time Purchase Label:
    This label is used in the OTP/Subscription selector for One-Time Purchase.

  • Frequency Subscription Label:
    This label is used in the OTP/Subscription selector. This is a fallback (default) used when the setting within Stay Ai cannot be found. This should never actually be seen.

  • Add to Cart Text:
    The text to be placed in the ATC button when the bundle is within the viable threshold. By default the bundle builder will include the price of the currently selected bundle alongside this text ([price] | [ATC text]).

  • Sub-ATC Disclaimer:
    This is a text field that displays underneath the ATC button.

Blocks

Instead of using the product of the current page, blocks can be used to create a multi-bundle selector. For each block you can assign:

  • Bundle Product:
    This is the bundle parent product for the associated bundle you wish to display.

  • Bundle Title:
    This is the label used in the bundle selector.


What Next?

To learn how to manage bundles in Stay Ai, check out our Creating and Managing Bundles in Stay article. You can also check out the Bundles FAQ and Bundles Best Practices & Examples articles for more guidance.

Attachment icon
Did this answer your question?