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 use HTML colors, variant images or upload your own custom swatch images.
Show product images in swatches
HTML color
Uploaded image
How to set up swatches
Color swatches
Steps
- Open the Theme Editor, and click on Theme Settings and open the Swatches area.
- Select Enable color swatches.
- Within the Option name setting, enter the variant option title (e.g. Color).
- Set the Swatch method to be HTML color.
- Swatches will be shown when the variant color names match standard html color names. 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, follow the custom swatches guide to create and upload custom swatch image files.
Images as swatches
If you prefer using your own images instead of HTML colors or variant images, you can upload custom images that will be shown as swatches.
Steps
- 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 area and click on Content > Files.
- Select Upload files to upload your images.
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Under Swatch method, select Uploaded image.
Variant images as swatches
In any location except the collection filters, it's possible to show the variant image as the swatch.
Steps
- Open the Theme Editor, and click on Theme Settings and open the Swatches area.
- Enable Show product images in swatches
- Choose Swatch product image shape and Swatch product image alignment.
Note
Display swatches on product grid
Steps
- Open the Theme Editor, and click on Theme Settings and open the Swatches area.
- Enable Show swatches in product grid.
Display swatches in product filter
Theme swatches can be shown in product filters for the product option entered as the Option name in Theme Settings > Swatches.
Shopify's visual filters are supported in the latest theme version using custom metafields and category metafields. Category metafields swatches are only supported in filters when the grouped filter values are managed manually in the Search and Discovery app. Automatic grouping for category metafield swatches is not supported (Version 7.1.0).
FAQs
Why are my custom images not showing as swatches?
If the custom image is not displayed, it may mean a step was missed in the instructions above. Or you may have a 3rd party app installed that affects the product page. Disable any such apps to confirm and if you identify the offending app, you can contact the app's support team for assistance.
Can I use Shopify visual metafield filters?
Versions of the Showcase theme after 7.1.0 support Shopify's visual filters using custom metafields and category metafields (when the grouped filter values are managed manually in the Search and Discovery app).
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