Enabling Color Swatches

Enabling Color Swatches

Color Swatches are available in all versions of our themes


Enabling Color Swatches

To enable color swatches, you will need to go to Online Store > Themes > Customize > Theme settings > Product grid, and select "color swatches" 



Enabling the color swatches will also change any other options from drop downs to buttons. 
 

Standard Colors

Your color swatch will take on a HTML color that matches the assigned name. If you wish to have greater control over the color displayed, please enter your variant color exactly how it appears on this list of Color Names.

Custom Colors

You can also upload a small image file of your color to show the exact swatch. We suggest using a small 50x50 .png image file as your swatch.

The name of the file much match the color name entered for the product but spaces need to be replace with hyphens. For example, Arctic White would become arctic-white.png

Naming Conventions

Your color variant will look for a matching asset (custom swatch) with the same filename. If your listed color has a space or slash in the name, they will need to be replaced with hyphens. For example, If your color variant is Be Happy Blue, the theme will look for a file called be-happy-blue.png in your assets folder. If your color is "Black/Tan", then the theme will look for a file named black-tan.png in your assets folder. 

In situations where your color is more straightforward and a single word, the name your image can follow the same naming convention. If the variant color is "Teal" then your image file will be teal.png. 

To add assets to your theme, go to Online Store > Themes > Actions > Edit Code, then click on Assets to add your new files.

Uploading files via the file manager as you would for slideshow images, etc. will not work for your swatches. They MUST be uploaded as assets directly within the theme. 


Troubleshooting Swatches

If your swatches aren't appearing, here's a quick troubleshooting list:  

  • Double check your image files have a .png extension and the names are in all lowercase letters
  • Make sure your image files are in your theme's assets and not in the file manager (Settings > Files)
  • Confirm that all spaces and special characters have been replaced with hyphens
  • Your image files should be square and at least 50x50 pixels

    • Related Articles

    • Enabling Filter Tags

      ADDING MULTI-TAG FILTERING IN THE SIDEBAR 1.) Navigate into your products menu and begin to add tags you wish to use for the filters. Be sure to add tags to all merchandise you would like to be filtered even if they belong to a collection. As a ...

    • Enabling Recently Viewed Products

      Recently Viewed Products can be displayed on the homepage, collection page, and product pages. The layout and number of products (per row and total) can all be adjusted Homepage Enabling Recently Viewed Products on your home page can be done by going ...

    • Collection Page Sidebar on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the most updated version of eComm Performance.    Using the Collection Page Sidebar eComm Performance's Collection pages has the ability to display a 'sidebar' on the collection page. ...

    • Product Page Template in the eCommerce Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Product Page Template  The eComm Performance theme includes a default 'Product' template, which is assigned when you start adding products to ...

    • Using the Video Section in eComm Performance

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. How to Use the Video Section The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance ...