Custom bundle section

This feature was introduced in version 6.7

The custom bundle section lets your customers build their own bundle out of a set of products you choose and add the whole thing to their cart in one go.

Products are displayed in a grid or slider next to a bundle card. As your customers pick products, they are staged in the bundle card rather than added to the cart directly. Nothing reaches the cart until they press “Add all to cart”. You can require a minimum quantity or a minimum total before that button becomes available, and optionally cap how much can go into a bundle. The staged bundle is remembered for the duration of the customer’s session, so it survives navigating away and coming back.

Products with more than one variant open a quick view drawer so the customer can pick the variant they want before staging it. Products that are sold out, unavailable, or priced on request cannot be staged.

Please note: This section applies no discount of its own. If you want the bundle to be cheaper than the sum of its parts, set up the appropriate automatic discount in your Shopify Admin. Also note that the section is not displayed at all when your store is in catalog mode, since a bundle builder with no way to buy is meaningless.

Section settings

Content

Heading: Set a title for this section. This is optional.

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, XL, and 2XL.

Subheading: Set a subtitle for this section. Also optional.

Headings alignment: Align the heading and subheading Left or Center.

Collection: The collection whose products your customers can pick from.

Maximum products to show: How many of the collection’s products to display (3-50).

Products: Hand-pick the exact products to display instead. Overrides the collection, in which case “Maximum products to show” is ignored.

Product card

Show vendor: Toggles the visibility of the product’s vendor on the product cards.

Show SKU: Toggles the visibility of the product’s SKU on the product cards.

Show stock status: Toggles the visibility of the product’s stock status on the product cards.

Show product rating: Toggles the visibility of the product’s rating on the product cards. To display a rating you need to add a product rating app.

Bundle card

The bundle card is where the customer’s picks are staged before they are added to the cart.

Heading: A title for the bundle card. Optional.

Subheading: An optional line of text under the title, useful for explaining the rules of your bundle.

Requirement type: What the customer must reach before they can add the bundle to their cart. None places no requirement, Minimum quantity requires a number of items, and Minimum total requires a monetary value.

Count by: Whether the minimum and maximum count every unit, or each distinct product once. For example, with a minimum of 3 and counting by Units, three of the same product is a valid bundle; counting by Distinct products, the customer would need three different ones.

Minimum quantity: The number of items required before the bundle can be added to the cart (1 to 20). Applies when the requirement type is “Minimum quantity”.

Minimum total: The value required before the bundle can be added to the cart, in your store’s currency, before discounts, excluding tax and shipping. Applies when the requirement type is “Minimum total”.

Maximum in bundle: The most that can go into a single bundle (0 to 50). 0 means no maximum. Ignored if it is lower than the minimum quantity. Once the maximum is reached the customer is told that their bundle is full.

Show progress: Displays a progress bar showing how close the customer is to meeting the requirement. Only applies when a requirement type is set.

Show total: Displays the running total of the staged bundle.

“Add all to cart” label: Customize the text of the button that adds the bundle to the cart. Leave empty to use the translated “Add all to cart”.

Footnote: Optional small print displayed at the bottom of the bundle card — the perfect place for the terms of your offer.

Bundle card color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Layout

Desktop layout: With the Grid option you can create a typical grid layout of products. A Slider option is also available that lets you create a simple slider layout. For the slider to work, the number of products displayed must be greater than the number of columns.

Number of columns: Sets the number of product columns (3, 4, or 5). The bundle card sits in its own column alongside them.

Bundle card position: Whether the bundle card appears on the Left (default) or the Right of the products. Applies on desktop only.

Stack on mobile: By default, the theme will try to create a flexible scrollable horizontal list of products on mobile. If you prefer to create a vertical list instead, simply enable this option.

Number of columns on mobile: Sets the number of product columns on mobile devices (1 or 2).

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings give you the option to adjust the top & bottom section spacing values. Use the Configure spacing for option to switch between the Desktop and Mobile values, each of which has its own Top spacing and Bottom spacing setting. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide placeholders: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if no collection or products are available, i.e. when there is no meaningful output.