Book a demo

Swatch Images API

Switch images on configurable products by looking up the child product that matches the chosen options.

Last updated

On this page

Overview

Use the Swatch Images API to switch images on configurable products with child products.

Prepare the child products

Before you use this API, make sure your child products have the correct structure. Each child product should include images and configurable options that accurately define the product. The API needs this information to identify each product correctly.

Define the product structure like this:

JSON
[
   {
      "entity_id": "68",
      "name": "Chaz Kangeroo Hoodie",
      ...
      "child_products": {
         "53": {
            "entity_id": "53",
            "sku": "MH01-XS-Black",
            "image": "http://magento.local.com/media/main-child-image.jpg",
            "hover_image": "http://magento.local.com/media/hover-child-image.jpg",
            "configurable_options": {
               "size": "166",
               "color": "49"
            }
         }
      }
   }
]

Endpoint

After the data is indexed in Athena XAI, you can call the API for swatch images.

MethodPath
POST/api/v1/swatches
POST/api/v2/swatches

Request body

JSON
{
   "token": "{{ website_token }}", //required
   "id": "1780", //required, product id
   "swatches_attribute": [ //required, child product configurable options
      "166",
      "53"
   ]
}

Successful response

JSON
{
   "data": {
      "entity_id": "1765",
      "sku": "MH01-XS-BlackWT07-XS-Green",
      "image": "http://magento.local.com/media/main-child-image.jpg",
      "hover_image": "http://magento.local.com/media/hover-child-image.jpg",
      "color": "53",
      "size": "166",
      "products": [
         {
            "entity_id": "1765",
            "sku": "WT07-XS-Green",
            "image": "http://magento.local.com/media/main-child-image.jpg",
            "stock_status": true,
            "hover_image": "http://magento.local.com/media/hover-child-image.jpg",
            "color": "53",
            "size": "166"
         }
      ]
   }
}