Swatch
1. How Does the Swatch Display?
The Swatch option allows customers to select choices visually using images, colors, or labels instead of traditional dropdowns or checkboxes. This enhances the shopping experience, especially when product customization involves selecting colors, styles, or materials.
Example of how it appears on a product page:
Customers can click on color blocks or image thumbnails to select options such as T-shirt color, fabric, etc.
2. How to Create a Swatch
Step 1: Add a New Option
Click Add Option > Swatch to create a new option
Step 2: Add information to the Swatch
Enter an option name (e.g., "Choose Color", "Select Fabric", "Pick a Finish")
Add option values (e.g., Red, Blue, Black, White)
For each value, you can:
Choose a color swatch (solid color)
Upload an image swatch (custom image)
Tick on “This option is required” if you want customers must choose the option before checking out.
Tick on "Hide option name” if you don’t want to show the option name above the option values.
Other features:
Price Add-On > Create Fee – What is it & How to Use
Price Upsell product > Assign to Variant – What is it & How to Use
SKU – What is it & How to Use
Quantity – What is it & How to Use
Step 3: Advanced Settings (If Needed)
Conditional Logic: Enable conditional logic if you want the Swatch to show/hide only when a customer selects a specific option from another field. How to set up Conditional logic?
Help text: Add a short description to explain the purpose of the Swatch option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
Default value: Pre-select the Swatch options every time the customer goes to the site. It can save time for customers by providing common or expected choices.
Example: You want the option value “Blue” on Color to be selected automatically when customers enter the product page.
How it looks like in your storefront:
Limit selectors: You can set Min/Max option value that customers can select.
Step 4: Save and Test
Click Save to apply the settings.
Visit the product page on your store to check if the Swatch option works correctly.
3. Real-World Applications of Swatch
Color selection for apparel
Material choice for furniture
Pattern/texture selection for home décor
Visual product personalization (e.g., monogram styles)
4. Key Features of Swatch
The Swatch let users choose only one option from a predefined list, ensuring clear, exclusive selections. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.
Last updated