Design configs for product swatches

What's new

Product swatches allow you to add color samples as product options. It is now possible to control the looks of swatches – shape, color, and visibility – with design configs.

Changes in API

New design configs allow managing product swatches looks on the storefront.

On product pages, you can control the shape and size of swatches:

• product_details_swatches_product_option_shape (CIRCLE, SQUARE, ROUNDED_SQUARE)

• product_details_swatches_product_option_size (SMALL, MEDIUM, LARGE)

On catalog pages, you can also enable swatches and choose a different shape:

• product_list_swatches_product_option_behavior (SHOW, HIDE)

• product_list_swatches_product_option_shape (CIRCLE, SQUARE, ROUNDED_SQUARE)

This setting can be enabled as a store config (through the PUT /profile call) or as a design config setting on the storefront by adding JS/HTML code to your website.

Documentation links

Design configs