Variant swatch style

Prerequisites *

Before setting up color swatches, make sure:

  • Your products have variants (e.g. Color: Red, Blue, Green; Size: X, M, L, XL).

  • If newly added variants are not appearing, sync your product data in the Globo Swatch app.

Add variants for product

Choose variant swatch style

  • Go to admin GLOBO Color Swatch -> Dashboard, in Options list -> column "Display style" you can choose style swatch each variant and Save

List of available variant style

1. Swatch

Image or color swatch with hover animation featured

2. Pill swatch

Pre-styled image or color swatch for a compelling design

3. Swatch dropdown

Elaborate the dropdown design with swatches on each option

4. Variant image dropdown

Elaborate the dropdown design with image on each option

5. Button

Text base options with variety of customized button styles

6. Button without border

Plain text without background well suited for a minimal style

7. Pill button

A modern and user-friendly button design for encouraging interaction

8. Button with price

Highlight the price on button with standout style

9. Dropdown

Flexible styling dropdown to fit your brand's look

Advanced settings appearance

  • If you need change more for variant type -> go to GLOBO Color Swatch -> Appearance page

  • In Appearance page, choose type variant you need change setitng and click set up button

  • You can select the On product page or On collection page tab to set up separately

Choose page apply setting

1. Shape And layout

Shape And layout

2. Color, Text, Border

Variant default

3. Hover Effect And Animation

Hover Effect And Animation

4. In Stock Product Message

In Stock Product Message
Advanced setting variants swatch

  1. Show/hide variant name

  2. Show/hide tooltip

  3. Out of stock style

PreviousGetting startedNextDisplay on product page

Last updated