How to Set Up Product Bundle / Popular Upgrades in product page Concept theme

The Product bundle block is available inside the Product information section on product pages. It allows merchants to display related products or accessories that customers can add together with the main product.

This feature is useful for:

  • Showing popular upgrades or accessories
  • Increasing average order value
  • Creating product-specific add-on recommendations
  • Displaying variant-specific bundle items that change when customers select a different variant

You can check our demo product, Soundroll, to see this feature in action.

Product bundle example

How to Set Up Product Bundle / Popular Upgrades

STEPS:

1. Add the Product Bundle Block

First, add the Product bundle block to your product template.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open the product template where you want to show the bundle block, such as Default product.
  4. In the sidebar, open Template > Product information.
  5. Click Add block.
  6. Select Product bundle.
Add Product bundle block

After adding the block, you can configure the heading, icon, product list, and metafield settings.

Product bundle block settings

Recommended basic setup:

Setting Description
Heading The title displayed above the bundle items, such as Popular upgrades.
Icon Optional theme icon shown next to the heading.
Custom icon Optional custom image icon. If added, it will be used instead of the theme icon.
Icon width Controls the icon size.
Initially display as open Opens the bundle accordion by default when the selected main product variant is available.
Enable clickable items Makes each bundle product title link to its product page.
Enable variant selection Allows customers to select a variant for each bundle product.
Products Selects the bundle products manually or connects a product list metafield by dynamic source.
Metafield Optional namespace and key used to dynamically load bundle products or variants. This setting has priority over the Products setting.
2. Select Bundle Products Manually

Use this method if you want to show the same bundle products on all product pages that use the same product template.

Method 1: Select products in the theme editor

  1. In the Product bundle block, find the Products setting.

  2. Click Select.

    Select bundle products
  3. Select the related products you want to show in the bundle.

  4. Click Select or Done.

  5. Click Save.

    Choose products for the bundle

Important:

This method applies the selected products globally to every product page using that product template. If you need a different bundle list for each product, use a product metafield instead.

3. Set Bundle Products Per Product Using a Product Metafield

Use this method if each product needs its own bundle products.

Instead of selecting fixed products in the theme editor, you can create a product metafield that stores a list of related products. Then, connect that metafield to the Products setting in the Product bundle block.

Method 2: Create a product metafield

  1. From your Shopify admin, go to Settings > Metafields and metaobjects.

  2. Click Products.

  3. Click Add definition.

    Go to product metafields
  4. Enter a metafield name.

    Example:

    Popular upgrades
    
  5. After you enter the name, Shopify will automatically recommend a Namespace and key.

  6. Click the suggested Namespace and key value if you want to edit it manually.

  7. Use a namespace and key such as:

    custom.popular_upgrades
    
    Create product metafield
  8. Click Select type.

  9. Choose Product.

  10. Select List of products.

  11. Click Save.

Recommended setup:

Field Value
Name Popular upgrades
Namespace and key custom.popular_upgrades
Type Product
Value type List of products

Add bundle products to each product

After creating the metafield, add values to each product.

  1. From your Shopify admin, go to Products.
  2. Open the product where you want to show bundle products.
  3. Scroll down to the Metafields area.
  4. Open the Popular upgrades metafield.
  5. Click Select products.
  6. Choose the products you want to show as bundle items.
  7. Click Save.
Select products in the metafield
Product metafield result

Connect the product metafield to the Product bundle block

  1. Go back to Online Store > Themes > Customize.

  2. Open the product template.

  3. Open Product information > Product bundle.

  4. In the Products setting, click the dynamic source icon.

    Connect dynamic source
  5. Select the product metafield you created, such as Popular upgrades.

  6. Click Save.

Now each product can display a different list of bundle products from its own metafield.

4. Set Variant-Specific Bundle Products Using the Metafield Setting

Use this method if the bundle products should change when customers select a different variant of the main product.

For example, if the main product is a speaker with different colors, you may want the bundle accessory to change from a black cover to a green cover when the customer selects the green speaker variant.

Variant-specific bundle example

Important:

The Metafield setting in the Product bundle block has priority over the Products setting. If this field is filled and the metafield has values, the theme will use the metafield values instead of the manually selected product list.

Metafield setting

Method 3: Create a variant metafield

  1. From your Shopify admin, go to Settings > Metafields and metaobjects.

  2. Click Variants.

  3. Click Add definition.

    Go to variant metafields
  4. Enter a metafield name.

    Example:

    Product bundle
    
  5. Shopify will automatically recommend a Namespace and key based on the name.

  6. Click the suggested Namespace and key value if you want to edit it manually.

  7. Use a namespace and key such as:

    custom.product_bundle
    
    Create variant metafield
  8. Click Select type.

  9. Choose Product variant.

  10. Select List of product variants.

  11. Click Save.

Recommended setup:

Field Value
Name Product bundle
Namespace and key custom.product_bundle
Type Product variant
Value type List of product variants

You can also use Product with List of products if you want to assign products instead of specific variants.

Add bundle variants to each main product variant

  1. From your Shopify admin, go to Products.
  2. Open the product that has multiple variants.
  3. Open one of its variants.
  4. Scroll down to the Metafields area.
  5. Open the Product bundle metafield.
  6. Click Select variants.
  7. Select the related variants you want to bundle with this main variant.
  8. Click Save.

Example: for the Green speaker variant, select the matching Green cover variant.

Assign variant metafield
Select matching bundle variant

Repeat the same process for each main product variant.

Enter the metafield namespace and key in the Product bundle block

  1. Go back to Online Store > Themes > Customize.

  2. Open the product template.

  3. Open Product information > Product bundle.

  4. In the Metafield field, enter the exact namespace and key you created.

    Example:

    custom.product_bundle
    
  5. Click Save.

Now, when customers switch the selected variant on the product page, the Product bundle block can update based on the selected variant's metafield values.

5. Understand How the Product Bundle Block Chooses Products

The Product bundle block can load bundle items in three main ways.

Priority Source When to use
1 Selected variant metafield entered in the Metafield setting Use this for variant-specific bundle products.
2 Product metafield entered in the Metafield setting Use this when you want a product-specific bundle list and also want the Metafield setting to control the source.
3 Products setting in the theme editor Use this for manually selected products or a dynamic source connected to the Products setting.

Important behavior:

  • If the Metafield setting is blank, the theme uses the Products setting.
  • If the Metafield setting is filled, the theme checks the product metafield and the selected variant metafield using that namespace and key.
  • If the selected variant has values in that metafield, the selected variant metafield can override the product-level metafield.
  • If no products or variants are found, the block will not display on the storefront.
  • Sold-out bundle variants are shown as unavailable and cannot be selected.
  • When Enable variant selection is enabled, customers can choose available variants for each bundle product before adding them to cart.
  • When Enable clickable items is enabled, each bundle product title links to its product page.
6. Preview and Test the Product Bundle

After setting up the block and metafields, open the product page on your storefront and test the result.

Check the following:

  • The Product bundle block appears on the product page.
  • The heading and icon display correctly.
  • The correct bundle products appear.
  • Product-specific metafields show different bundle items on different product pages.
  • Variant-specific metafields update the bundle items when customers change variants.
  • Sold-out variants are disabled or marked as sold out.
  • Bundle items can be selected and added to cart together with the main product.

If the block does not appear, confirm that the selected product or metafield actually contains at least one valid product or product variant.

7. Notes and Limitations

Please note the following behavior:

  • The Product bundle block is added inside the Product information section.
  • The block can be used once per product information section.
  • Manually selected products in the Products setting are shared across all product pages using the same template.
  • To use different bundle products per product, use a product metafield with Product > List of products.
  • To use different bundle items per selected variant, use a variant metafield with Product variant > List of product variants.
  • The namespace and key entered in the Metafield setting must match the metafield definition exactly.
  • The Metafield setting has priority over the manually selected Products setting.
  • If both product-level and variant-level metafields exist with the same namespace and key, the selected variant metafield can override the product-level metafield when it has values.
  • The bundle block only displays when it has valid products or variants to show.
  • Discounts are handled by Shopify and will be applied at checkout if your store has matching discounts configured.

Troubleshooting

If the Product bundle block does not display or does not work as expected, please check the following:

  • Make sure the Product bundle block has been added to the product template.
  • Make sure the block has products selected, or a valid metafield source connected.
  • If using the Products setting, make sure products are selected manually or connected through a dynamic source.
  • If using a product metafield, make sure the metafield type is Product and the value type is List of products.
  • If using a variant metafield, make sure the metafield type is Product variant and the value type is List of product variants.
  • Make sure the metafield has values assigned on the product or variant.
  • Make sure the namespace and key entered in the Metafield setting are correct.
  • Do not include extra spaces before or after the namespace and key.
  • Make sure the related products are active and available on the Online Store sales channel.
  • If a bundle item is disabled, check whether that product variant is sold out.
  • If the same bundle products appear on all products, check whether you are using manually selected products instead of a product metafield.
  • If variant-specific products do not change, make sure each variant has its own metafield values and that the Metafield setting is filled in the block.
  • Clear your browser cache and refresh the storefront.
  • Make sure you are using Concept v4.0.0 or later.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.