Swatch

This is a quick overview of the Swatch option.

Step 1: Please create an option set (follow this guide for more details)

Step 2: Choose option type: Swatch and set the General Information

In the Option values, you can choose color swatch or upload a picture for each value.

Note: The image must be in JPG, JPEG, SVG, PNG or GIF format. The maximum size is 5MB.

If you tick on the Select quantity box, you will allow your customers to enter the quantity value which must be in the setup range.

See details of this feature in How to set up Select quantity?

Step 3: Set the target of Price add-on (optional)

See details of this feature in How to add price to options?

If you choose to Assign to variant, follow this guide for more information.

Step 4: Set up Advanced option settings (optional)

If you want to set up conditional logic for your option, read this article for more information: How to set up the Conditional Logic Options.

● Required field: When you choose Yes, that field will be required to fill in.

Here is an example of how it looks like in your storefront:

● Default value: it will display automatically in the field when customers go to the product page.

Here is an example of how it looks like in your storefront:

● Help text: Help text can be displayed as Tooltip or Content.

○ Tooltip:

Here is an example of how it looks like in your storefront:

○ Content:

Once you set it to display as Content, you can choose its position as: Below the option title, Beside the option title, or Below all options.

Here is an example of how it looks like in your storefront:

● Min selectors/Max selectors: Max selectors are defaulted as 1.

Here is an example of how it looks like at your storefront:

● Option display inline:

If you tick on the Option display inline, your options can display in one line, depending on the size of each option or your customers’ screen.

Here is an example of how it looks like in your storefront:

If you untick the Option display inline, each of your options will display in a separate line.

Here is an example of how it looks like in your storefront:

Step 5: Make sure your settings are correct and Save

If you have a problem when setting up this feature, please feel free to reach us at [e-mail] or Live Chat if you need any assistance.