{"id":501725,"date":"2025-08-04T09:25:58","date_gmt":"2025-08-04T09:25:58","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=501725"},"modified":"2026-06-16T05:55:49","modified_gmt":"2026-06-16T05:55:49","slug":"user-guide-for-option-variant-swatches","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/user-guide-for-option-variant-swatches\/","title":{"rendered":"User Guide For Option & Variant Swatches"},"content":{"rendered":"\n
\n

Overview<\/h2>\n<\/div><\/div>\n\n\n\n

With the Option & Variant Swatches App for Wix, store owners can enhance product pages with visually appealing colour swatches, image tiles, and textured patterns.<\/p>\n\n\n\n

Integrate patterned backgrounds and image-based options that align perfectly with your store\u2019s branding and design.<\/p>\n\n\n\n

Easily customize product option templates with different colours, sizes, and tile patterns to create an engaging and user-friendly shopping experience.<\/p>\n\n\n\n

\n

Workflow <\/h2>\n<\/div><\/div>\n\n\n\n

Go to the Templates section of the Option & Variant Swatches App. Here, you can find multiple templates.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n
\"<\/figure>\n\n\n\n

Choose a compatible template and click on “Set default” to apply that template to the product option.<\/p>\n\n\n\n

\n

Customize the Template<\/h2>\n<\/div><\/div>\n\n\n\n

Click on Customize to customize or edit the template and add features according to our requirements.<\/p>\n\n\n\n

Customize the template and click on Create to save the changes in the template.<\/p>\n\n\n\n

\"option-customize\"<\/figure>\n\n\n\n
\n

Product Options in Wix<\/h2>\n<\/div><\/div>\n\n\n\n

Go to Wix >> Catalog >> Product >> Add product option<\/p>\n\n\n\n

Important Note: Kindly ensure that the colour option is selected when creating the Add Product Options.<\/strong><\/strong><\/p>\n\n\n\n

The swatch functionality works only when the option type is set to Colour<\/strong>. Ensure you select Colour while creating the product option.
<\/p>\n\n\n\n

\"option-wix\"<\/figure>\n\n\n\n

Go to Product Options, and click on the “More actions” dropdown, where two options are available, “Create Options” and “Import Options”, you can choose any one.<\/p>\n\n\n\n