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
  • 1. Setup style for variant option is color swatch
  • 2. Change display style to swatch
  • 3. Change color hex for options value.
  • Demo
  1. Choose type variant swatch

Set color for variant option value

Use color hex as swatch, you can setup up to 2 color codes for the same variant option value.

PreviousChoose type variant swatchNextUpload custom image for variant option value

Last updated 1 month ago

Guide

1. Setup style for variant option is color swatch

  • Go to admin app GLOBO Color Swatch Dashboard -> Options list

  • Select your product variations to display as swatches

2. Change display style to swatch

  • Choose one of 4 style

Types variant support setup color hex:

✅ Swatch

✅ Pill swatch

✅ Custom swatch with price

✅ Swatch dropdown

  • Click save button

3. Change color hex for options value.

  • After change style -> click config button

  • In config page, you can setup color for option value.

  • For each option value, you can only configure a maximum of 2 colors for 1 value.

  • If you use 2 colors, you need to tick the checkbox next to color 2

  • Save and preview on front store

Demo

Swatch
Pill swatch
Custom swatch with price
Swatch dropdown
Config color swatch
Setup color for option value
Demo