SScale Themedocs

The customer builds their own bundle by selecting products or variants for each slot, with progressive pricing.

Mix & Match Bundle

The Mix & Match bundle is the most flexible type: the customer builds their own bundle by choosing the variant or product for each slot. The price decreases based on the selected quantity.

Principle

Mix & Match is an extension of the quantity bundle. Instead of buying X of the same product (same variant), the customer customizes each unit:

TierQuantityCustomer's choiceDiscount
2x2 unitsVariant A + Variant B-10%
3x3 unitsVariant A + B + C-15%
5x5 units5 variants of choice-20%

For example with socks: the customer chooses 3 pairs in different colors and gets -15%.

ℹ️The Mix & Match bundle is actually the quantity bundle with the "Mix & Match" option enabled. It uses the same block in the Shopify editor, but with the "Enable Mix & Match" checkbox checked.

Activation

In the Quantity Bundle block settings:

  1. Configure the tiers (quantity + discount)
  2. Enable the "Enable Mix & Match" checkbox
  3. Choose the selector type

Selector types

SettingOptionsDefault
Selector typeDropdown / Button / Swatch / ImageDropdown

Classic dropdown menu. Each unit has a <select> with all available variants.

Ideal for: products with many variants, long text.

Button

Horizontally aligned text buttons. The button text corresponds to the variant name.

Ideal for: sizes (S, M, L, XL), quantities, short options.

Swatch

Color circles. The color is extracted from the variant name or a metafield.

SettingOptionsDefault
Color sourceFiles (files in Shopify) / MetafieldFiles

Ideal for: colors, patterns.

Image

Variant image thumbnails. The customer sees each option visually.

Ideal for: products where each variant has a distinct visual appearance.

Selector layout

SettingOptionsDefault
Selector layoutSeparate / CombinedSeparate

Separate

Each unit has its own independent selector. The customer clearly sees:

  • Unit 1: [Selector]
  • Unit 2: [Selector]
  • Unit 3: [Selector]

Combined

A single grouped selector for all units. More compact but less explicit.

💡"Separate" mode is recommended for better UX. The customer immediately understands they can choose a different variant for each unit. "Combined" mode is useful when space is limited.

Full configuration

Mix & Match inherits all quantity bundle settings:

Tiers

  • Up to 4 tiers (quantity + discount + label)
  • Optional tier 4

Layout

  • Vertical / Horizontal / Grid
  • Tier style: Default / Compact
  • Selection style: Background / Border / Checkbox
  • Mobile layout: Auto / Keep horizontal / Force vertical

Display

  • Product image
  • Unit price
  • Savings (%)

Badges

  • Up to 2 customizable badges
  • Styles: Solid / Outline / Pill

Extensions

  • Progressive gifts
  • Subscription

See Quantity Bundle for details on each setting.

Technical operation

When the customer validates a Mix & Match tier, each unit is added to the cart as a distinct line item with line item properties:

_bundle_id: "mix-match-1234"
_bundle_name: "Pack 3x"
_bundle_discount: "15"
_bundle_unit: "1"  (or 2, 3...)

These properties allow identifying items as part of a bundle in the cart.

Use cases

Socks (color choice)

  • Tier 1: 1 pair (0%)
  • Tier 2: 3 pairs (-15%) -- badge "Most popular"
  • Tier 3: 5 pairs (-25%) -- badge "Best value"
  • Selector: Swatch (colors)
  • Selector layout: Separate

Dietary supplements (flavor choice)

  • Tier 1: 1 box
  • Tier 2: 2 boxes (-10%)
  • Tier 3: 3 boxes (-15%)
  • Selector: Dropdown (long flavor names)

Jewelry (size choice)

  • Tier 1: 1 bracelet
  • Tier 2: 2 bracelets (-10%)
  • Tier 3: 3 bracelets (-20%)
  • Selector: Button (S, M, L)
⚠️Mix & Match requires the product to have multiple variants. If the product has only one variant (Default Title), the Mix & Match option will be automatically hidden and the standard quantity bundle will be used.