Swatches

Color swatches are tiny, clickable buttons on your products. Each swatch links to one of your color variants.

Here's how Lorenza's color swatches feature works:

  1. It looks for all products with a special variant option for swatches.

  2. It tries to match the defined color (like Heather Gray) with an existing swatch image in your Files admin area (called heather-gray.png).

  3. It displays the swatch images as color swatch buttons.

This article goes deeper into what all of that means, and how you can add any swatch that you want.

Or, you can watch a video on how to set them up:

Set up variant option names

Setting color swatches up requires some setup and planning. Follow the steps here for success:

STEPS
  1. Before anything else, you need to choose which variant option name should be associated with swatches. If you don't change the name now, the default name will be used. The default name is Color.

    We recommend using a keyword that describes the swatches. For example, if all of your color swatches are colors, use Color. If all your color swatches are materials, use Material or Texture.

  2. From your store's Customize page, go to your Theme settings and select the Product swatches menu, or the Product menu.

Variant option for swatches

Name the variant option to display the swatches. For example: "Color"

Create swatch thumbnails

Add color variants to your products

Enable the "Show color swatches" setting

Now that you've set up your products to use color swatches, the last step is to enable the color swatches feature in Lorenza's theme settings.

The following instructions are for the product page, but also apply to the featured product homepage section and the Collection page.

STEPS
  1. From your Customize theme editor, choose Product pages from the pages drop-down menu at the top of the screen.

  2. Choose the Products section of the settings.

  3. Locate the Show swatches checkbox and check it.

  4. Use the Save button in the top-right corner when you are finished editing.

  • Product pages

  • Featured product

  • Collection pages