Master and Variation Group Scenarios

The following scenarios describe different ways to present variation groups in your storefront.
Important: To create the master and variation products used in the scenarios, see Variation Master Products for Scenarios.

Scenario 1: Group and Sort Products in a Category by Color

You might want to show products in a category based on color. For example, you might want to show swimsuit tops and bottoms together by color or accessories organized by color. In this scenario, you might want to show all your green shirts first, then your navy shirts, and finally your amber shirts.

In this scenario, you configure the T-shirt (TS) product to have a variation group based on size and assign the variation groups, but not the master product, to the category:

  1. Select site > Merchant Tools > Product and Catalogs > Products, find the master product you want to merchandise, and click the product ID to open it. For this scenario, search for T-shirt. This product isn't part of SiteGenesis data and you must create it using the directions in Variation Master Products for Scenarios.
  2. Click Lock to lock the product for editing.
  3. On the Product page, click the Categories tab and make sure that neither the master product nor any of the variations are assigned to a category. You can also select the variations from the Products list and edit them so they are not assigned to any categories.
  4. On the Product page, click the Variations tab. Make sure slicing is disabled for all variation attributes. To disable slicing, click the variation attribute ID and deselect slicing. Then click Apply.
  5. Assign TS-13 and TS-14 to the storefront-catalog-en catalog womens-clothing-tops category. Set both the primary and classification category to the same category.
  6. Assign TS-15 to the storefront-catalog-en catalog womens-clothing-feeling-red category. Set both the primary and classification category to the same category.
  7. Select site > Merchant Tools > Search > Search Indexes, select the product index and click Rebuild to rebuild the index.

Storefront Experience

The customer navigates to the "Feeling Red" category

  1. The customer searches for keyword T-shirt.
  2. The storefront shows the search results page with one result for the product from the Women's Tops category shown as a navy shirt with three swatches beneath it.
  3. The shopper clicks T-shirt for the navy variation.
  4. The storefront shows the product detail page, and the navy image included for the product master appears.

The customer searches for keyword T-shirt.

  1. The storefront shows the search results page with one result for the product from the Women's Tops category shown as a navy shirt with three swatches beneath it.
  2. The shopper clicks T-shirt for the navy variation.
  3. The storefront shows the product detail page, and the navy image included for the product master appears.

Scenario 2: Assign Products to Slot Configuration Based on Color

If you want to show a different image for each variation of product, for example a coat in many colors, you can do so by making the attribute a slicing attribute. In this scenario, you configure the T-shirt (TS) product to appear in three color variations. When you slice, the online variations products appear instead of the master product.

  1. Select site > Merchant Tools > Products and Catalogs > Products, find the master product you want to merchandise, and click the product ID to open it. For this scenario, search for T-shirt. This product isn't part of SiteGenesis data and you must create it using the directions in the Scenario Assumptions.
  2. Click Lock to lock the product for editing.
  3. On the Product page General tab, click the Variations tab.
  4. On the Product page Variations tab, click the color variation attribute to open it and select the Slicing Attribute. Click Apply.
  5. Click << Back to return to the Products page.
  6. On the Product page General tab, for the Images field, click Edit.

  7. Select site > Merchant Tools > Search > Search Indexes, select the product index and click Rebuild to rebuild the index.

Storefront Experience

  1. The shopper searches for keyword T-shirt.
  2. Salesforce B2C Commerce shows the search results page with three results, one for each color.
  3. The shopper clicks T-shirt for the navy variation.
  4. The product detail page shows the navy variation with swatches for all other colors.

Scenario 3: Assign Color Variation to Recommendation

This scenario assumes the T-shirt (TS) product is set up for slicing. See Scenario 2 for more information. For more information about variation slicing by category, see Variation Slicing by Category.

  1. Select site > Products & Catalogs > Products, find the T-shirt (TS) master product and click the product ID to open it. For this scenario, search for T-shirt.
  2. On the Product page Categories tab, for the storefront-catalog-en catalog womens-clothing-tops category, click Details.

    Note: Don't click the category name, because this doesn't bring you to the correct page.
  3. On the Product Category Details page, click the Variation Values tab.

  4. On the Variation Attribute Values tab, for the color/color attribute, click Edit Values.
  5. On the Edit Variation Attribute Values window, select green and amber as the active color variation values and click Apply. This restricts the variations shown for the category.
  6. For the clothingSize/size attribute, click Edit Values, and select M and L as the active size variation values. This restricts the sizes shown for the category.
  7. Select site > Search > Search Indexes, select the product index and click Rebuild to rebuild the index.

B2C Commerce stores the rule that product IDs T4, T5, T6,T7, T8 and T9 will belong to the women-clothing-tops category.

Storefront Experience

  1. The shopper searches for keyword T-shirt.
  2. The shopper selects the amber image.
  3. The product detail page shows the color amber variation and swatches for the other colors appear as well. Swatches for all available variations always appear, whether they are assigned to the category or not.

Scenario 4: Show Swatches in One Category and Sliced Variations in Another Category

In this scenario, you configure the T-shirt (TS) product to show a single image with swatches in the sale category and search results, but sliced variations in the Women's Tops category. The search results determine slicing from the default on the Product page Variations tab. The sale category uses the default, while the Women's Top category overrides the default to allow slicing.

This scenario uses the color variation attribute that is set as the slicing attribute at the catalog level. This scenario assumes that all variation values are available, so if you worked through scenario 3, undo any changes you made on the Variation Values tab.

  1. Select site > Merchant Tools > Products and Catalogs > Products, find the master product you want to merchandise, and click the product ID to open it. For this scenario, search for T-shirt. This product isn't part of SiteGenesis data: you must create it using the directions in the Scenario Assumptions.
  2. Click the product master ID to open the Product page and click the Variations tab.
  3. On the Product page Variations tab, for the color variation attribute, make sure that Slicing isn't selected. If slicing is deselected, default behavior is that there is no slicing, which you will overwrite for the category where you want to show sliced variations.
  4. Click Back.
  5. On the Product page Categories tab, click Edit Categories.

  6. On the Assign to Categories page, expand hidden > sale, select sale-womens, and click Apply. This assigns the product to the sale category and returns you to the previous page.
  7. For the storefront-catalog-en catalog womens-clothing-tops category, click Details.

    Note: Don't click the category name, because this doesn't bring you to the correct page.
  8. On the Product Category Details page, click the Variation Values tab.

  9. On the Variation Attribute Values tab, for the color variation attribute, deselect Use Default.
  10. For the Slicing Attribute list, select Yes.
  11. Click Apply.
  12. Select site > Merchant Tools > Search > Search Indexes, select the product index and click Rebuild to rebuild the index.

Storefront Experience

  1. The customer searches for keyword T-shirt.
  2. The storefront shows the search results page with one result from the Women's Tops category with the product master image shown and swatches.

  3. The customer navigates to the Women's Tops category.
  4. The storefront shows all the variations as slices.

  5. The customer navigates to the Women's Sale category.
  6. The storefront shows a single image with a swatch.

Scenario 5: Show Variation Groups, Variation Products, and Variation Masters 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 master product you want to merchandise, and click the product ID to open it. 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 Scenario Assumptions.
  2. Click the product master ID to open the Product page.
  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: Don't click the category name, because this 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 those that are not assigned to the category. This 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.