Support Article – Use HTML Color Codes to Display Color Swatches for Variation Products

Table of Contents

Product Version


Product To Version



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 Customer 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.
Customer Support
Knowledge Base
Product Resources