---
schema_version: "1"
id: 98fb58f6d9a79673fc826f462355f248b683f2f4a453daf5589059c95d434474
title: "Use Case: Showcase Product Variations"
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/comm_uc_product_variations.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.comm_uc_product_variations.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: cdf8d605388471a50ddfd6e180e3bdb60c7ae77c8224512bab5072ae8ed6d702
description: In B2B stores, products often come in various colors, sizes, or styles. With variation products, shoppers can easily explore options without having to go to multiple pages. Show swatches on the Product Listing page for quick previews, and use dropdowns or pills on the Product Detail page for easy selection.
products:
  - Commerce
  - B2B Commerce
release: "264"
---
# Use Case: Showcase Product Variations

In B2B stores, products often come in various colors, sizes, or styles. With variation products, shoppers can easily explore options without having to go to multiple pages. Show swatches on the Product Listing page for quick previews, and use dropdowns or pills on the Product Detail page for easy selection.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=commerce.comm_editions.htm&amp;language=en_US" target="_blank">View supported editions</a>.</td></tr></tbody></table>

[Which Salesforce Commerce Product Do I Have?](https://help.salesforce.com/s/articleView?id=commerce.comm_what_product.htm&language=en_US)

For instance, a T-shirt available in Red and White colors and in sizes S, M, and L generates six variations. When you add color swatches and size pills, shoppers can use them to preview and choose their options from a single page.

To see product variations in action, check out this video.

If you can’t watch the video in full screen, open the video on a new tab: [Showcase Product Variations](https://play.vidyard.com/VHCkBfWfsFc9E6w8YCzAYj).

#### See Also

- [Product Variations and Attributes](https://help.salesforce.com/s/articleView?id=commerce.comm_var_att_intro.htm&language=en_US)
- [Product Variation Search Results](https://help.salesforce.com/s/articleView?id=commerce.comm_var_group_parent.htm&language=en_US)

## Step 1: Add Variations to a Product

Make it easier for customers to choose which T-shirt they want by adding color and size variations.

1. In the navigation sidebar, select a store from the **Store** dropdown.
2. Select **Merchandising** | **Products**.
3. Create a T-shirt product and enter the product details.
4. Under Variations, check **This product has variations**.
5. Create a Color attribute and set its display type to **Swatch**. Add color variations for White, Red, and Green.
6. Create a Size attribute and set the display type to **Pill**. Add size variations for S, M, and L.

![Create product variations](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/comm/images/comm_uc_create_variations.png)

This generates nine variations.

## Step 2. Optimize Search Settings for Variations

To provide a better shopping experience, control how the T-shirt’s product variations appear in search results.

1. Go to **Settings** | **Search**.
2. Click **Additional Settings**.
3. Under Display, edit **Product Variation** and choose an option. You can show only the best-matched variation, parent products, or all the variations in search results.
4. Save the changes.

![Result display settings](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/comm/images/comm_uc_result_display.png)

Search results show product variations based on the selected option. In this case, search results will return only the T-shirt parent product and not each one of its variations.

## Step 3. Customize the Storefront and Search Results Display

Customize product variations to match your store's theme across product and search pages.

1. Go to **Website Design** | **Experience Builder**.
2. Select the **Product** page.
3. Find the Product Variations component and adjust the Color Swatches and Pills settings to align with your store's theme.
4. From the Page dropdown, select the **Search** page.
5. Find the Product Card component and adjust the Swatches settings to align with your store's theme.

![Result display settings](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/comm/images/comm_uc_customize_variations.png)

Product and search pages now show swatches and pills styled to match your store's theme.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/images/icon_note.png)

Note Make sure your inventory settings are configured so that out-of-stock variations are marked. This prevents shoppers from selecting unavailable options. See [Set Up Inventory for B2B Stores](https://help.salesforce.com/s/articleView?id=commerce.comm_set_up_inventory.htm&language=en_US).