In addition to returning a color swatch (list of colors which will switch the picture of the product as a mouse over effect), Boxalino can also changed the default selected pictures of the products according to the selected facet (here, for example, the color “grün” was selected and all the green clothes pictures are showing by default even if the user can still see the other color by going of the swatch color icons).

Open

How to provide us the visual swatch data (e.g. color swatch)

In order to enable a color swatch feature, you need first to send us the required data in your data export.

In particular we need:

• The value, value_id, images and the string attributes ‘swatch' and 'key’ to be set in doc_attribute_value as described here.

• The product_line.product_groups[*].skus[*].product_relations (so the product_relations at the level of the sku) of the type ‘super’ defined in doc_product
  (or in the configuration view : @views.extra_product_relations with the proper value for [facet_name]:
  select ‘super' as type, '[facet_name]' as name, '' as product_line, '' as product_group, '' as sku, cast(0 as NUMERIC) as value)
  The only important aspect here is that the type is 'super’ and that the name indicates the facet to be considered for the swatch

• Request the return field “visual_swatch" in your API request

• the bx-hits (each result) will have this returned field set with a value with the structure as follows:

  [ { "name": "color", "values": [ { "value": "braun", "value_id": "165", "images": [ { "name": "image", "value": "media/catalog/product/3/7/image1.jpg" } ], "key": "braun", "swatch": "/color/cp_0010.jpg" }, { "value": "schwarz", "value_id": "183", "images": [ { "name": "image", "value": "media/catalog/product/3/7/image4.jpg" } ], "key": "schwarz", "swatch": "/color/cp_0006.jpg" } ] } ]

  This will already enable you to display a color swatch function in your product listing template

• Make sure to use the selected fields in your product templates (at least for the image) as indicated here

• Finally, if the selected facet matches a defined visual_swatch property and value, then the related product image (as in the visual_swatch above) will be set to replace the value of the bx-hit return fields "selected_image" (you don't have to do anything, the replacement will be done automatically by Boxalino and you will receive directly the adequate value in the "selected_image" field).