💡How to set up the swatches
Please follow the below steps to set up the swatches on product page and filters. Also note that color swatches are not available in the product grids of collection pages.
Last updated
Please follow the below steps to set up the swatches on product page and filters. Also note that color swatches are not available in the product grids of collection pages.
Last updated
Upon logging in, navigate to your Shopify dashboard and pick the Online Store > Themes tab.
When you click the Action button, a tiny drop-down box will appear. Press Edit code.
You are now on the page for the template editor. Go to the Assets folder → Add a new asset.
Repeat the above steps to upload the images for your color swatch.
Rules to follow for image upload for color swatch:
Size: You must upload an image with a size of roughly 20 × 20 pixels.
Extension: There must be a “.png extension.”
Naming conventions: The image's name must reflect the color option and be all lowercase with no spaces.
Here is a collection of examples:
If your color is "Light Blue," upload the image with the filename light-blue.png.
If your color is "Blue/Gray," upload the image with the filename blue-gray.png.
If your color is "Blue," upload the image with the filename blue.png.
Note: In case the theme is updated to the new version, all the existing swatch images uploaded will need to be uploaded again following the above procedure.
To solve this, please make sure that the product option name is added in the theme editor. To know how to do that, follow the below procedure:
The problem is:
Go to the theme settings> Product> Color options name and add the option's label name, as shown below:
Adding the label name will connect the colors with that specific option name and the color swatches with start showing, as shown above. so the problem is solved.
