Document Tree
Document Properties
Last Modified
Added to KB
Public Access
Doc Type
Support Articles
ICM 7.10
Support Article – Use HTML Color Codes to Display Color Swatches for Variation Products

Table of Contents


This support article explains how to add HTML Color Swatches to your variation products.

Step by Step

If you have not already prepared variation products before, you need to create a variation type to create product variations automatically, using the desired attribute. This type will also be used later on to create a Variable Variation Attribute.

  1. Go to Catalogs | Product Variation Types | New Variation Type to create a variation type.
    The product attribute name is the ID of the attribute that will be added to the product when you create the variation. In our example we will use this attribute only to better identify the product color.

  2. Select the product of which you want to add the color swatches in Catalogs | Products.
  3. Go to the Variations tab and click New.
  4. Select your Variation Type and create a couple of variations.
    After you are done, you should have a Variable Variation Attribute and some variation products in the Variations tab.

    The products can be identified by a color name which is provided by the variation type.

  5. Adapt the Variable Variation Attribute in order to display color swatches. Change Variation Selection to "HTML Color Code" and add a Product Attribute Name that will be used to provide an HTML color code.


    Remember this ID because you will need it for the variation products.

  6. Go to Catalogs | Products and search your variation products. Add the Product Attribute Name you defined in the Variable Variation Attribute and use an HTML color code to display the desired color. Repeat this for all Variations.

  7. Your products should now be displayed with color swatches in the storefront.

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to if you experience login issues,
or if you want to register as customer.