Overview
The Single Bundle section and element is a fantastic choice to use if you're selling pre-built "bundle" products or multi-pack offers. In this section, you can add up to 3 products the customer can choose from featuring radio buttons for quick product selection.
This section includes built-in discount options for each product, encouraging customers to buy more and save. In the example below, the Single Bundle section is being used to offer either a single full-priced Boomstick Color product or the Boomstick Trio product at a discount, which includes all 3 Boomstick products:
๐Shopify "Bundle" products and Subscription products are not currently supported.
Adding a Single Bundle
To add a new Single Bundle section to your page, start by adding a new "1 Column" section from the Layout category of the page sections library:
Next, click the "+ Add Element" button within the column of the newly added section:
Find and select the "Single Bundle" element in the "Product" category of the elements popup:
๐ You can add it to an existing section on the page by clicking the blue โ button above or below an element within the section:
โ
*It cannot be added within Product sections (like Product Box, Multiple Bundle, etc.)
Adding Products
After you select the "Single Bundle" element, you will be prompted to select up to 3 products to feature. Click the radio button next to each product you'd like included, then click the "Save" button:
๐If you'd like to feature the same product more than once, first select the product and click Save. Then click the "+Add Product" button in the sidebar to select it again:
Single Bundle Settings
The "Single Bundle" element settings are located in the sidebar and include the following sections:
Products
In the "Products" tab you can:
Drag and Drop products into different orders using the โ ฟ button
Expand/collapse additional product settings for each product by clicking the โถ button
Delete a product by clicking the ๐ button
Click the "Change Product" button to select a different product
Click "Choose Variants" to select specific variant(s) to use if applicable
Set the "Product Discount" type for each product:
None - No discount will be shown.
Percent (Dynamic) - Show a % based discount which auto-applies at Checkout.
Fixed (Dynamic) - Show a $ based discount which auto-applies at Checkout.
๐Only one "Dynamic" discount can be applied to an order at a time. If your page includes products with multiple dynamic discounts, the most recently applied discount will take precedence.Compare At Price - Show the product's "Compare at price" pulled from Shopify.
๐Make sure the "compare at price" set in Shopify is higher than the "price", otherwise it won't be shown.
Set the "Default Product Quantity" you'd used for the product
Click the "+ Add Product" button to add another product if applicable
Layout
In the "Layout" tab, you can set the Vertical Alignment (Top / Middle / Bottom) as well as choose between two distinct Layout options:
Bundle Row
By clicking on the "Bundle Row" element, the following settings are included in the sidebar:
Set the "Active Border Color" which is the border color surrounding the default and/or actively selected product card
Set the "Active Radio Button Color" which is the radio button color used for the default and/or actively selected product
Choose between two distinct Layout options
Adjust the "Product Spacing" using preset sizes (S/M/L/XL) or choose the Custom option to specify an exact pixel value
Radio Button
Click on the "Radio Button" element for a specific product to customize the button color and to access the "Enabled by Default" option, which makes that product pre-selected when toggled on:
โ
Click on the "Radio Button" element for a specific product to customize its color and enable the "Enabled by Default" option to pre-select that product:
๐ Only one product can be enabled by default.
Creating a Multi-pack offer with a Discount
To create a multi-pack offer from a single product, predefine the quantity and set the per-unit discount youโd like to apply.
In the example below, the Snowboard product is being used for each column in the section but has Quantity set at 1, 2, and 3 units respectively.
The Discount for each unit is set at 0%, 10%, and 20%, clearly showing buyers that purchasing more units unlocks better savings.
๐The product titles were converted to text elements and updated to reflect the number of units in each offer. Additional text elements were added below products 2 and 3 to highlight the savings and units. A "Badge" element was enabled on the product 3 image, displaying "Best Value" to emphasize it as the top deal.