Types of Swatch Configuration

There are 2 Types of configuration available for both Product and Collection Pages:

• Variant Image - Allows to display variant images of the product variants on swatches.

• Custom Color/Image - Allows you to configure the custom color or image that you want to display on variant swatches.

• Select the Variant Image option to display the default Variant image on swatches.

• Select Color/Custom Image to display custom color/image on swatches.

1. Variant Image

If you have assigned images to variants in the product section, you can choose the Type - "Variant Image" to display the variant image in a swatch style.

Note: If the image is not assigned to any variant, the app displays the first image of the product image gallery on all variants.

You can choose to display from the "First Image", "Second Image" or "Last Image" to display on the variant swatches.

2. Custom Color or Image

• Choose a swatch style - either Circular or Square. Then, under Type, select Color/Custom Image.

• Click on Upload Swatch → Search for the color name, and customize it as needed.

You can add the following for your sub-options

• Custom Color (HEX Code): Enter a valid HEX color code.

• Image: Upload an image from your system (maximum file size: 1 MB).

• Image URL: Provide a direct URL to an image.

The configuration will be applied based on the priority.

• Color (Lowest priority) — Applied when the option is enabled and a HEX color code is provided.

• Image (Medium priority) — Applied when the option is enabled and an image is uploaded.

• Image URL (Highest priority) — Applied when the option is enabled and a valid image URL is added.

If multiple options are configured, the system will always apply the one with the highest priority.

• Click Save to apply the custom colors to the swatches.

If you need any assistance with the configurations, feel free to reach out to [email protected]