Articles on: Mix & Match Bundle

How to Display Color, Size, and Other Variant Options in the Mix & Match Bundle

In the Mix & Match Bundle Editor, you can display product options such as color, size, material, and other Shopify variants directly on the product card.


Customers can select the correct product variant without leaving the bundle page.


This guide applies to the Mix & Match Bundle Editor version. It does not apply to the Mix & Match Bundle Legacy version.



Before you start


Make sure your products already have variants configured in Shopify.


For example:


  • Color: Red, Pink, Black
  • Size: S, M, L
  • Material: Gold, Silver
  • Color and Size combinations


uShopAid displays the product options and variants that already exist in Shopify. It does not create new product variants.



Step 1: Open your bundle in the editor


Open the Mix & Match Bundle that you want to edit.


You can add variant options to:


  • Color Swatch templates
  • Other Single Box templates
  • Multi Box templates


The Color Swatch template is the easiest starting point if you want a ready-made product card layout for color and other variant options.


You can also manually add the Variant picker to another template.



Step 2: Add a Variant picker


In the left toolbar, open:


Products & Layout


Find the following product card structure:


ProductList → ProductCard


Click Add element, then select Variant picker.


The Variant picker allows customers to select available product options directly from the product card.




Under ProductCard, click Add element and select Variant picker.



Step 3: Choose how customers select product options


After adding the Variant picker, select it in the product card structure.


Open the General tab in the right settings panel.


Option selection mode


Use Option selection mode to control how options are presented when a product contains more than one option.


The recommended setting is:


Select each option separately


This works well for products that have multiple options, such as:


  • Color and Size
  • Material and Style
  • Size and Pack Type


Customers can select each option before adding the product to their bundle.


Option values display


Use Option values display to choose how the available values appear.


For example:


Pills


Pills work well for text-based options such as:


  • S, M, L
  • Small, Medium, Large
  • Gold, Silver
  • Pack of 2, Pack of 4


Option name


Set Option name to:


Show option name


This displays the Shopify option name, such as Color, Size, or Material.


You can then use Option name position to choose where the name appears.


For example:


Top




Configure the option selection mode, option values display, and option name.



Step 4: Display colors as swatches


If your products have color-related options, enable:


Display swatches


This allows color values to appear as visual swatches instead of plain text.


You can also choose the swatch shape:


  • Circle
  • Square
  • Rounded


Choose the shape that works best with your product cards and store design.


Color swatches are especially useful for:


  • Cosmetics and beauty products
  • Clothing
  • Jewelry
  • Accessories
  • Home décor products




Enable Display swatches and choose the preferred swatch shape.


Swatches are most useful for color-related options. For size and other text-based options, Pills usually provide a clearer experience.



Step 5: Customize the Variant picker style


Open the Styling tab to customize the appearance of the Variant picker.


Available settings include:


  • Size
  • Option Typography
  • Option Values Typography
  • Spacing
  • Border
  • Advanced
  • Custom CSS


These settings are optional.


You can use them to:


  • Change the size of the option values
  • Adjust spacing between options
  • Customize the selected option border
  • Improve the layout on mobile
  • Apply advanced styling with Custom CSS




Use the Styling tab to adjust typography, size, spacing, borders, and other styles.



Step 6: Save and preview the bundle


Click Save, then preview the bundle on your storefront.


Check that:


  • The correct product options are displayed
  • Customers can select each available option
  • Color values appear as swatches when enabled
  • Size and other text options are easy to read
  • The correct variant is added to the bundle
  • The selected variant price is displayed correctly
  • The layout works properly on desktop and mobile




Customers can select color, size, and other variants directly from the bundle product card.




Products with color options only


For a product that only has color variants:


  1. Enable Display swatches.
  2. Choose Circle, Square, or Rounded.
  3. Show the Color option name if needed.


Products with size options only


For a product that only has size variants:


  1. Set Option values display to Pills.
  2. Set Option name to Show option name.
  3. Set the option name position to Top.


Products with both color and size


For a product that has both Color and Size:


  1. Set Option selection mode to Select each option separately.
  2. Enable Display swatches for the color option.
  3. Use Pills for text-based size values.
  4. Show the option names so customers can distinguish Color from Size.


Other product options


The Variant picker can also display other Shopify product options, such as:


  • Material
  • Style
  • Flavor
  • Pack size
  • Finish


The available options depend on how the product is configured in Shopify.



Important notes


Variants must already exist in Shopify


uShopAid displays the product variants that are already configured in Shopify.


If a product does not have variants, the Variant picker will not have any options to display.


The Variant picker must be added to the ProductCard


If the ProductCard does not contain a Variant picker, customers cannot select color, size, or other variants directly from the card.


Styling is optional


The default Variant picker may already work well with your selected template.


You only need to change the Styling settings when you want to customize its appearance or spacing.



Frequently asked questions


Can customers select color and size directly on the bundle page?


Yes. Add a Variant picker to the ProductCard in the Mix & Match Bundle Editor.


Customers can then select available product options directly from the bundle page.


Can I show colors as swatches?


Yes. Enable Display swatches in the Variant picker settings.


Can I show sizes as selectable pills?


Yes. Set Option values display to Pills.


Can I display both Color and Size?


Yes. Set Option selection mode to Select each option separately.


Customers can then select each option separately.


Can I use this with a Single Box template?


Yes. You can add a Variant picker to other Single Box templates in the Mix & Match Bundle Editor.


Can I use this with a Multi Box template?


Yes. You can also add the Variant picker to product cards in Multi Box templates.


Do I have to use the Color Swatch template?


No. The Color Swatch template is a convenient starting point, but you can manually add a Variant picker to other templates.


Why are no variant options showing?


Check the following:


  • The product has variants configured in Shopify
  • The ProductCard contains a Variant picker
  • You are using the Mix & Match Bundle Editor version
  • The product has available variant values


Why are colors showing as text instead of swatches?


Make sure Display swatches is enabled in the Variant picker settings.


Does this guide apply to the Legacy version?


No. This guide applies to the Mix & Match Bundle Editor.


The Legacy version uses a different interface and may not include the same Variant picker settings.


Can I customize the appearance of the Variant picker?


Yes. Use the Styling tab to adjust typography, size, spacing, borders, and other display settings.

Updated on: 16/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!