> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.ushopaid.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1ndiwuh.png) *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** ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1krkeb3.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_urgv2h.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_ydsf28.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1b5se99.png) *Customers can select color, size, and other variants directly from the bundle product card.* --- ## Recommended configurations ### 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.