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.
• Toggle switch - This option only works when the Bundles is going to be sold as a one time or subscription. With this layout, customers will see a toggle to switch between subscription and only once and then choose the delivery frequency from the dropdown list below.

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

Use translations to update the bundles widget. 

Customize the Bundles page language

Update the verbiage on your Bundles page to match your brand's tone and wording. Update: 

• The name and description of the Bundle if you use the one-page layout
• The bundle description, step titles, and step descriptions if you use the multi-page layout 

Navigate to the merchant portal to update the Bundles page language:

1. Select Bundles from the Product dropdown navigation menu in the Recharge merchant portal.
2. Click on One-page layout or Multi-step layout depending on you Bundles' page layout under your Bundles product, and then Got it to open the editor. 
3. Click Edit one-step layout or Edit multi-step layout. 
4. Update the title and description.
   
5. Click Save and continue.
6. Review your layout setting, then click Save and continue to finalize your changes.

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

Control how customers interact with your bundle. 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. Note that these settings apply only to bundle contents and not add-ons. 
   

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

The Bundles widget offers configuration options for products with multiple variants to fit your needs. You can:

• Decide to always add the first variant to the bundle
• Provide customers the option to choose the variant they want
• Display variants as separate products and let customers choose multiple variants of all products

Tailor the variant experience by choosing to show both the product and variant name or just the variant name.

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.