How to show and modify the color squares (color selectors)

Applicable to : Merlin Backoffice ™, PrestaPricing (tuto and screen shots made with PrestaPricing)

We will explain how to choose or modify the colors of small squares associated with color attributes, which appear in the product pages of PrestaShop sites, as in this example:

Where can I find the exact value of the color of the small squares associated with each color attribute in PrestaPricing?

1. Go to the "declinations and images" tab
2. Then in the sub-tab "attributes"
3. Click on the gear to display the attributes
4. Choose the attribute group containing your colors (by default it is called "Color")
5. and 6 In the color column in the left table, the value displayed in the lines starting with # corresponds to the hexadecimal code of the color

How to change the color of small squares associated with each color attribute in PrestaPricing?

Two methods to change the color of small squares associated with each color type attribute in PrestaPricing?

The first method is to edit the hexadecimal code directly in the "6" field if you know it.

For example #ffffff means white and # 000000 means black. This is a standard #RGB code. You can use this code to enter precise colors, for example found in a Pantone color chart.


The second method is to fetch the color in the selector:

For it

1. Double click in the color column on the color line (indicator 6 in the image above)
2. This opens the selector: choose your color (in the chromatic wheel, or the table or by entering the RGB or CMYK components, or with the pipette tool ...)
3. Click OK

Tip: If the cell is empty without color, double-clicking does not open the color picker. Just type # in the cell, change row to save this value and return to the cell marked # then proceed as described above, double-click the cell to open the selector and choose your color.

Little reminder:

In order for small squares to appear on the page, the attributes group must be defined as a group of colors and more than its type of display must be defined as being of the "color" type. You can do it directly from PrestaPricing, in the table of attribute groups:

1. The group is defined as a group containing colors
2. The display type of the group is set to "color".

How do you make small squares of color appear in the page with PrestaPricing?

Next week we will see how to properly set PrestaPricing and PrestaCategories so that the thumbnails or photos are displayed correctly and not in the form of simple question marks.