The Product bundle section allows you to showcase a group of products together with promotional content, helping customers discover and purchase products as a bundle. The section can include a section header, promotional banner, countdown timer, call-to-action button, and product cards.
It is suitable for creating limited-time bundle campaigns, product combinations, or promotional offers.
Click the section name to see the section settings on the right-hand sidebar.
Choose which products customers can select when creating their bundle.
Collection: Select a collection to display products from.
Products: Manually select specific products to display. When products are selected manually, they replace the selected collection.
Maximum products to show: Set the maximum number of products displayed in the section.
Number of columns on desktop: Set the number of product columns on desktop screens. This setting applies to screens 1400px and wider; smaller desktop screens automatically adjust the number of columns.
Carousel on mobile: Enable a swipeable product carousel on mobile devices.
Number of columns on mobile: Choose between 1 column and 2 columns for the mobile product layout.
Configure how many products customers can add to a bundle.
Minimum required products: Set the minimum number of products customers must select to create the bundle.
Maximum allowed products: Set the maximum number of products customers can select for the bundle.
Allow duplicate products: Allow customers to add the same product more than once to the bundle.
Note: To apply a discount to the bundle, you need to create a discount code manually. The theme cannot automatically create discount codes.
Customize the bundle summary displayed beside the product list.
Title: Enter the heading displayed in the bundle sidebar, such as Your custom bundle.
Description: Add instructions or supporting information below the title, such as Choose any 3 products and get 15% OFF your total.
Show progress bar: Show or hide the progress bar that indicates the customer's bundle selection progress.
Image ratio: Select the image ratio used for product images displayed in the bundle sidebar.
Button: Enter the label for the final bundle button, such as Add bundle to cart.
Customize how products are displayed in the product selection area.
Image ratio: Select the image ratio used for product images.
Vendor: Show or hide the product vendor.
Highlights: Show or hide product highlights.
Style: Choose between Standard and Card styles.
Text alignment: Choose how product information is aligned within the card: Left or Center.
Customize the overall appearance of the Product bundle section.
Reveal on scroll: Show an animation when the section becomes visible while scrolling.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Use these settings to adjust the spacing around the section on desktop and mobile devices.
Top padding: Adjust the spacing above the section on desktop.
Bottom padding: Adjust the spacing below the section on desktop.
Mobile top padding: Adjust the spacing above the section on mobile devices.
Mobile bottom padding: Adjust the spacing below the section on mobile devices.
The Section header container allows you to add introductory content above the bundle.
Text alignment: Choose how the content is aligned within the section header: left, center, or right.
Custom width: Enable this option to customize the width of the section header content.
Click Add block under Section header to add content.
The available child blocks include:
Group button: Add a group of call-to-action buttons.
Heading: Add the main heading of the section, such as Create your Ideal Bundle.
Spacer: Add additional spacing between content blocks.
Sub text: Add a short secondary text or tagline.
Text: Add supporting information or a description below the heading.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
The Banner bundle container allows you to create a promotional banner above the bundle products. You can use a background image together with promotional content such as a label, heading, countdown timer, and button.
Color scheme: Select the color scheme applied to the banner. You can choose an available color scheme or customize it through Edit scheme.
Background image: Select the background image displayed on desktop.
Mobile background image: Select a separate background image for mobile devices. If no mobile image is selected, the desktop image will be used.
Background size: Choose how the background image is displayed within the banner. Select Cover to fill the entire banner area, which may crop part of the image, or Adapt to image to adjust the banner based on the image proportions.
Image overlay opacity: Adjust the opacity of the overlay displayed over the background image.
Button position: Choose where the button is positioned within the promotional banner. In the example shown, the button is displayed Below countdown.
Content maximum width: Set the maximum width of the promotional content displayed over the banner.
Block padding: Use these settings to control the spacing inside the banner
Click Add block under Banner bundle to add more child blocks as promotion content.
The Label block allows you to add a short promotional message to the banner.
Text: Enter the label content displayed in the banner.
Text size: Select the size of the label text.
For example: 🔥 Limited-time deals.
The Heading block displays the main promotional message within the banner.
Heading: Enter the heading content.
Heading size: Select the size of the heading.
Heading tag: Select the HTML heading tag, such as H2. The selected heading tag can affect the page's heading structure and SEO.
Uppercase: Display the heading text in uppercase.
The Button block adds a call-to-action to the promotional banner.
Button label: Enter the text displayed on the button, such as Shop now.
Button link: Select or enter the destination customers are directed to when clicking the button.
Open in new tab: Open the button link in a new browser tab.
Button size: Choose between Small, Medium, and Large.
Button style: Choose between Outline, Solid, and Link.
Show icon: Show or hide an icon inside the button.
Icon button: Select the icon displayed when Show icon is enabled, such as Arrow circle up right.
Uppercase: Display the button label in uppercase.
The Countdown timer: box block adds a countdown timer to the promotional banner to highlight a time-limited campaign.
The timer displays a maximum of 999 days. The time zone used by the countdown can be selected in Theme settings.
Year: Set the year when the countdown ends.
Month: Set the ending month.
Day: Set the ending day.
Hour: Set the ending hour.
Minute: Set the ending minute.
Action when the timer end: Choose what happens when the countdown reaches zero. Available options include Leave timer at zero, Hide timer, and Hide timer and show a message.
Timer end message: Enter the message displayed when the timer ends if Hide timer and show a message is selected. For example: The countdown has ended!
Transparent background: Enable a transparent background for the countdown boxes.
The Product card container is used to display the products included in the bundle area. It's the default block that you can not make any changes.
Create an automatic discount in Shopify.
The discount is applied only when the bundle products are added to the cart together.
Recommended if you want the discount to apply only when purchasing the full bundle.
If you want the discount to apply only when customers purchase at least 3 items, you can set the minimum quantity to 3.
Please note that if a customer purchases 3 items in total and at least 1 of those products is from the selected product list, the discount will still be applied.
Check the result: