Managing the Bundles widget layout

Bundles allow for various layouts and configurations. This guide walks through how to customize the layout for the bundle page and product details.

Bundles layout options

One-page

• The one-page layout minimizes clicks and maximizes conversions. This layout is normally used for simple bundles with only a few options. Customers set up their bundles on a single page.
• In a one-page layout, you can configure the title, description and subscription toggle.

Select Edit one-step layout to configure additional options for the one-step layout.

• Single dropdown - Adds a dropdown list to the top of the page where customers can select their frequency.

Multi-step

• The multi-step layout maximizes average order value and is ideal for more complicated bundles. Customers are taken through a few different steps to create and review their bundle.
• In the multi-step layout, you can configure the step title, main title, and description can be added for each step of the flow (box type, choose products, extra subscriptions, and review step). 

Select Edit multi-step layout to configure additional options for the multi-step layout. Add descriptions for each variant option and configure a title and description for each step of bundle creation for the customer.

Theme customization

The widget and page layout for customizable bundles can be updated in the Shopify theme editor. This can be accessed through the Shopify theme settings or by clicking Customize bundle layout on the Bundles page.

The color, text size, spacing, buttons, and product appearance of the Bundles Widget can be edited and additional theme sections can be added to the page. These edits will impact all bundles using the default recharge-bundle Shopify product template.

Further customizations can be made using CSS outlined in the Customizing the bundle widget.

Bundles translations

The Bundles widget and page are translated by clicking Storefront and selecting Translations in the merchant portal. 

Select the Bundles Widget tab to translate the Bundles widget.

To translate the Bundles section of the customer portal, expand Bundle Management in the Customer Portal - Themes section.

Store layout options

Default bundles options

• Choose a default variant to determine which variant is selected automatically on the page.
• Choose the default frequency option to display.

Add to cart behavior

Each bundle can be configured to:

• Send them to the cart page - Redirect the customer to the cart page which aligns with the standard add to cart functionality.
• Send them straight to the checkout - Bypass the cart page and redirect directly to the checkout.

Product layout options

To access product layout options: 

1. Click Products, then select Bundles in your merchant portal. 

2. Go to your bundles settings by clicking the pencil icon.
   

3. Click Edit next to Layout: One-page under Additional settings.
   

4. Click the Edit settings dropdown to expand the Products in your bundle section.
   

Product details popup

• The product details popup toggles the option for product detail information to be shown when a product is clicked in the bundle menu.
• This product details function provides more information about the bundle product. When enabled, a modal pops up once the product is clicked and displays the product description.
• Product details can be configured through the Shopify product editor by editing the product description.

Products with multiple variants

Customize how products with multiple variant options are configured. You can set if the first variant should be used by default or if the customer can select their option. The customer cannot select multiple variant options for the same product. For example, the customer cannot pick both a small and large t-shirt to add to their bundle.

Displaying collections in your bundle

This feature is available in Bundles with multiple collections.

The collapse feature works differently depending on the setup of the Bundle:

• Collections automatically collapse if collections are set to add an exact number from each collection.
  • When the Bundle widget loads, the first collection is displayed to the customer and the other collections are collapsed. As customers select products from the first collection, the collection automatically collapses, and the next collection expands.
• Customers will need to manually expand and collapse collections if the collection is set to add a range of products from each collection or the collection doesn't have set rules.
  • All collections will be expanded at first, but customers can collapse or expand as they choose.

Filter groups

Create filter groups

Filter groups allow customers to find products based on product tags on the Bundles widget and filter the selection by that tag. You must have at least two tags configured to use filter groups.

1. Click Add a filter group.
2. Confirm that products have been tagged on Shopify.
3. Set a group name. This is what customers will see on the product page. 
4. Click add to select the tags to be used from the list.
5. Select if the results should match any tag or all tags:
   • Any tag - Will show all products matching one of the tags selected. For example, if the customer selects vegetarian and keto, they will see all products with either a vegetarian tag or a keto tag
   • All tags - Will only show products with all of the tags selected. For example, if the customer selects vegetarian and keto, they will only see products with a vegetarian and a keto tag.
6. Select Add filter name to add the group to the bundle product page.
7. Click Publish changes.

Assign a filter group to a bundle

Once you have created filter groups, you can assign them to a bundle. 

1. Select the bundle product you want to add a filter group to and click the pencil icon.
2. Click Layout: One-page.
3. Scroll down and locate the Products in your bundle section.
4. Click Edit settings to expand the section. 
5. In the Set up filters field, click Add a filter group.  
6. Locate your filter, click Add this group, and select Save.
7. Click Publish changes to publish the bundle.