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:
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.
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
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 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
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 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.