Custom color and Image swatches

Theme will detect your variant label and automatically display swatches

Custom color swatches

Lumin themes will display swatches for color variants in collection filtering and the product form on product pages.

Customize the trigger words

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

Colors

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

Customizing

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

Add custom 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