Learn how to setup your product swatches.
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.
Instead of displaying the options as plain text, swatches provide a more intuitive and engaging way for customers to interact with the available choices. You can either use color hex codes or upload your own custom swatch images to display on your product variants.
How to set up swatches
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Select Enable Swatches
- Within the Option name setting, enter the variant option title (circled below).
Note
If you are getting blank swatches, it usually means that your variant colors do not follow standard html naming conventions such as Red, Green and Blue. To solve this, follow our custom swatches guide below to create and upload your own custom swatches.
How to set up custom swatches
If you prefer using your own images instead of hex codes or variant images, you can upload custom images that will be shown as swatches.
Steps
- To enable custom swatches from the Theme Editor, go to Theme settings, open the Swatches area and select Use uploaded images instead of HTML colors.
- Create a PNG image file for each color. A file of approximately 40px by 40px is appropriate. Maintaining consistent size and aspect ratio across all swatch image files is recommended for best results.
- 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 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
