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, can lead 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!
In the Expression theme swatches can be shown in the product grid, in collection filters and in the variant pickers.
HTML Swatch colors shown in a Listed style variant picker
Custom swatch colors shown in a Dropdown style variant picker
How to set up html color swatches
Swatches can be shown automatically when the variant color names match standard html color names.
Tip
- Open the Theme Editor, and click on Theme Settings > Products.
- Select Enable swatches.
- Within the Option name setting, enter the variant option title (e.g. 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.
How to set up custom swatches
Custom images can be uploaded and used as swatches. This is the best solution to handle complex color names and patterns.
Steps
- Open the Theme Editor, and click on Theme Settings > Products.
- Select Enable swatches.
- Within the Option name setting, enter the variant option title. (e.g. Color)
- 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 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.
FAQs
Can I use Shopify visual metafield filters?
Versions of the Expression theme after 8.2.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