Salesforce B2C Commerce 24.7 > Merchandising Your Site > Catalogs, Categories, and Products > Products > Product Variation Types > Product Variation Scenarios > Base Product and Variation Product Scenarios

Scenario 5:

Show Variation Groups, Variation Products, and Base Products with Swatches in a Category.

This scenario assigns blue and green variations to the Women's Top category and the amber variation to the sale category. If you worked through scenario 4, you don't have to assign the product to the sale category.

  1. Select site > Products & Catalogs > Products, find the base product you want to merchandise. To open the product, click the product ID. For this scenario, search for T-shirt. This product is not part of SiteGenesis data and you must create it using the directions in the Base Products for Scenarios.
  2. To open the Product page, click the base product ID .
  3. On the Product page Variations tab, for the color variation attribute, make sure that Slicing is selected and click Apply.
  4. Click Back..
  5. On the Product page Categories tab, click Edit Categories.
  6. Expand hidden > sale, select sale-womens, and click Apply.
  7. For the storefront-catalog-en catalog sale-womens, category, click Details.
  8. Click the Variation Values tab and for the color/color attribute, click Edit Values.
  9. On the Edit Variation Attribute Values window, select the navy variation and deselect the amber and green variations.
  10. Click Apply and then click Back to List.
  11. For the storefront-catalog-en catalog womens-clothing-tops category, click Details.
    Note: Clicking the category name doesn't bring you to the correct page.
  12. On the Product Category Details page, click the Variation Values tab.
  13. For the color/color attribute, click Edit Values.
  14. On the Edit Variation Attribute Values window, select the amber and green variations and deselect the navy variation.
  15. Click Apply.
  16. Select site > Merchant Tools > Search > Search Indexes,. Select the product index and click Rebuild to rebuild the index.

Storefront Experience

  1. The customer navigates to the Women's Tops category.
  2. The storefront shows a search results page that contains two "T-shirt" results, one in amber and one in green.
  3. The customer navigates to the Women's Sale category.
  4. The storefront shows a single image of the navy variation with no swatch.
  5. The customer searches on T-shirt.
  6. The product detail page shows the variation image with swatches for all available variations, including variations that are not assigned to the category. This approach lets a customer purchase a variation that is not currently on sale.

Troubleshooting Tips

If you don't see the product in the storefront, make sure that the product belongs to the correct catalogs and categories.

If you don't see the variation folders on the Product page General tab, make sure that the Variation Attribute ID for the catalog image settings matches the Custom ID for the Variation attribute added to the product on the Product page Variations tab.

Infocenter Retirement: On June 30, 2023, the Infocenter was retired, and documentation currently hosted on the Infocenter will be published to Salesforce Help, Commerce Cloud Developer Center, and Salesforce B2C Commerce Developer Documentation Resources. For more information, see the release note.