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.

Preview

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 ...

    • Custom Branding

      To make your Checkout Page have more brand color, Checkout Branding would help you re-style it easily. A. Design System 1. Color 1.1. Canvas This color setting applies to the body background (Mostly affects top of checkout page). For example when ...

    • 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, ...

    • 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 & ...