Color Swatches

Let customers pick products in different colors. This includes product variants and sibling products.

Standard Swatches

Standard swatches are used for variants of the same product, and can be powered by images or hex codes. To configure them:

1. Navigate to your product page and ensure Product > Variant Selector > Use Color Selector is checked.

2. Add the swatch hex code or image URL to assets/swatches.json

Sibling Products

Sibling products are used to display color swatches for multiple different products as if they are variants of the same product.

Clicking through the swatches will navigate the user to a different product page, but there is no load time so the experience is as smooth as switching between variants.

The steps outlined in the below walkthrough are:

1. Create the relevant metafields

2. Populate the metafields

3. Add the Sibling Products section and block to your product detail page

4. Test the settings and determine what's best for your store