LogoLogo
Contact API support
  • Build apps
  • Site Templates
  • REST API Reference
  • Storefronts (JS API)
  • Webhook automations
  • Discounts
  • Guides
  • Changelog
  • Ecwid API Changelog
  • June 2025
    • June 13
  • May 2025
    • May 16
  • April 2025
    • April 25
    • April 11
  • March 2025
    • March 28
    • March 25
    • March 20
    • March 17

Lightspeed® 2025

On this page

Was this helpful?

  1. March 2025
  2. March 28

Color swatches as product options in Ecwid API

Last updated 1 month ago

Was this helpful?

What's new

Product options will soon have "Color swatches" options. And now these are available with Ecwid API.

Changes in API

  • New value for the options[] -> type field: SWATCHES. It allows product option to work as a color swatch.

  • New field for option object in the options[]: useImageAsSwatchSelector. It only works with SWATCHES options.

  • New fields for the option[] -> choices object: hexCodes and imageId. They allow you to define storefront display options for the swatch: swatches can either be displayed as colored circles or open a specified product image when clicked. This behavior is controlled by the useImageAsSwatchSelector field. If it's true, swatches open specific product image when clicked. If false, then the swatches are represented as colored circles using provided hexCodes) instead of the radio buttons.

"Update product" request example

The following request updates product options to a single "Color" option with "Red" and "Dark Green" choices (red color costs $10 extra):

PUT /api/v3/STOREID/products/PRODUCTID HTTP/1.1
Host: app.ecwid.com
Content-Type: application/json
Authorization: Bearer secret_token
Content-Length: 644

{
    "options": [
        {
            "type": "SWATCHES",
            "name": "Color",
            "required": true,
            "useImageAsSwatchSelector": false,
            "choices": [
                {
                    "text": "Red",
                    "priceModifierType": "ABSOLUTE",
                    "priceModifier": 10,
                    "hexCodes": [
                        "#FFA500"
                    ]
                },
                {
                    "text": "Dark Green",
                    "hexCodes": [
                        "#06402B"
                    ]
                }
            ]
        }
    ]
}

Documentation links

Find swatches and related new fields in product .

options
Update product