Visual indicators that display colors, patterns, and materials in which a product is available.
What are swatches?
Swatches are small, but very useful, visual indicators that display the colors, patterns, and materials in which a product is available to customers.
Swatches help your customers make quicker choices which, in turn, leads to faster conversions. They also allow the customer to make comparisons between various product options at a glance.
Best of all, with the enhanced swatches functionality in our themes, you save money by not investing in apps to access this great functionality!
HTML color
Uploaded image
How to set up swatches
Tip
- Open the Theme Editor, and click on Theme Settings > Products (Scroll down towards the bottom).
- Select Enable swatches
- Within the Option name setting, enter the variant option title (circled below).
Note
If the swatches are blank, it usually means that your variant colors are not standard HTML color names (e.g. Red, Green) To solve this you can follow our custom swatches guide below to create and upload your own custom swatch image files.
How to set up custom swatches
If you prefer using your own images, you can upload custom images that will be shown as swatches.
Steps
- Open the Theme Editor, and click on Theme Settings > Products (Scroll down towards the bottom).
- Select Use uploaded images instead of HTML colors.
- Create a PNG or JPG image file for each color. A file of approximately 40px by 40px is appropriate. Maintaining a consistent size and aspect ratio across the image files is recommended.
- Name each file to match the handle of the variant color title, replacing spaces with a dash (-) and keeping the file name lowercase. For example, if the variant is named "Fire Engine Red" name the file "fire-engine-red.png"
- Remove any special characters, use only the Latin/Roman alphabet and standard characters (a-z) only. For instance, "waldgrün.png" should be renamed to "waldgrun.png."
- Open the Shopify admin area and click on Content > Files.
- Select Upload files to upload your images.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us
