Swatches

Display the colors, patterns and materials in which a product is available to customers.

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 colors as plain text, swatches provide a more intuitive and engaging way for customers to interact with the available choices. Showcase supports a variety of swatch methods: Shopify category metafield color swatches, HTML colors, variant images or custom images.

swatches-showcase-2.jpg

Show product images in swatches

swatches-showcase-1.jpg

HTML color

swatches-showcase-3.jpg

Uploaded image

How to setup swatches?

The Showcase theme supports a variety of different swatch methods. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Set Swatches to display to be Shopify, Theme or None.
     

Shopify swatches

Shopify native swatches work using a color category metafield. Color category metafields can be assigned when creating or editing a product. The Shopify color category metafield guide which explains how to set this up. 

Shopify swatches can appear in variant pickers and can also be shown in product cards and filters. (Shopify swatches are supported in Showcase theme versions after 10.0.0)

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be Shopify.
     

Theme swatches

The Showcase theme suite 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. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be Theme.
  3. Within the Swatch option name setting, enter the variant option title (e.g. Color).
  4. Set the Swatch method to be either Variant image or Color list.
     

Theme swatch variant image method

Variant image swatches can be displayed on the product page, featured product section and on product cards. Variant image swatches are not used in filters. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Swatch method setting, select Variant image.
  3. Set the Swatch product image shape and Swatch product image alignment.

Note

To ensure that images are displayed for your product variants, it is important to add an image to each product variant. The theme cannot anticipate which specific images you intend to display. Add an image to each variant in Shopify admin > Products.

Theme swatch color list method

Color list method swatches can be displayed on the product page, featured product section and on product cards. They can also be shown in filters on the collection page or search page.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Swatch method setting, select Color list.
  3. Within the Swatch option name setting, enter the variant option title.
  4. Within the Swatch color list setting, enter the color followed by : then followed by the hex code which should start with a #. (Example Red:#ff0000 Green:#008000 Blue:#0000ff). Each color should be on a separate line. 
  5. For multi-colored striped swatches, enter multiple values per line. (Example Red & Blue:#ff0000#0000ff). The colon separates the color name from the hex codes. 
    stripedswatches.png

Theme swatch color list method using images

If custom swatch images are required, these can be uploaded and used with the Color list method. It's possible to use a mixture of html hex codes and custom images.

Steps

  1. Create a PNG image file for each color. Maintaining consistent size and aspect ratio across all image files is recommended to prevent cropping.
  2. Open the Shopify admin and click on Content > Files. Select Upload files to upload your images.
  3. Open the Theme Editor, and click on Theme Settings > Swatches.
  4. Within the Swatch option name setting, enter the variant option title.
  5. Within the Swatch method setting, select Color list.
  6. Within the Swatch color list setting, enter the name of the followed by : followed by the file name. Each color should be on a separate line. (Example Red:red.png). 

Display swatches on product grid

Steps

  1. Open the Theme Editor, and click on Theme Settings and open the Swatches area.
  2. Enable Show swatches in product grid.
  3. Choose whether to Show single swatch in product grid. In circumstances where a product is only available in a single color, it may not be necessary to show a swatch under the product card. 

Display swatches in product filter

Shopify's visual filters are supported in the latest theme version using custom metafields and category metafields. Filters are managed in the Shopify Search and Discovery app. 

Theme swatches can be shown in product filters for the product option entered as the Option name in Theme Settings > Swatches. 

FAQs

Can I use Shopify visual metafield filters?

Versions of the Showcase theme after 7.1.7 support Shopify's visual filters which can be managed in the Shopify Search and Discovery app. Showcase theme versions between 7.1.0 and 7.1.6 require the grouped filter values to be managed manually (not automatically) in the Search and Discovery app.

How to setup theme swatches in Showcase versions prior to 10.0.0?

In version 10.0.0 of the Showcase theme, changes were made to swatches to support Shopify color category metafield swatches. 

Color swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings and open the Swatches area.
  2. Select Enable color swatches.
  3. Within the Option name setting, enter the variant option title (e.g. Color).
  4. Set the Swatch method to be HTML color. 
  5. Swatches will be shown when the variant color names match standard html color names. If the swatches are blank, it usually means that your variant colors are not standard html color names. (e.g. Red, Green) To solve this, follow the custom swatches guide to create and upload custom swatch image files.

Images as swatches

If you prefer using your own images instead of HTML colors or variant images, you can upload custom images that will be shown as swatches.

Steps

  1. Create a PNG image file for each color.  A file of approximately 40px by 40px is appropriate. Maintaining consistent size and aspect ratio across all swatch image files is recommended for best results. 
  2. Name each file to match the handle of the variant color title, replacing spaces with a dash (-) and keeping the file name lowercase. For example, if the variant is named "Fire Engine Red" name the file "fire-engine-red.png"
  3. Remove any special characters, use only the Latin/Roman alphabet and standard characters (a-z) only. For instance, "waldgrün.png" should be renamed to "waldgrun.png."
  4. Open the Shopify admin area and click on Content > Files.
  5. Select Upload files to upload your images.
  6. Open the Theme Editor, and click on Theme Settings > Swatches.
  7. Under Swatch method, select Uploaded image.

Variant images as swatches

In any location except the collection filters, it's possible to show the variant image as the swatch.

Steps

  1. Open the Theme Editor, and click on Theme Settings and open the Swatches area.
  2. Enable Show product images in swatches
  3. Choose Swatch product image shape and Swatch product image alignment.

Note

To ensure that images are displayed for your product variants, it is important to add Variant images. Without them, no images will be displayed. The theme cannot anticipate which specific images you intend to display.

 

Bring your business ideas to life with Shopify

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