The Color Selection panel gives customers a dedicated place to change product-level colors — like the garment color of a t-shirt or the material color of a phone case. Instead of clicking on individual elements on the canvas, customers see labeled color options in a clean list.

This is separate from element-level color changes (which happen through the toolbar or Layers panel). The Color Selection panel is designed for top-level product colors that affect one or more elements through color linking.

Before you start

• The Color Selection panel is not enabled by default. You need to add it to the customizer's module list.
• Elements must be configured with the Show in Color Selection property in the Product Builder.
• Color options (palette or free picker) must be set on the elements.

Step 1: Configure elements for Color Selection

1. Open the product in the Product Builder.
2. Select the element that represents the product color (e.g., a garment shape, background layer, or material fill).
3. Enable the Show in Color Selection property on the element.
4. Set the element's color options:
   • Fixed palette: Assign an array of colors. The customer chooses from these swatches.
   • Free color (picker): Set colors to allow any color. The customer gets a color picker.
5. Give the element a meaningful title — this becomes the label in the Color Selection panel.
6. Save the product.

Step 2: Set up color link groups (optional but recommended)

If changing the product color should update multiple elements at once (e.g., front garment + back garment + sleeve), use a color link group:

1. In the Product Builder, select the first element.
2. Set a Color Link Group name (e.g., "garment-color").
3. Repeat for each element that should share the same color.
4. All elements in the same group will update together when the customer picks a color.

In the Color Selection panel, elements in the same color link group are merged into a single entry. The customer sees one label and one set of color options, and the change applies to all linked elements.

Step 3: Enable the module

Add the Color Selection module to the customizer's enabled modules list for your product.