Skip to content

Using color swatches with your products

Compatibility

Custom product label functionality is available the following themes:

  • Beyond versions 1.0.0 and up
  • Blockshop versions 6.4.0 and up, product grid 7.0.0 and up
  • Maker versions 5.4.0 and up, product grid 6.0.0 and up
  • Emerge versions 3.4.0 and up

Color swatches can be enabled in multiple places:

  • In the Product Page(s) under the Sections tab
  • On the Home Page, inside the Featured Product section under the Sections tab
  • In the Theme Settings tab, under the Product Grid section

In all cases, checking "Enable color swatches" will turn on the feature.

When enabled, the theme will automatically turn an option titled "color" into clickable color swatches:

Color option

The default colors are set as standard CSS colors. For example, "gold" is defined as #ffd700. The complete list of standard CSS colors can be viewed on MDN.

Non-English themes

  • "Color" will be translated according to your locales/*.json file. For example, if you desire "couleur" to be the option with swatches, be sure to translate any instance of "color" inside locales/fr.json to "couleur"
  • Non-english colors such as "rouge" will need to be added manually as defined below in Adding custom colors

Adding custom colors

Default colors can be overwritten with values defined by the store-owner. In addition, values not defined as a CSS color can be added:

  • open snippets/swatch-colors.liquid or snippets/framework--swatch-colors.liquid
  • find the following lines:
{% capture swatch_colors %}
  {% comment %} remove this line and add your first color here {% endcomment %}
{% endcapture %}
  • replace the line containing {% comment %} with your custom colors, for example:
{% capture swatch_colors %}
  gold #D4AF37
  navyblue rgb(0, 0, 128)
{% endcapture %}

Formatting is very important!

  • color names are always lowercase, and multi-word colors contain no separators (including spaces)
  • the name and value are separated by a single space character
  • the value can be defined as either a hex or RGB value
  • each new color begins on a new line
  • colors that don't follow the above format will revert to their default values
  • use a tool like Adobe Color if you need help determining which color value is appropriate for your product

Adding custom images

Store-owners have the ability of uploading an image to be used as a swatch, such as a product's material or pattern.

Swatch images always override custom or default swatch colors

We recommend images with a resolution of 100x100 pixels and a .png extension (although .jpg and .gif will work as well).

To add an image file:

  • from your Shopify admin page, click "Settings" in the lower left-hand corner
  • click "Files" in the lower-middle column
  • click "Upload Files" in the top-right corner
  • select your swatch file

Next, you'll need to update your theme's snippets/swatch-colors.liquid or snippets/framework--swatch-colors.liquid file to take advantage of the file you just uploaded.

  • find the following lines inside snippets/swatch-colors.liquid or framework--swatch-colors.liquid:
{% capture swatch_color_list %}
  {% comment %} remove this line and add your first color here {% endcomment %}
{% endcapture %}
  • replace the line containing {% comment %} with the color and matching file name, for example:
{% capture swatch_color_list %}
  gold gold_swatch.png
  desertcamo Desert-Camo.jpeg
{% endcapture %}

Formatting is very important!

  • color names are always lowercase, and multi-word colors contain no separators (including spaces)
  • the color name and file name are separated by a single space character
  • file names should match the file uploaded in previous steps (including file extension)
  • each new color begins on a new line
  • colors that don't follow the above format will revert to their default values

Considerations for theme updates

Custom color and image definitions will need to be copied over from the existing theme's snippets/swatch-colors.liquid or snippets/framework--swatch-colors.liquid file into the new theme's file of the same name.

You do not have to re-upload image files.