Custom color and Image swatches
Theme will detect your variant label and automatically display swatches
Last updated
Theme will detect your variant label and automatically display swatches
Last updated
Lumin themes will display swatches for color variants in collection filtering and the product form on product pages.
Theme will detect if your variant label is Color and automatically display swatches
To customize the trigger words which activate swatches, in theme editor go to Product information > variant picker > swatch option name and add or modify the values:
If you have a multilingual store, please enter multiple options separated with commas. Example: Color,Colour,Fabre,Couleur
The result is the same and you can use different custom swatches as well.
First, you need to define what color swatches labels are you using.. The defaults are some popular ones, such as color or colour, but you can use this feature for custom labels as well. For example, if you have a variant called Lipstick color, you can write lipstick color as an option in the color swatches label, and the theme will pick it up and transform the values in color swatches.
Now, Lumin themes 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 90x90px 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 Content > Files section of your Shopify admin. That's it!
Lumin themes can easily detect variant image and display them as swatches. Simply click the swatch type to Variant image
Lumin themes can easily detect simple color names and convert them to swatches. There are a total of 140 color names Lumin Themes can detect, all other more complex names will be represented by a default white color swatch.
Here is a full list of color names that will automatically be converted to swatches: color names list
If your products have color names other than the listed colors in the color names list, you can add your own color names and values or upload images to the shopify dashboard > contents > files
You can also add image files to the shopify dashboard > files or by clicking here instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png
Note: Only PNG image file are supported.
How to:
Create a small square image (60x60 or 100x100 for best results)
Upload to the shopify dashboard > contents > files
Open theme settings by clicking "Customize" button on the theme list
Click on the "global settings" from the left icons
Click on the “Color/Image swatches”
These setting will effect whole website. You can also configure option and size of swatches differently in product page.
Add HEX color codes. One rule per line. Example: Blue:#005eff
To find additional HEX color codes, visit: https://colorhunt.co
You have the option to add 2 or 3 colors for a single swatch.
Example: Red&Blue: #c9002c#005eff.
You can use gradient as well like: Pink:#d9596b 11%, #ff9eab 100%
Swatches can be toggled by removing the “Swatch option name” in Product Information > Variant Picker
Click on the "global settings" from the left icons
Click on the “Color/Image swatches”
Swatches can be toggled by removing the “Swatch option name” in Theme settings > Color/Image swatches
