To assign color swatches to products, you will need to add them to the products' attributes. The process will have specifics depending on the 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 product, we recommend adding them at the level of product-specific attributes.
Here's how to do it:
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.
Switch the "Display the option values in" property to "Color swatches."
Map your color swatches to the attribute values. Then, 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, we recommend adding them at the level of product class attributes. To apply color swatches storewide, use global attributes.
Let's see how to do it:
In your store's back end, go to the "Classes & Attributes" page (Catalog > Classes & Attributes). In the global attributes and product classes list, locate the attribute you require and click on the "Edit attributes (N)" link opposite it.
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" drop-down to set the color swatches' value.
If you want to display color swatches along with product options in the storefront, enable the "Show selector" toggle.
Map the color swatches to the attribute values by selecting a swatch from a drop-down.
Save the changes.
That's it. The color swatches are added to the product. Now your store visitors should be able to see them on the storefront.
Related pages: