Color swatch

Steps:

1. In the theme editor (Customize), click Theme settings

2. Locate Color swatch

3. Make necessary changes > Save

• Style - Square / Rectangle / Round

• Matching option names - Define option names to which the color swatch variant picker will be applied.

• Configuration - Each rule must be in its own line.

Configuration Format

Here's a breakdown of how to format color swatch configurations for each type:

Solid color

Pink:#E25563
Dark Stone:#516E8D
Light Stone:#A2B2BC

For HEX values, consider using an online color picker.

Two tone or Gradiant color

Charcoal Melange:linear-gradient(-45deg, #908C94 50%, #39363E 50%)
Chestnut Stripe:linear-gradient(-45deg, #3F3333 50%, #817876 50%)
Bleach: linear-gradient(90deg, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

Image

First, upload the desired swatch images to your Shopify store. To do that, navigate to Content > Files in your Shopify admin and click Upload files. We suggest 64x64 px .jpg Once uploaded, click on the image and copy name of image In the screen below, it is Syrah.jpg

Syrah:Syrah.jpg
Antique White:Antique.jpg
Blue:blue.jpg
Melange:Grey_Melange.jpg