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
  • 1. Swatch
  • Color
  • Image custom (file upload, link image)
  • Image automate (main image for selected variant)
  • 2. Button type
  • 3. Dropdown
  • 4. Variant with price

Choose type variant swatch

We offer various type to display variant options. You can choose from the options below to customize how the variants appear.

PreviousDisplay real-time product data as variations changeNextSet color for variant option value

Last updated 1 month ago

The variant type will appear on both the collection page and the product page.

1. Swatch

Color

Choose colors to showcase your variants. This type allows you to display options using color swatches, making it easy for customers to pick their preferred color with just a click.

Suitable for variations color.

Image custom (file upload, link image)

Upload custom images for each variant, either through file upload or by linking images. This gives you the flexibility to show your variants visually, making it easier for customers to see exactly what they’re selecting.

Suitable for products with common variations, similar variations will share the same image like material, sample code, sample series.

Image automate (main image for selected variant)

Automatically show the main image for the selected variant. When a customer chooses a variant, the image updates to reflect that option, helping them see exactly what they're getting.

Suitable for almost all types of variants (like color, model, type, material,...)

2. Button type

Display variant options as clickable buttons. Customers can simply click a button to choose their desired variant, making the selection process fast and intuitive.

Suitable for simple variants (like size, short text, type, material,...)

3. Dropdown

Show the variant options in a dropdown list. This type is great for keeping things neat and organized, offering a clean way for customers to choose their options.

This type is perfect for keeping your product page clean and organized, especially when you have many variants (like text, long text, many options). It’s ideal for products with multiple options that you want to present in a simple, easy-to-navigate format.

4. Variant with price

Display the variant options along with the price. This gives customers a clear view of the price for each variant, making it easy for them to make a decision based on their budget.

Suitable for different price points for variant options.


Advanced Editing Style Variations
Swatch - Color
Swatch - Image Custom
Swatch - Image Automate
Button basic
Button without border
Pill button
Dropdown basic
Dropdown - Swatch Color
Dropdown - Swatch Image
Variant with price basic
Variant with price - Swatch Color
Variant with price - Swatch Image