Color Palettes Subtab

From the Color Palettes subtab on the configuration record, you can configure the color palettes to use for facets. You can use either images or any valid CSS color value. The Color Palettes subtab lists the default color palettes. You can use the default color palettes or you can configure your own. Before you configure a color palette you should set up a custom list of colors available on matrix items. For details, see Custom Lists.

To configure a color palette:

Go to Commerce > Websites > Configuration.
Select the website and domain.
Click Configure.
Select the Layout subtab.
Select the Color Palettes subtab.
Click a row in the list.
In the Palette ID field, enter an id for the color. Default color palettes have the default id. When creating a custom color palette, use only number values from 1 to 20.

Note:
Most sites use only one color palette, and therefore the palette id is the same for every color. However, you can have use multiple color palettes. For example, if you have two kinds of color options you can have different versions for each color. To do this, enter a different value in the Palette ID field for each color.
In the Color Name field, enter a color name. The name entered here must match the color name in your custom color list (Customization > Lists, Records & Fields > Lists).
In the Color Value field, enter a color value. This can include a color name, hex value, or gradient. For maximum compatibility use hex values.

Or
You may want a color option that cannot be generated from a hexadecimal value, such as an image of fabric. If you want to use an image as a color source, leave the Color Value field blank and set the following fields:
1. In the Image Source field, specify the source image for the color as a URL. For example, /siteImgFolder/colorImage.jpg.
2. In the Image Height field, enter the height of the image in pixels.
3. In the Image Width field, enter the width of the image in pixels.
Click Add.
Repeat steps 6 to 11 for each color palette you want to add.

Note:
To remove a color palette from the list, click the row in the list of the palette you want to remove and select Remove.
Click Save.
Select the Shopping Catalog subtab.
Select the Facets subtab.
Select an item in the list.
In the Color Palette field, enter the palette id.
From the Template field, select facets_faceted_navigation_item_color.tpl.
Click OK.
Click Save.

Color Palettes Elbrus Release and Later

The preceding Image fields are available in the Elbrus and later releases of Commerce web stores. These Image fields are not available for earlier releases, but you can define the image as an object in the Color Value field. To define an object in the Color Value field instead of a specifying a hexadecimal value, define the object type (image), src (URL), width and height (in pixels).

{type: 'image', src: '/siteImgFolder/colorImage.png', width: 20, height: 20}

IDs

layout.ColorPalette

layout.ColorPalette.paletteId

layout.ColorPalette.colorName

layout.ColorPalette.colorValue

layout.ColorPalette.imgsrc

layout.ColorPalette.imgheight

layout.ColorPalette.imgwidth

IDs (pre-Elbrus)

Note:

These properties appear in the Shopping Catalog tab and Facet Color Palettes subtab in Vinson implementations of SCA.

facetsColorPalette

facetsColorPalette.paletteId

facetsColorPalette.colorName

facetsColorPalette.colorValue

UI location

Layout > Color Palettes

Configuration file (pre-Vinson)

SC.Shopping.Configuration.js

To configure a color palette:

Color Palettes Elbrus Release and Later

Related Topics