How to setup color swatches?

Whenever you Enable color swatches, Concept theme give you two options for displaying Color swatches: Custom image and Variant image.

Please review the table below to comprehend this article more easily.

Color swatch displaying
Disable color swatches Custom images Variant images

On this page

  1. Where is this feature?
  2. How does it work?
  3. Naming your swatches files
  4. Where is the 'Files' option in the Shopify admin?

1. Where is this feature?

In order to adjust the Color schemes option for your page, you set up as follows:

  • On your Product page via the Theme editor, select the Variant picker block under the Product information section.

  • In Color swatch > Swatch type, there would be two options: Variant images and Custom images.

2. How does it work?

To get started, enabled the color swatch settings and then choose between Color swatch or Variant image to display.

2.1 Color swatch

Configure your color swatch by setting up the Configuration box. Please refer to the following rules for information on how this feature will work:

  1. Once you have enabled this feature, Concept will look for color values in your Theme settings> Color swatch > Configuration box that match the names of your product color variants.

  2. If the color value is found, the color swatch will be displayed using that value.

      • Example 1 - using HEX code: The Configuration box contains the following value: Black:#3a3a3a

        Then the color swatch for Black will be displayed using the color #3a3a3a instead of the default black color #000000.

      • Example 2 - using an uploaded file: The Configuration box contains the following value: Crimson Shadow:crimson-shadow.webp

        Then the color swatch for Crimson shadow will be displayed using the image named crimson-shadow.webp, which is uploaded in Shopify Admin dashboard/ Content/ File.

  3. If the color value is not found in the Configuration box, look for a *.png file with the same name as the color variant.

    For example: In this case, this feature will use a *.png file named crimson-shadow.png for the color swatch.

  4. If the *.png file is not found, display the color swatch by using the CSS color name for the color variant.

    For example: If the value for the color variant "Black" is not found, the color swatch will display the default black color, #000000.

  5. If the color does not have a value in the configuration box, a PNG file, or a HEX code, the color swatch will be blank.

    For example: The Chestnut color have no value, png file or HEX code, so the color swatch will be blank.

     

2.2 Variant image

Once you have enabled the color swatch settings, Concept will look for any variant category with the name "Color" or "Colour".

To change the word to something other than "Color/Colour" (such as: Couleur in French) you can do so in your languages area Theme menu > Edit default theme content.

Types color_swatch_trigger in the search bar to find the [Color swatch trigger] settings.

The theme will then look at the variant names you've used, in this case:

  • Gold Tone
  • Black
  • Chestnut
  • Navy
  • Crimson Shadow
    •

    and look for either an HTML color name with the exact same name OR a chosen image in Products > Variants > Update variant image.

    Gold Tone
    Black
    Chestnut
    Navy
    Crimson Shadow

    3. Naming your swatch files

    • For example, Black, Chestnut or Navy swatches would need to be named black.png, chestnut.png or navy.png (capitals become lowercase.)
    • Gold Tone and Crimson Shadow swatches would need to be name golde-tone.png and crimson-shadow.png (capitals become lowercase, spaces and other special characters become hyphens.)

    4. Where is the 'Files" option in the Shopify admin?

      • First, open up the Shopify admin.
      • Go to Content, then select the Files option and open it. Click Upload files to begin uploading your .png swatch files.
    Back to Concept Support