Color swatches

Why this could be useful

In some cases, there is a possibility that a given color will not be included in the standard CSS Shopify palette, which will result in a white (blank) swatch appearing. Therefore, if you use non-standard color names, Shopify may not display the swatch on the page, and additional adjustments are required.

Step 1: Ensure that the swatches are enabled.

Go to the Theme editor → Theme settings → Product. Scroll to the Swatches and click on Enable.

Step 2: Add the files of the swatches

Prepare the color swatch file. You can use the following source: https://mdigi.tools/solid-color-image-generator/, or any other tool you prefer the most.

Step 3: Rename the file and upload it to your files in the Admin panel

Once the file is created, give it a specific name. Its name must match the following pattern: swatch-color-name, specifically the "swatch-" prefix and the color name.

If the color name contains more than one word, each word should be separated with a hyphen " - ". For example, if the color name is Banana yellow, then the file should be named as swatch-banana-yellow.

We recommend using an image with dimensions of 50x50 pixels in PNG format.

Once the file is ready, navigate to the Admin panel -> Content -> Files and upload it. Once the files are uploaded to your admin, they will be displayed as swatches on the page. No additional actions are required.