Color Palettes Subtab

To configure a color palette:

1. Go to Commerce > Websites > Configuration.

2. Select the website and domain.

3. Click Configure.

4. Select the Layout subtab.

5. Select the Color Palettes subtab.

6. Click a row in the list.

7. In the Palette ID field, enter an ID for the color. Default color palettes use the default ID. For custom palettes, use numbers 1 to 20.

   Note:

   Most sites use only one color palette, so the palette ID is the same for every color. However, you can have use multiple color palettes by entering a different value in the Palette ID field for each color.

8. In the Color Name field, enter a color name that matches the name in your custom color list (Customization > Lists, Records & Fields > Lists).

9. In the Color Value field, enter a color value. This can be a color name, hex value, or gradient. For best results, use hex values.

   Or

10. If you want a color option that doesn't have a hex value, such as an image of fabric, leave the Color Value field blank and set the following fields:

    1. In the Image Source field, specify the image URL. For example, /siteImgFolder/colorImage.jpg.

    2. In the Image Height field, enter the image height in pixels.

    3. In the Image Width field, enter the image width in pixels.

11. Click Add.

12. Repeat steps 6 to 11 for each color palette you want to add.

    Note:

    To remove a color palette, click its row and select Remove.

13. Click Save.

14. Select the Shopping Catalog subtab.

15. Select the Facets subtab.

16. Select an item in the list.

17. In the Color Palette field, enter the palette id.

18. From the Template field, select facets_faceted_navigation_item_color.tpl.

19. Click OK.

20. Click Save.

Color Palettes Elbrus Release and Later

The Image fields above are available in Elbrus and later Commerce releases. For earlier versions, you can add the image as an object in the Color Value field. Set the type (image), src (URL), and width and height (in pixels).

Related Topics