Lumin Theme Documentation
LuminThemesAll ThemesContact
  • Lumin Theme theme settings
  • Faq
    • How to change any text in Luminthme
    • How to update your Shopify theme without losing customization
    • How to setup Product Cards Scrolling Tags & Custom Badges
    • How to add Custom fonts
  • Header
    • Set up drop-down or mega menu menus in your online store
  • Lumintheme exclusive
    • Custom color and Image swatches
  • Cart Drawer
    • Enable free shipping bar and change target price
  • Product Page
    • Quantity Breaks Discount
    • Auto generate tabs with the product's content
    • Products Siblings
      • How to setup siblings
      • Step 2 - Collection for siblings
      • Add Siblings Picker block
  • Available page types
  • Sections available in Lumin Themes
  • Color schemes
  • Templates
  • Setting Up and Customizing the Announcement Bar
  • Quantity Breaks Discount on Lumin Theme
  • Adding a Size Chart to Lumin Theme
  • Cart Progress Bar on Lumin Themes
  • Sticky Add To Cart
  • Fancy Text Settings
  • Cart Drawer Settings
  • Lumin Slider
Powered by GitBook
On this page
  • Custom color swatches
  • Customize the trigger words
  • Variant Image swatches
  • Colors
  • Customizing
  • Disabling swatches
  1. Lumintheme exclusive

Custom color and Image swatches

Theme will detect your variant label and automatically display swatches

PreviousLumintheme exclusiveNextCart Drawer

Last updated 8 months ago

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.

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.

Customizing

Add custom images to the shopify dashboard > contents > files

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

Add custom color names and values

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

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%

Disabling swatches

Disabling swatches on product page

Swatches can be toggled by removing the “Swatch option name” in Product Information > Variant Picker

Disabling swatches on Collections and Product cards

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

Now, Lumin themes has built-in support for color swatches, based on color names, which use the . 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.

Here is a full list of color names that will automatically be converted to swatches:

If your products have color names other than the listed colors in the, you can add your own color names and values or upload images to the shopify dashboard > contents > files

You can also add to the shopify dashboard > files or by clicking instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png

To find additional HEX color codes, visit:

web supported color names
color names list
color names list
image files
here
https://colorhunt.co
lumintheme