The Bundle products section allows you to showcase product bundles that help increase average order value and enhance the shopping experience.
In this guide, you’ll learn how to customize the content, layout, and display of product bundles to match your brand and business needs.
You can access a Bundle products by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Bundle products.
You can configure some general options for the Bundle products section below:
Color scheme: This option allows you to select a pre-defined color scheme for this specific "Bundle products" section. This will likely affect the colors of text, backgrounds, buttons, and other visual elements.
Hotspot color scheme: This option lets you choose a specific color scheme for hotspots that might be present on the product images within the bundle.
Desktop: The image shown is the selected background image for desktop view.
Mobile: If a mobile-specific image is set, it will override the desktop version on smaller screens. If not, the desktop image will be used by default.
Desktop position: Determines whether the image appears on the left or right side of the screen on desktop view.
Image ratio: This option controls the aspect ratio (the proportion between the width and height) of the product images displayed.
Enable quick view: This toggle switch allows you to enable or disable a "quick view" feature for the products.
Show vendor: Enable this option to display the product vendor's name; disable it to hide the vendor's name.
Show total price: Enable this option to show the total price for the bundle (including discounts) below the products; disable it to hide the total price.
Caption: Enter a small piece of text that appears above the main heading — often used to label or introduce the section
Heading: This box is where you input the heading of section. You can format the text using bold, italic, link...
Heading size: Choose the font size of the heading. Options included like Large, Medium, Smalll, Extra small, Extra extra small.
Heading style: Choose the style of the heading, options included:
+ Normal: Displays the heading with standard capitalization.
+ Uppercase: Displays the heading in all capital letters.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Description: Text editor for adding a description below the heading. Supports formatting like bold, italic, lists, links, etc.
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
Page width: Controls the maximum width of the section on desktop (in pixels).
Use collection link on vendor:
Off: Vendor names will not be linked.
On: The vendor name will link to a collection page that matches the vendor name (requires a collection with the same name to exist).
To add a Products block, click the Add Products button (plus icon ➕) under the Bundle products section.
You can configure some general options for the Products block below:
Product: Selects which product is associated with this hotspot.
Hotspot style: There are two options to customize for hotspot style
+ Outline: Displays the hotspot with just a border (transparent background).
+ Solid: Displays the hotspot with a filled-in background (more prominent).
Horizontal position: Sets the left/right placement of the hotspot on the image (as a percentage of the image width).
Vertical position: Sets the top/bottom placement of the hotspot on the image (as a percentage of the image height).
Mobile horizontal position: Sets the left/right placement of the hotspot on the image (as a percentage of the image width) for mobile screens.
Mobile vertical position: Sets the top/bottom placement of the hotspot on the image (as a percentage of the image height) for mobile screens.
