🎉   New theme alert!   Check out   ETHERYX →

Appearance

Swatches ​

Swatches provide a visual representation of product variants, making it easier for customers to choose options like color or pattern.

WARNING

Setting up this feature is not supported by our complimentary support.

IMPORTANT

Requirements for swatches:

  • You need the latest version of Etheryx.
  • Ensure you have category metafields connected to your product variants.

Swatch display options: ​

Variant options can be displayed in two ways:

  1. Dropdown
  2. Swatch

If you choose to display variant options as swatches, you can further customize their appearance:

Display OptionDescription
CircleSwatches are displayed as circular icons.
SwatchSwatches are displayed in a square format.
NoneThe option value is displayed as plain text.

IMPORTANT

  • Swatches are only available on the product page.

  • Swatches require a variant to be connected to a color category metafield with related color entries.

Set up swatches ​

Step ① - Assign a category with a color metafield ​

  1. From your Shopify admin, go to Products.
  2. Select a product.
  3. In the Category section, choose a category with a color category metafield, such as:
    • Apparel & Accessories > Clothing > Clothing Tops > Shirts
  4. Click Save

Step ② - Edit or add category metafields ​

  1. From your Shopify admin, go to Products.

  2. Select the product with the category metafield you want to edit.

  3. To add an entry from default options:

    1. In the Category metafields section, click the category metafield.
    2. Select and edit the entry as needed.
    3. Click Save

  4. To add a custom entry:

    1. In the Category metafields section, click the category metafield.
    2. Click Add new entry
    3. Complete the fields for the new entry.
    4. Click Save

Step ③ - Connect category metafields to variants ​

  1. From your Shopify admin, go to Products.

  2. Select the product you want to edit.

  3. In the Variants section, click (+) to Add options like size or color.

  4. If a category metafield is available, select it.

    • The option values will automatically populate with any entries linked to the metafield.
    • Optional: To add custom option values:
      • Click Edit, then Add new entry
      • Fill out the entry fields, then click Save

  5. Click Save

WARNING

Swatches can only be used with a variant connected to color category metafield and related color entries.

Customize swatches ​

  1. From your Shopify admin, go to Online Store → Themes

  2. Click Customize

  3. Navigate to the product with color options.

    • Optional Click the Variant picker block to customize the swatch appearance.

  4. Click Save to apply your changes.

External links