Swatches

A Swatch is an alternative option to a "Drop Down" on your product page.

In the below example, "Color" is using Swatches, "Size" is using a Drop Down.

🚧

Swatches are used for Configurable Products & Variations Only

Enable Swatches

In Zoey Web > Settings > Product Settings Swatches: set Enabled to YES

Then specify which Attributes you would like to use Swatches by selecting them from the list in the "Product Attributes to Show as Swatches in Product Detail" setting. (see below)

You can also show Swatches on your Category Page below the Product Image by selecting an option from the "Product Attribute to Use for Swatches in Product Listing" setting.

Upload Swatches

Once Swatches is enabled, you will now need to upload swatches for your Attributes.

Navigate to Products > Attributes and select an attribute that you specified to use Swatches.

From the "Options" section of the Attribute Edit Screen, you can upload your swatches.

Click on the Upload Icon. This will give you two options for uploading a Swatch.

Upload Image

You can upload any image type (jpeg, png, gif). We recommend keeping your swatch size small (50px x 50px)

Generate Color

Alternatively you can use our color picker to select an appropriate color for the swatch.

Once you have uploaded your swatches, Save the attribute, then click Advanced>Store Refresh and see your swatches in action!

Swatch Dimensions

In Products > Settings we give you the ability to control the size of your Swatches (in Pixels) for how they show up on your Product Page, Category List and in your Category Filters.

Image Switching When Selecting A Swatch

If you have Swatches enabled, whenever a customer selects a swatch or a Variation option from the product page dropdown, your store will show the image assigned to the Variation Product in your Configurable Product's Variation section.