Documentation
Product Palettes
MANAGING PRODUCT PALETTESDocument Revision: v1.0
OVERVIEW
Product Palettes are reusable color sets used on product pages. Each palette has
a name and one or more colors. Every color includes:
- Color Title Multilingual label shown to customers (one per store language)
- Hexadecimal Color A 6-character hex code (without the # prefix in the form)
- Search Group A predefined color family used for filtering/search (e.g. Red,
Navy, Green)
Once a palette is created, it can be assigned to products under the "Colors" tab
in the Product form. Palettes are managed separately from individual products so
the same color set can be reused across many items.
REQUIRED PERMISSION
The signed-in admin user must have modify permission on catalog/palette.
ADD/CREATE NEW: STEP-BY-STEP
1. Go to Catalog > Palettes.
2. Click the Insert button (top right).
3. On the palette form, enter the Palette Name (required, 3 to 64 characters).
4. Add at least one color row:
a. For each store language, enter a Color Title (required, 3 to 64 characters).
b. Enter the Hexadecimal Color as 6 characters (e.g. FF6B6B). Do not type the
# symbol; the form adds it automatically and shows a color preview swatch.
c. Optionally choose a Search Group from the dropdown (recommended for
storefront color filtering).
5. To add more colors, click Add Color at the bottom of the color table.
6. To remove a color row before saving, click Remove on that row.
7. Save the palette using one of these buttons:
- Save Saves the palette and returns to the palette list.
- Apply Saves the palette and stays on the edit form (useful when adding
several colors in one session).
- Cancel Discards changes and returns to the list.
EXAMPLE: CREATE "Summer Collection 2026"
Goal: a palette with three colors for seasonal products.
Palette Name: Summer Collection 2026
Color 1:
Color Title (English): Coral Sunset
Hexadecimal Color: FF6B6B
Search Group: Red
Color 2:
Color Title (English): Ocean Blue
Hexadecimal Color: 1BA1E2
Search Group: Cyan
Color 3:
Color Title (English): Forest Green
Hexadecimal Color: 60A917
Search Group: Green
(If the store has French enabled, also enter French titles for each color, e.g.
"Corail coucher de soleil", "Bleu ocean", "Vert foret".)
Steps:
1. Catalog > Palettes > Insert
2. Palette Name: Summer Collection 2026
3. Row 0: Coral Sunset | FF6B6B | Red
4. Click Add Color
5. Row 1: Ocean Blue | 1BA1E2 | Cyan
6. Click Add Color
7. Row 2: Forest Green | 60A917 | Green
8. Click Save
Result: the list shows "Summer Collection 2026" with Colors = 3. The palette is
now available in Catalog > Products > [product] > Colors tab.
EDIT: STEP-BY-STEP
1. Go to Catalog > Palettes.
2. Locate the palette (use the name filter if needed).
3. Click Edit in the Action column for that palette.
4. Update the Palette Name and/or any color rows:
- Change titles, hex values, or search groups inline.
- Click Add Color to append new colors.
- Click Remove on a row to delete that color from the form (saved on submit).
5. Click Save, Apply, or Cancel as when creating.
EXAMPLE: EDIT "Summer Collection 2026"
Goal: rename the palette and replace "Ocean Blue" with "Deep Navy".
1. Catalog > Palettes > Edit on "Summer Collection 2026"
2. Change Palette Name to: Summer Collection 2026 (Revised)
3. On the Ocean Blue row, change:
Color Title: Deep Navy
Hexadecimal: 000084
Search Group: Navy
4. Click Save
Result: the palette keeps three colors; the second color is now Deep Navy. Any
products already linked to the old palette_color_id values may need their color
assignments reviewed in the product form, because edit deletes and recreates
color records with new IDs.
DELETE: STEP-BY-STEP
1. Go to Catalog > Palettes.
2. Check the box(es) next to the palette(s) to delete.
(Use the header checkbox to select all palettes on the current page.)
3. Click the Delete button.
4. Confirm the dialog:
Title: "Delete Palettes"
Message: "Are you sure?"
5. The selected palettes are removed and a success message is shown.
EXAMPLE: DELETE ONE PALETTE
Goal: remove the test palette "Summer Collection 2026 (Revised)".
1. Catalog > Palettes
2. Optional: type "Summer" in the filter and click Filter
3. Check the box for "Summer Collection 2026 (Revised)"
4. Click Delete > Confirm
Result: the palette and all of its colors and descriptions are removed from the
database. Products that referenced this palette should be updated separately in
the product form if they still point to a removed palette.
USING PALETTES ON PRODUCTS
After a palette exists:
1. Open Catalog > Products and edit a product.
2. Open the Colors tab.
3. Select the palette from the Palette dropdown.
4. Use the refresh button next to the dropdown to reload color options, or
click the gear icon to open the Palettes manager.
5. Map product colors and images to individual palette colors as needed.
Palettes are shared resources; changing a palette affects every product that
uses it on the next page load.
SEARCH GROUP (SKIN) VALUES
Predefined in ModelSettingSetting::getColors(), including: White, Beige, Ash,
Silver, Grey, Charcoal, Black, Pistachio, Lime, Green, Emerald, Teal, Cyan,
Cobalt, Navy, Indigo, Violet, Pink, Magenta, Crimson, Red, Orange, Amber,
Citrus, Yellow, Brown, Olive, Steel, Mauve, Sienna, Mist, Clear.