Color Swatch

Color Swatch

Color swatch feature is only available in Premium plan.
This new feature creates colors corresponding to product variants for better buying experience, in addition to a dropdown list.

Swatch Shape

Use this to customize the border of color swatches. There are 3 options for you: Square, Circle and Rounded Square.

Custom colors

Click on 'Add more color' to add color to swatch. Type in the first box to add title of color to your color swatch.

Title must match the color name of your product variants, including uppercase, lowercase, space, hyphen, ampersand...

The second box will give you 3 options on how to show color.

With the first 2 options, you can create single-color and double-color variants. 
'Image' option allows you to upload image from your device or insert link to image you want to add.

If you want to remove color, click on the bin icon on the right.


To see how color swatch looks on your popup, click on the arrow on the top left of preview board to import actual product and preview swatch.

    • Related Articles

    • Adjust Form Styles

      Form style  Font family  Our app supports Google Fonts, you can type the font name to search. Leave it blank if you want to use theme's default font. Font size  Choose one size for all text content of the form. Text align  *Only apply to tittle and ...
    • Style Settings for Mobile Menu app

      Head to Display settings tab, you'll find options to style your mobile menu in Custom Style: Custom Style Menu box text alignment Align all content on menu, including section title, links list, social icons... For title in each product or image, ...
    • How to set up Sticky Bar? (Version 2)

      GENERAL SETTING Visibility Enable on desktop: allow your sticky button to appear on desktop version.  Enable on mobile: allow your sticky button to appear on mobile version. "Enable on mobile"  works on screen width that is below 992 pixels Display ...
    • Extra Features

      CSS Selector of your cart A CSS selector is the part of the code that identifies what part of the web page should be styled. In Quickview, it is used to integrate with your theme cart. Follow this instruction to know how to find the css selector of ...
    • Badge

      You can add a badge (or label) to your product to catch your customer's eyes, increase CTR and promote your campaign.  *Available in Premium plan only. 1. How to add and customize badge?  Badge is only available in 4 item layouts: Text link, Text & ...