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
  • Guide step to step
  • Demo
  1. Display on collection page, home page, other pages

Display real-time product data as variations change

On the collection page we can show a preview of the selected variant including:

PreviousClean up variant option in collection pageNextChoose type variant swatch

Last updated 1 month ago

✅ Product title - variant name

✅ Product price of the current variant

✅ Main image product of the current variant

✅ URL product with variant

❌ Second image product of the current variant (no)


Guide step to step

1

Go to the Shopify admin product detail

Add variant color/model

E.g: White, Pink, Black, Green

Sort group variant by color/model

The variant displayed as a color/image must appear before the variant displayed as a button

Add main image for variant group

Save product

2

Sync data agian in GLOBO Color Swatch

Go to Dashboard GLOBO Color Swatch, click button Update data

3

Setup option displayed as type color swatch or image

  1. In options list, find your variant of product

  2. Setup type variant is in the types:

✅ Swatch
✅ Pill swatch
✅ Automated swatch
✅ Image swatch with price
✅ Custom swatch with price
✅ Swatch dropdown
✅ Image dropdown
4

Enable variant show on collection and save

In options list, enable your option vairant show on collection page and save

5

Enable setting "Dynamic swatch" in setting GLOBO Color Swatch

Go to Settings page, enable dynamic swatch function on collection, and save

Demo

Add variant color/model
Sort group variant
Add main image variants
Update data
Set up type option
Enable variant option show on collection page
Enable dynamic swatch
Before click variant image
After click variant image