Globo Docs
GLO Color Swatch
GLO Color Swatch
  • Getting started
  • Product variants swatch
    • Variant swatch style
    • Display on product page
      • Show only images related to the selected variant
      • Required select swatch options before add to cart
      • Inventory variations on product page
  • Display on collection page, home page, other pages
    • Show add to cart button on slider, grid, list products
    • Clean up variant option in collection page
    • Display real-time product data as variations change
  • Choose type variant swatch
    • Set color for variant option value
    • Upload custom image for variant option value
    • Setup automate image variant product
  • Advanced setting variants swatch
    • Show/hide variant name
    • Show/hide tooltip
    • Out of stock style
  • Image swatch ratio
  • Bulk export & import variant options
  • Group products as variants
    • Group product style
  • Bundles
    • Setting up product bundles
    • Setting up quantity breaks
  • App integrations
    • PageFly Landing Page Builder
    • Gempage
    • Smart Product Filter & Search
  • FAQs
    • Why can’t I see the swatches for my new product?
    • My theme doesn’t support app blocks — how can I show or move the swatches?
    • Why does the app work on collection pages but not on the homepage or other pages?
    • Why don’t the images change when I pick a different swatch?
    • Why doesn’t the main product image update when I click a color swatch?
    • Why is the wrong product variant added to the cart?
    • Why do swatches disappear when I switch to another language?
Powered by GitBook
On this page
  • Prerequisites *
  • Choose variant swatch style
  • List of available variant style
  • 1. Swatch
  • 2. Pill swatch
  • 3. Swatch dropdown
  • 4. Variant image dropdown
  • 5. Button
  • 6. Button without border
  • 7. Pill button
  • 8. Button with price
  • 9. Dropdown
  • Advanced settings appearance
  1. Product variants swatch

Variant swatch style

PreviousGetting startedNextDisplay on product page

Last updated 1 month ago

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.

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

1. Shape And layout

2. Color, Text, Border

3. Hover Effect And Animation

4. In Stock Product Message

Advanced setting variants swatch
Show/hide variant name
Show/hide tooltip
Out of stock style
Add variants for product
Choose page apply setting
Shape And layout
Variant default
Hover style
Selected variant
Hover Effect And Animation
In Stock Product Message