¶ Feature
List attributes used as configurable are going to include optional swatches to show in PDP, PLP filters and possibly in other sections.
Configurable products will show the swatches for attributes that have them configured. These attributes could be combined in the same product with other attributes that has no swatches.
Custom options datasources for variants generation does not support swatches in this version of the feature.
¶ Attribute Model
List attributes will have the possibility to be configured with swatches with the following details:
The new optional attribute field is useSwatches of type string, with the options:
"none"(default): No swatches are applied to this attribute."texts": The attribute use text swatches."colors": The attribute use color swatches."images": The attribute use image swatches.
When it is not present, it is equivalent to have it with the value "none".
Admin view of the new field:
This new field must be visible in the Admin form only for List attributes.
¶ Text Swatches
When configuring an attribute with useSwatches equal to "texts", the Options grid remains unchanged.
The swatches will show the title of the options.
¶ Color Swatches
When configuring an attribute with useSwatches equal to "colors", each option of the attribute will have a UI to edit and see its color.
The color values must be specified in CSS format with 6 hexadecimal digits, including the "#" character at the beginning (for instance, "#aa4500", #02FF09C).
Admin setup:
Store (PDP):
Store (PLP Filters)
- For options that was no value in the swatch, a transparent square is shown in the Store swatch.
¶ Image Swatches
When configuring an attribute with useSwatches equal to "images", each option of the attribute will have a UI to edit and see its image.
The image values must be an id of an existing asset uploaded to the API.
Admin setup:
Store (PDP):
- For options that was no value in the swatch, a default swatch image is shown in the Store swatch.
¶ No Swatches
When configuring an attribute with useSwatches equal to "none" (or equivalently when the field is not present at all), the Options grid remains unchanged, so no Swatch column in present. The same happends in the Store PDP, the attribute is shown as a dropdown with no swatches.
¶ API Changes
- Refactor List attribute options to be implemented in a specific field and not using
validations. - Remove
validationsproperty in attribute model. - Add property
useSwatchesto attribute model. - Add swatches information on list options.
- Orchestrate swatches in filters.
¶ Future work
- Add support for swatches to custom options datasources.