Skip to content

Using color swatches with your products

Compatibility

  • Beyond versions 1.0.0 and up
  • Blockshop versions 6.4.0 and up
  • Maker versions 5.4.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.

For the following versions:

Versions with swatch settings inside Theme settings > color

  • Beyond - versions 3.0.0 and up
  • Blockshop - versions 9.0.0 and up
  • Maker - versions 8.0.0 and up
  • Emerge - versions 6.0.0 and up

Swatch color settings can be found inside the Color submenu inside the global theme settings.

If you want to assign the color value deep red to the color value rgb(131, 45, 39), you'd add the following line to the Color swatch configuration textbox:

deep red: rgb(131, 45, 39)

Formatting is very important!

  • each rule must be on a new line
  • the name and value are separated by a single colon (":") character
  • the value can be defined as either a hex or RGB value
  • 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

For older versions, you can add swatch settings in the following way:

  • 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 different for older versions

  • 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

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

For the following versions:

Versions with swatch settings inside Theme settings > color

  • Beyond - versions 3.0.0 and up
  • Blockshop - versions 9.0.0 and up
  • Maker - versions 8.0.0 and up
  • Emerge - versions 6.0.0 and up

You'll need to update the swatch settings inside the Color submenu of the global theme settings to take advantage of the file you just uploaded.

If you want to assign the color value stripes to the uploaded file stripes.png, you'd add the following line to the Color swatch configuration textbox:

stripes: stripes.png

Formatting is very important!

  • each rule must be on a new line
  • the name and value are separated by a single colon (":") character
  • the value can be defined as either a hex or RGB value
  • colors that don't follow the above format will revert to their default values

For older versions of the theme, you'll need to navigate to your theme's snippets/swatch-colors.liquid or snippets/framework--swatch-colors.liquid file to use 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 different for older versions

  • 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

Swatch settings will be migrated automatically for the following versions:

Versions that support automatic updates

  • Beyond - versions 3.0.0 and up
  • Blockshop - versions 9.0.0 and up
  • Maker - versions 8.0.0 and up
  • Emerge - versions 6.0.0 and up

Otherwise, 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.