Color swatches

Changing existing color to a different shade:

1. Color swatches are located in the Theme Settings (1).
2. Then, click on Color swatches (2).
3. Add a custom color code.

For example, if I wanted a darker shade for my red color (see the example above), I would add something like this in the Configuration block:

red: #8B0000

Click Enter or Return to jump to the next line in Configuration block.

4. Save (3) to view changes.

Adding a custom color using an image

Scenario: I have a dress in a unique color scheme, such as black and red.

1. First, I need to add the color to the Product page.

Navigate to Products, select the product you want to add the color to and add a color in the Variants space (see the screenshot below).

In this example, we added "red/black".

2. Then, you need to upload the picture that represents this color to the Files.

Go to Content (1), then click Files (2) and upload the image (3). The uploaded image will appear at the top (4).

2. Copy the name of the file and add the file type (png, jpeg, jpg). In this case, the full name would be:

Black__Red-Flag.png

2. Go to Online Store > Themes > Customize.
3. Color swatches are located in the Theme Settings (1).
4. Then, click on Color swatches (2).
5. To link the image with the color, write the color name from step 1 and place ":" after it. Than, copy the exact image name from step 2.

In this case, it would be:

red/black: Black__Red-Flag.png

Hit Enter to jump on the next line.

6. Save (3) to view changes.