Swatches

Learn how to setup your product swatches.

What are swatches?

Swatches are small, but very useful visual indicators that display the colors, patterns and materials in which a product is available to customers. Instead of displaying the options as plain text, swatches provide a more intuitive and engaging way for customers to interact with the available choices.

Theme swatches can be used in the variant picker, product cards and filters. They support colored swatches, custom swatch images or variant images. The Alchemy theme also supports Shopify's native swatches for use on the product page variant picker and product cards. Swatches can be shown as a circle or follow the button radius. 
Swatch-alchemy.png

How to set up swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be None, Shopify or Theme.
    Swatch picker.png
  3. Choose the Swatch shape to Always a circle or to Use button corner radius. (The button corner radius is set in Theme settings > Design.)

Shopify swatches

Shopify native swatches work using category metafields. When creating or editing a product it is possible to link a variant option to a color metafield. Shopify have a category metafield guide which explains how to set this up. Set Swatches to display to be Shopify to choose this swatch method. 

Theme swatches

The theme can show theme swatches using colors, image files or variant images. These swatches can appear in product cards, variant pickers and filters on the collection and search pages. Theme swatches are flexible allowing you to combine variant image swatches and colors. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be Theme.
  3. Within the Color option name setting, enter the variant option title (e.g. Color).
  4. Choose the Swatch style in variant picker to be Text, Swatches or Variant images.
    Alchemy-small-swatch.png
  5. Choose the Swatch style in product cards to be Text, Swatches, Variant images or None.
    Swatch-on-card.png
  6. Variant images will be pulled from the images linked to your variants. Add an image to each variant in Shopify admin > Products. If using colored Swatches, complete the Swatch colors box to tell the theme where to find the colors. 

Variant images

Variant image swatches can be displayed on the product page, quick buy, featured product section and on the product cards.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color).
  3. Choose Swatches to display to be Theme.
  4. Set the swatch styles to be Variant images

Note

When using the Variant images method, to ensure that images are displayed for your product variants, it is important to add an image to each product variant. Without them, no images will be displayed. The theme cannot anticipate which specific images you intend to display. Add an image to each variant in Shopify admin > Products.

Theme swatch colors

When using swatch colors, it is necessary to tell the theme what to show for each color by filling in the Swatch colors box. It's possible to use a mixture of hex codes and custom images. 

Theme swatches can be used in filters as well as being displayed on the product page, quick buy, featured product section and on product cards. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color).
  3. Choose Swatches to display to be Theme.
  4. Set the swatch styles to be Swatches
  5. Within the Swatch colors setting, enter the color followed by : (a colon) followed by either a hex color code or an image file name. Each color should be on a separate line. 
  6. For plain swatches - Enter the hex color code which should start with a # (Example Red:#ff0000 Green:#008000 Blue:#0000ff).
  7. For striped swatches - Enter multiple color codes per line. (Example Red & White:#ff0000#fff). 
  8. For custom image file swatches - Enter the color then the name of the file (Example Blue:blue.png) The image files should be uploaded in the Shopify admin in Content > Files.Swatch-alchemy-color-list.png

Swatch-setup-alchemy.png

How to display swatches in filters

The collection and search filters can display swatches using the theme Swatch colors or using Shopify's visual filters using custom metafields and category metafield filters.

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Set Swatches to display to be Theme.
    Swatch picker.png
  3. Enter the relevant colors and hex codes or image file names into the Swatch colors box. (The variant image method cannot be used in filters but can be used on the product page or in the product cards.)
    Alchemy-filters2.png

FAQs

Can I use Shopify visual filters?

Yes. Versions of the Alchemy theme after 5.0.0 support Shopify's visual filters. 

Will theme swatches still work when the store language is changed?

Yes. Under swatch settings, you will want to add the translations of your variant title in other languages.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. In the Swatch option name settings, add translations, separating each word with a comma and no spaces in between.
    swatch-option-name.png
  3. Check your translation app. Please note, Shopify's built-in translation app lacks an auto-translation feature, it is crucial to consistently confirm and auto-translate whenever modifications are made otherwise the swatches won't display.

How to set up swatches in versions before 5.0.0

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Select Enable Swatches
  3. Within the Option name setting, enter the variant option title 
  4. Swatches will be shown automatically if color names match the standard html color names.  If not then it's possible to add custom swatches. 
  5. To enable custom swatches select Use uploaded images instead of HTML colors.
  6. Create a PNG image file for each color.  A file of approximately 40px by 40px is appropriate. Name each file to match the handle of the variant color title, replacing spaces with a dash (-), keeping the file name lowercase and removing any special characters. For example, if the variant is named "Fire Engine Red" name the file "fire-engine-red.png". 
  7. Open the Shopify admin and click on Content > Files.
  8. Select Upload files to upload your images.
Sign up for Shopify today for $1

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us