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. Hover your cursor over the attribute for which you need to add swatches. This will reveal the Color swatches checkbox option.
Enable the Color Swatches checkbox.
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.
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, enable the toggle Use color swatches.
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.
Adding Color Swatches to Product Variants
Color swatches can be used with product variants. To add color swatches to variants, you need to map the swatches to the attributes of which the variants are built.