Dynamically-priced customizable bundles Early Adopter Program

Dynamically-priced customizable bundles allow merchants to create bundles where the total price is determined by the items selected by the customer. These bundles also support dynamic quantities, allowing customers to customize the number of products in their bundle. When a dynamically-priced customizable is purchased, all of the bundle contents are automatically added to the Shopify order and do not require Recharge to edit the bundle contents after checkout. This makes the bundle flexible, allows merchants to include products with different price points, and improves fulfillment and accounting processes.

This guide provides an overview and instructions for creating a dynamically-priced customizable.

Before you start

• Dynamically-priced customizable bundles is in Early Adopter status. To request access to this feature, fill out the Dynamically-priced customizable bundles interest form. For more information on the Early Adopter Program, previously known as the Recharge Beta Program, see Early Adopter Program.
• Dynamically-priced customizable bundles are only available on the Recharge Pro plan. 
• Dynamically-priced customizable bundles are only compatible with Affinity or custom customer portal themes. Custom customer portal themes require custom coding to add dynamic functionality.
• Fallback contents and the automatic reset feature aren't supported on Dynamically-priced customizable bundles.
• Note the following limitation when using Workflows with Dynamically-priced customizable bundles:
  • Using swapping workflows will not work on checkout and will only work on recurring order triggers.
  • Dynamically-priced customizable bundles causes inaccuracies with Recharge Analytics.

Customer experience

The customer interacts with a dynamically-priced customizable bundles in several places, the product details page, the cart page, checkout, and the customer portal. The following sections contain an overview of each place a customer interacts with the bundle. 

Product details page

Products in a dynamically-priced customizable bundles use a custom bundle product template called recharge-bundle. This template contains the Recharge bundles widget and is set as the product template for the parent bundle product after the bundle is published. 

Dynamically-priced customizable bundles must be purchased via the bundle widget or a custom bundle widget built with Recharge's JavaScript SDK. Dynamically-priced customizable bundles cannot be added to the customer's cart using any quick-add methods from another page of your storefront.

If the customizable bundle is purchased using the correct widget, the Shopify order will include a _rb_id line item property. If the Shopify order doesn’t contain this line item property, the bundle was purchased with an unsupported method.

Customers can do the following on the product details page:

• Select the bundle type or variant
• Select products to include in their bundle
• Choose the subscription type and frequency
• Add any available add-ons or extra products

If you sell dynamically-priced customizable bundles with a fixed product amount, your product details page may look similar to the following example: 

If you sell dynamically-priced customizable bundles with dynamic quantities, your product details page may look similar to the following example: 

Dynamically-priced customizable bundles with dynamic quantities will prompt the customer to add products within the configured minimum and maximum product settings. These settings are configured when adding the bundle product to Recharge.

There are several bundle widget layout options and the bundling widget can be customized using the Shopify theme editor. For more information on the bundle widget layout options and customizations, see Bundles layout overview.

Cart page

By default, after a customer adds a bundle to their cart, they will be redirected straight to checkout. To edit this setting to redirect the customer to the cart page:

1. Click Bundles in the merchant portal and select the bundle to edit. 
2. In the Additional settings section, select Edit to edit the layout. 
3. Under Add to cart behavior, select Send them to the cart page.

If you allow your customers to access the cart page, the bundle appears as one product, with the customer's bundle contents listed as individual line items.

To ensure dynamically-priced customizable bundles display and work correctly on the cart page, you must update your Shopify theme code. For more information, see Step 6 - Update your Shopify theme.

Checkout

At checkout, each of the customer's bundle contents display individually, with the selected quantity and delivery frequency noted on each line item.

Customer portal

Customers manage their bundle contents and update their selections for upcoming orders from the customer portal. If you offer dynamic quantity bundles, customers can edit the number of products in their upcoming orders using the bundle's pre-configured product quantity ranges. 

Customers can also add dynamically-priced customizable bundles directly from the customer portal. When adding a dynamically-priced customizable bundles from the customer portal, the user is asked to select the bundle contents. If you offer dynamic quantity bundles, customers are prompted to select a number of products within the bundle's pre-configured quantity range. 

The customer portal bundles widget automatically displays bundle subscriptions on the Affinity customer portal theme.

Note the following limitations with dynamically-priced customizable bundles and customer portal themes: 

• Not compatible with Theme Engine themes out of the box, but they can be customized if desired. Refer to our Theme Engine documentation for more information on available endpoints.
• Do not work with Prima or Novum customer portal themes. 

Merchant experience

The bundle price is determined by the price of the bundle contents chosen by the customer. This allows merchants to add products with different price points into bundles, providing flexibility and improving fulfillment and accounting processes.

Checkout order

The initial Shopify checkout order for a dynamically-priced customizable bundles includes all bundle contents as individual line items. This means that Recharge does not need to edit the line items after the order has been processed. 

Recurring orders

Similarly, for recurring dynamically-priced customizable bundle orders, all bundle contents are included as individual line items.

Once the order is processed in Recharge and created in Shopify, the Shopify order contains each bundle content as a separate line item with its own price. Recharge does not edit line items for recurring orders. This differs from fixed-priced customizable and preset bundles, which display bundle contents as discounted items to match the parent bundle price and requires editing of line items.  

Manage Bundles

Bundle contents can be adjusted through the merchant portal from either the Customer details page or Subscription details page:

1. From the merchant portal, click Customers and locate your customer. 
2. Click Edit bundle contents.

Note the following when editing bundle contents:

• Swapping or changing the variant of a bundle subscription removes the bundle contents and requires the contents to be re-selected.
• Bundle rules configured in the bundle settings must be followed (i.e. single item limits, collection limits, quantity limits).

Create a dynamically-priced customizable bundle

When a customer purchases a dynamically-priced customizable bundles, they choose a parent bundle product and are prompted to add bundle contents. As the customer makes their bundle contents, products are added to their cart as individual line items. For information on how this looks on the cart page, see Cart page.

After the customer places their order and subscribes to the bundle, Recharge groups all their bundle contents together, creates a single subscription to the parent bundle product, and saves the customer's selections. 

Refer to the following steps to create a dynamically-priced customizable bundles: 

Step 1 - Set up collections in Shopify

Before creating a bundle in Recharge, you must create Shopify collections that contain the desired bundle products. For example, if you offer a meal box, you can create collections for Breakfast, Lunch, and Dinner products. When customers build their bundles on the storefront, they can add meals from each collection. For instructions on creating Shopify collections, see Create a collection. 

Refer to the following notes when creating collections: 

• If you track inventory on products in a collection, configure the collection as an automated collection in Shopify.
• Set a condition on the collection that inventory must be greater than zero. With the inventory condition set for the collection, out of stock products are automatically removed from the bundle content options. Additionally, customers will be prompted to update their selections in the customer portal if products go out of stock. 
• If a selection in a subscriber’s bundle is out of stock it will still be processed and added to the order. To prevent this from happening, we recommend exporting your bundle contents to assist with inventory planning and using the bulk swap function to swap out the out-of-stock product for all active subscribers.
• Products in a collection must be:
  • Active on the Online Store sales channel in Shopify.
  • Configured in Recharge with the same subscription rules as the parent bundle product.
• If a product in a collection has multiple product variants in Shopify, note the following:
  • You cannot split product variants into multiple collections. For example, if a food product has multiple size options, you cannot separate the 12 oz variant into one collection and the 20 oz variant into another. If you want to add two variants into different collections, you must create the variants as separate products in Shopify.
  • You can choose whether you want the first product variant to automatically get added to the bundle or you can allow customers to choose their variant option. For more information on this setting, see Products with multiple variants.

Step 2 - Add products to Recharge

After creating your collections in Shopify, you must add each product to Recharge and configure subscription rules for each one. The subscription rules for these products must all have the same subscription type and frequency as the parent bundle product. For steps on adding products and configuring subscription rules, see Creating subscription rules.

Note the following when adding products to Recharge for use in dynamically-priced customizable bundles: 

• The subscription frequencies must be the same for all products that will be used in a dynamically-priced customizable bundle and match the subscription type of the parent bundle product. The available subscription types for bundle products are one-time purchase only, one-time and subscription, or subscription only.

• The subscribe and save discount is determined at a bundle level. For a product to be eligible to be part of a bundle, it must have an equivalent plan with matching name, frequency, and discount as the one selected for the bundle.

Step 3 - Create your bundle in Recharge

After configuring your collection(s) in Shopify, you must create the parent bundle product in Recharge. Alternatively, you can select a pre-configured parent bundle product to import from Shopify. We recommend creating the parent bundle product directly in Recharge.

The following instructions take you through setting up and configuring a dynamically-priced customizable bundle in Recharge:

1. In the merchant portal, click Products and select Bundles.
2. Click Create a new bundle.
3. Name the bundle and select Customizable as your bundle type.
   • If you are importing a pre-configured parent bundle product from Shopify, click Already have a product you want to use? Select it here. If you use this method, you cannot change or update the bundle price in Recharge. You must edit the product price to $0.00 directly in Shopify.
4. Under What type of pricing should your bundle have?, select Dynamic.
5. Select Save and continue.
6. Select the collection(s) to include in your bundle and click Save and continue.
7. Optional - Check the box for Customers can choose between different bundle size or options if you would like to offer different versions of the bundle.
   • Add the Option Name and Option Value to create different options for a bundle product. For example, you may to assign size as the option name and four meals and eight meals as the option values. This configuration would create a bundle with four and eight-meal options.
8. Select a Number of products setting:
   • Customers must add a fixed number of products to their bundle - This option requires customers to add a specific number of products to their bundle and does not support dynamic quantities.
   • Customers can choose how many products to add - This option supports dynamic quantities and allows customers to choose their bundle size. You must set a minimum number of products that customers can add to use this option:
     
   • Optional - If you use the option to allow customers to choose how many products to add, you can set an optional upper size limit. Click the checkbox for the Set an upper size limit option and input a number of items.
9. Optional - Set a single-item limit.

Step 4 - Set your subscription type

You must set a subscription type for your bundle. The available subscription types are one-time purchase only, one-time and subscription, or subscription only.

The one-time purchase option will not appear if the parent bundle product is already offered as a subscription in Recharge. If you wish to set the bundle as one-time only, you must first remove the parent bundle product from Recharge.

Refer to the following instructions to set your subscription type:

1. Use the radio button to select a subscription type for your bundle.
2. Configure the subscription settings based on the subscription type you choose. For more information on subscription settings, see Creating subscription rules.
3. Click Save and continue.

Step 5 - OPTIONAL - Update widget layout or add cross-sells

You can edit the bundle widget layout to control the customer experience or add cross-sells to the bundle flow.

For more information on these settings, see Bundles layout overview and Configuring Add-ons and Extras for Bundles. 

Step 6 - Update your Shopify theme

If you allow your customers to access the cart page, before publishing the widget you must update your Shopify theme to include two liquid code snippets that enable dynamically-priced bundling on the cart page. Without adding these snippets, customers and merchants may experience unforeseen issues. 

1. In your Shopify admin, click Online Store and select Themes from the drop-down menu. 
2. Locate your current theme, click Actions, and select Duplicate. Duplicating your current theme will ensure you can revert changes if needed.
3. On the duplicated theme, click Actions and select Edit code. This launches the Theme Editor. 
4. On the Theme Editor, click Snippets and select Add a new snippet.
5. Name the snippet recharge-bundle-cart and select Done.
6. Copy and paste the following code snippet into the code editor and click Save when finished:  

{%- assign rc_displayed_bundles = "" -%}
{%- assign rc_bundles = "" -%}
{%- assign rc_bundles_cart_count = cart.item_count -%}
{%- assign rc_bundles_count = 0 -%}
{%- assign rc_bundles_item_count = 0 -%}

{%- for item in cart.items -%}
  {%- if item.properties["_rc_bundle"] -%}

    {%- unless rc_bundles contains item.properties["_rc_bundle"] -%}
      {%- assign rc_bundles = rc_bundles | append: "," | append: item.properties["_rc_bundle"] -%}
      {%- assign rc_bundles_count = rc_bundles_count | plus: 1 -%}
    {%- endunless -%}

    {%- assign rc_bundles_item_count = rc_bundles_item_count | plus: item.quantity -%}
  {%- endif -%}
{%- endfor -%}

{%- assign rc_bundles = rc_bundles | remove_first: "," -%}
{%- assign rc_bundles_cart_count = rc_bundles_cart_count | minus: rc_bundles_item_count | plus: rc_bundles_count -%}

Repeat steps 4-6 to create a new snippet named recharge-bundle-cart-item using the following code snippet: 

{%- assign rc_bundle_price = 0 -%}
{%- assign rc_bundle_original_price = 0 -%}
{%- assign rc_bundle_selling_plan_allocation_compare_at_price = 0-%}
{%- assign rc_bundle_product = "" -%}
{%- assign rc_bundle_contents = "" -%}
{%- assign rc_bundle_handle = "" -%}
{%- assign rc_bundle_url_to_remove = "/cart/update?" -%}
{%- assign rc_bundle_variant = "" -%}
{%- assign rc_bundle_variant_id = "" -%}


{%- for item in cart.items -%}
  {%- if item.properties["_rc_bundle"] == rc_bundle_id -%}
    {%- assign rc_bundle_price = rc_bundle_price | plus: item.final_line_price-%}

    {%- assign rc_bundle_original_price = rc_bundle_original_price | plus: item.original_line_price -%}

    {%- assign rc_bundle_contents = rc_bundle_contents | append: ", " | append: item.quantity | append: 'x ' | append: item.title -%}

    {%- assign selling_plan_allocation_compare_at_price_total = item.selling_plan_allocation.compare_at_price | default: 0 | times: item.quantity -%}

    {%- assign rc_bundle_selling_plan_allocation_compare_at_price = rc_bundle_selling_plan_allocation_compare_at_price | plus: selling_plan_allocation_compare_at_price_total -%}

    {%- assign rc_bundle_handle = item.properties["_rc_bundle_parent"] -%}

    {%- assign rc_bundle_variant_id = item.properties["_rc_bundle_variant"] | plus: 0 -%}

    {%- assign rc_bundle_url_to_remove = rc_bundle_url_to_remove | append: "updates[" | append: item.key | append: "]=0&" -%}
  {%- endif -%}
{%- endfor -%}

{%- assign rc_bundle_product = all_products[rc_bundle_handle] -%}

{%- assign rc_bundle_contents = rc_bundle_contents | remove_first: ", " -%}

{%- assign rc_displayed_bundles = rc_displayed_bundles | append: "," | append: rc_bundle_id -%}

{%- for variant in rc_bundle_product.variants -%}
  {%- if variant.id == rc_bundle_variant_id -%}
    {%- assign rc_bundle_variant = variant -%}
  {%- endif -%}
{%- endfor -%}

After adding the code snippets, you must update your cart.liquid file to ensure the bundle appears properly on the cart page. 

1. On the Shopify Theme Editor, click Sections and open your cart.liquid or main-cart-items.liquid file. Some themes may use a different naming convention for the cart file. If you cannot locate the file, contact your Shopify theme developer for assistance.
2. In your cart file, locate the line containing {%- for item in cart.items -%}.
3. Update the structure of the cart file using the following code snippet: 

{% include 'recharge-bundle-cart' %}

{%- for item in cart.items -%}
  {%- if rc_bundles contains item.properties["_rc_bundle"] -%}
    {%- unless rc_displayed_bundles contains item.properties["_rc_bundle"] -%}
      {%- comment -%}
        - recharge-bundle-cart-item: exposes the following assignments:
        - rc_bundle_product: The bundle parent product.
        - rc_bundle_variant: The bundle selected variant.
        - rc_bundle_contents: The individual contents copy and it respective quantities: `1x product title, 2x product title`.
        - rc_bundle_price: The total price of all of the items in the bundle in the currency's subunit. This includes any line-level discounts.
        - rc_bundle_original_price: The total price of all of the items in the bundle in the currency's subunit, before discounts have been applied.
        - rc_bundle_selling_plan_allocation_compare_at_price: The total price of all of the items `selling_plan_allocation.compare_at_price`
        - rc_bundle_url_to_remove: A url to remove the bundle from the cart. Similar to `line_item.url_to_remove`.
      {%- endcomment -%} 
      {% include 'recharge-bundle-cart-item' rc_bundle_id: item.properties["_rc_bundle"] %}

      {%- comment -%}
        Render bundle:
      {%- endcomment -%}
      <div>
        <p>{{ rc_bundle_product.title }} - {{ rc_bundle_variant.title }}</p>
        <p>Contents: {{ rc_bundle_contents }}</p>
        <p>{{ rc_bundle_price | money }}</p>
        <a href="{{ rc_bundle_url_to_remove }}">Remove</a>
        </div>
    {%- endunless -%}

  {%- else -%}
    {%- comment -%}
      Make sure to render regular products bellow
      ...
    {%- endcomment -%}
  {%- endif -%}
{%- endfor -%}

Step 7 - Publish the bundle

After configuring the bundle, click Publish bundle. Once the bundle is published, customers can purchase the bundle from your storefront.

You can preview the bundle product details page by clicking Preview your bundle on the Bundle settings page.

Note the following when publishing a bundle:

• Bundle content products must be active on the Online Store sales channel in Shopify.
• We recommend using a test product when testing bundling functionality. Publishing a bundle product that is active on Shopify will fully enable the bundle for customers on the storefront and customer portal.
• To update product images or make adjustments to product settings (inventory, etc.), make updates directly in Shopify.
• To update the Shopify product (price, variants, etc.) after the initial bundle configuration, update the product directly in Shopify.