Borders > Color swatches
Our theme has built in support for displaying color swatches for various options in product pages / collection filters.
In order to make this feature work you have to first set up the option name that you want to be picked up for the swatches. By default, we've added a few of the most popular ones in several languages, but if you don't see the swatches, you need to add your own to the option names list.
Make sure that you write this in lowercase!
The theme has built-in support for color swatches based on color names, which use the web supported color names.
However, there may be instances where a store would require more specific swatches with complex colors or patterns. In this scenario, you can upload images for your swatches, as the theme has the proper logic to detect custom images for custom swatches.
For any color swatch that you want to add, you just have to upload a 100x100px png file in your store's files section, with the name exactly the same as your product's variant handle.
For example, let's say that your product has a variant called "Dark Grey". You will want to create an image file name "dark-grey.png" and upload it into the Settings > Files section of your Shopify admin. That's it!
Please wait a few minutes after uploading the image, because the results are cached so it may take some time until it propagates live.
This feature works in the collection pages as well, if you are filtering products by variants:
Please note that this is something different than Shopify's Visual Filters feature. That is a completely different feature which our theme still supports, but it's not using product variants, so it's not something that can be used inside product pages, but something used only for visual filtering. You can use both.