Product cards are the building blocks of your Mix & Match Bundle experience.
In the Mix & Match Bundle Editor, you can customize product cards by adding different elements to display product information, variant options, discounts, ratings, and additional actions.
This allows you to create bundle experiences that match your store design and customer shopping behavior.

Open ProductCard settings

To customize a product card, go to:
Products & Layout → ProductList → ProductCard
Click:
Add element
You can add different elements based on the information and actions you want to display.

Add different elements to customize the product card layout.

Product card elements overview

Product image elements

Product badge

Displays badges on product images.
Product badges can be used for:

• Discount labels
• Premium product labels
• Promotional messages
• Product highlights

Examples:

-20%

Premium +$3

Best Seller

You can use:

{{badge_discount}}

Displays the discount value when a discount exists.
Common use case:

• Buy More Save More
• Quantity-based discounts

Example:

-20%

{{badge_discount}} only displays a value when a discount is available. Product badge does not create discounts; it only displays calculated discount information.

{{adjustment_amount}}

Displays the additional product price adjustment amount.
Common use case:

• Fixed-price Single Box bundles
• Fixed-price Multi Box bundles
• Premium product upgrades

Example:
Badge text:

Premium + {{adjustment_amount}}

Result:

Premium +$3

Static badge text can also be used.
Example:

Best Seller

A static badge applies to all products in the ProductList.
Use static badges for:

• Collection-wide messages
• General promotions
• Shared highlights

Product selection elements

Variant picker

Allows customers to select product variants directly on the product card.
Use Variant picker when customers need to choose options such as:

• Color
• Size
• Material
• Other Shopify product options

Example:

Color:
Red
Blue
Black

Variant picker provides an interactive selection experience.

Customers can select product variants directly from the bundle product card.

Product information elements

Variant value

Displays the current variant information on the product card.
Recommended use case:

• Products with one variant
• Products where customers only need to see the variant information

Example:

Color: Gold

Variant value displays information but does not provide a selection control.

Product metafield

Displays custom information stored in Shopify product metafields.
Use Product metafield when the information applies to the entire product.
Examples:

• Material
• Ingredients
• Specifications
• Product features
• Care instructions

Example:

Material: Stainless Steel

Product metafield values are shared across all variants of the product.

Variant metafield

Displays custom information stored in Shopify variant metafields.
Use Variant metafield when information changes depending on the selected variant.
Examples:

• Variant weight
• Variant dimensions
• Variant-specific specifications

Example:

Weight: 500g

Vendor

Displays the Shopify product vendor on the product card.
Example:

Nike

Use Vendor when you want customers to see the brand or supplier information.

Customer trust elements

Product rating

Displays product review information on the product card.
Supported display styles:

• Stars and text
• Stars only

Examples:

★★★★★ 5 reviews

or:

★★★★★

Available settings include:

• Star count
• Display style
• Behavior when no reviews exist
• Review count text

When no reviews exist, you can choose:

• Hide rating when there are no reviews
• Show rating when there are no reviews

Additional action elements

View details

Adds a product details action to the product card.
Customers can use it to view additional product information.
Supported actions:

Open quick view

Opens a quick view window without leaving the bundle page.
Recommended for:

• Faster product browsing
• Keeping customers inside the bundle experience

Go to product page

Redirects customers to the Shopify product page.
Recommended for:

• Products with detailed descriptions
• Products requiring more information before purchase

Recommended product card setups

Fashion products

Recommended elements:

Product image

Product title

Product badge

Variant picker

Price

Add button

Use Variant picker for:

• Color
• Size

Jewelry products

Recommended elements:

Product image

Product title

Variant value

Product metafield

Price

Add button

Use Product metafield for:

• Material
• Stone type
• Product details

High-value products

Recommended elements:

Product image

Product rating

View details

Price

Add button

Help customers review more information before adding products.

Common questions

Can I let customers select color and size on the product card?

Yes.
Add a Variant picker element to the ProductCard.

Can I show the selected variant information?

Yes.
Use Variant value to display variant information on the product card.

Can I display custom product information?

Yes.
Use:

• Product metafield for product-level information
• Variant metafield for variant-level information

How can I show discount percentages on product cards?

Add a Product badge and use:

{{badge_discount}}

The discount value will only appear when a valid discount exists.

How can I show premium product extra charges?

Add a Product badge and use:

Premium + {{adjustment_amount}}

Make sure the product has a configured price adjustment.

Why does my badge appear on every product?

If you use static text such as:

Best Seller

the same badge will appear on all products in the ProductList.
Use dynamic variables when you need product-specific values.

Can I customize the appearance of these elements?

Yes.
Most ProductCard elements include styling options such as:

• Typography
• Spacing
• Borders
• Visibility
• Advanced settings

Updated on: 17/07/2026