Skip to main content
All CollectionsGetting Started
Displaying the Product in Bundles app block
Displaying the Product in Bundles app block
Spencer Davies avatar
Written by Spencer Davies
Updated over a week ago

Product in Bundles - Introduction

The Product in Bundles feature is an exciting new addition to Bundle Builder!

You can now add an app block to all relevant Product pages on your theme, which notifies customers when a product is included in a bundle

Product in Bundles App Block Example.png

The app block is designed to draw the attention of customers who have already shown interest in a product - prompting them to view its associated bundle(s). As a result, the customer may be incentivized to purchase additional products to receive a discount.

There are three parts to this process:

  1. Including bundles in the app block

  2. Adding the app block to Product pages

  3. Customizing the app block

Part 1. Including bundles in the app block

New bundles

By default, all newly created bundles are automatically configured to work with the Product in Bundles app block. If you wish to exclude a bundle from using this feature, you can manually check the Exclude from app block box during setup.

Exclude From App Block.png

To verify if a bundle is included in the app block:

Step 1: Navigate to your bundle and go to the Products tab.

Step 2: Scroll down to the bottom of the page to find the Exclude from app block checkbox. It should be unchecked if you want products in this bundle to display the app block on their respective Product pages.

Exclude from App Block - Product in Bundles.gif

Next, add the app block to your theme.

Pre-existing bundles

For bundles that were created prior to the release of the Product in Bundles app block (13 November 2023) - the process for ensuring their inclusion is slightly different.

Although the Excluded from app block box is unchecked, your bundles won’t appear in the Product in Bundles app block until you re-save your bundle. This method currently serves as a temporary solution for enabling the feature in pre-existing bundles.

Step 1: Go to a previously created bundle.

Step 2: Navigate to the Products tab.

Step 3: Make a temporary change to the Steps section and click Save. Potential changes can include:

  • Editing the Step name

  • Editing the Description

  • Adding or removing products

  • Adding or removing variants of products

  • Adding or removing rules

In the below example, we changed a single character in the description and saved the bundle:

Existing Bundle Activation - Product in Bundles.gif

Completing any of these actions and saving will result in your bundle appearing in the app block.

Step 4: If necessary, you can change your bundle back to how it was and Save it. From this point on, the Exclude from app block checkbox will be fully functional.

Part 2. Adding the app block to Product pages

The Product in Bundles app block must be added to your Product template manually. To do this:

Step 1: Go to your Theme Editor and navigate to the Product template.

Step 2: View a product that is included in a bundle. (The block will not show up on non-bundle products.)

Product Template - Product in Bundles.gif

Step 3: Add the app block. You can add the block to the Product form (recommended) or as a standalone section elsewhere on the page and drag their position. Alternatively, use both options for maximum visibility.

Product form app block example:

Adding Product in Bundles Block.gif

Apps section example:

Product in Bundles Section.png

Note: The app block will display against all products assigned to the template. However, the block will only be visible on products that are part of bundles - unless you exclude them.

Part 3. Customizing the app block

The block is highly customizable, allowing you to adjust various elements such as the icon, content, font, colors, layout, and modal.

Tip: If adding multiple app blocks, remember to customize each one separately.

Step 1: Click the Product in Bundles app block to access a range of customization options.

Product in Bundles Block Settings.gif

Step 2 (optional): Configure the Icon. In this section, you can change the image and size. The icon will represent all bundles on this template. We recommend using a square icon to achieve the best results.

Step 3 (optional): Configure the Content. Here, you can customize the wording that appears beside the icon, as well as the font size and alignment. This is used to inform your customers that the product is included in a bundle.

Step 4 (optional): Configure the Colors. The font, block background, text hover background, border, and modal underlay colors can all be changed to better reflect your branding and theme.

Step 5 (optional): Configure the Layout to adjust borders, padding, and margins.

Step 6 (optional): Configure the Modal. The modal is a pop-out window that displays extra information when the icon or text is clicked. In this case, this modal tells your customers what bundle(s) the product is part of.

Product in Bundle Modal Settings.png

You can customize its size, title, footer text, and display type. Additionally, you can decide the product thumbnail width and the alignment of the product card text that is displayed beneath.

Step 7: Save your changes. Now, when your customers view a product that’s part of a bundle, they will have the option to click the app block’s icon and text - which will provide a link to the bundle page!

Product in Bundles Example 2.gif
Did this answer your question?