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:
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" insidelocales/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
orsnippets/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
orframework--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.