To assign color swatches to products, you will need to add them to the products' attributes. The process will have specifics depending on the type of attributes being used (product-specific, product class, or global). For detailed information on product attributes in X-Cart, see the section Product Attributes of our Help Center.

Adding Color Swatches to Product-Specific Attributes

If you need to assign color swatches to just a couple of products in your store or color swatches must be unique for each of the products, it is recommended to add them at the level of product-specific attributes.

Here’s how to do it:

1. Locate a product on the product listing page (Catalog -> Products), proceed to the product details page, and go to the Attributes tab to access the product attributes.

Make sure you are viewing the Product-Specific subsection.


If there are no product-specific attributes, you will need to configure them first.


2. Switch the "Display the option values in" property to Color swatches.

3. Map your color swatches to the attribute values. Select a swatch for each value using the drop-down boxes to the right of the values.

4. Click Save changes.

That’s it. Now your store visitors should be able to see the color swatches on the storefront.

If you want to add an attribute selector, enable it in the Attributes -> Color Swatches settings tab of the product details page.

The storefront's product details page will look like this:

Adding Color Swatches to Product Class and Global Attributes

If you need to add the same color swatches to a group of products in your store, it is recommended to add them at the level of product class attributes. To apply color swatches storewide, use global attributes.

Let’s see how to do it:

1. In your store’s back end, go to the Classes & Attributes page (Catalog > Classes & Attributes). In the list of global attributes and product classes, locate the attribute you require and click on the Edit attributes (N) link opposite it.

2. Choose to create the attribute you require or edit an existing one, as described in the Product Attributes section of our Help Center.

When configuring the attribute, use the Display as a drop-down to set the "Color swatches" value.

If you want to display both color swatches and product options they are built on in the storefront, enable the Show selector toggle.

3. Map the color swatches to the attribute values by selecting a swatch from a drop-down.

4. Save the changes.

That’s it. The color swatches will be added to the product. Now your store visitors should be able to see them on the storefront.

Did this answer your question?