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. Enable swatch setting on product page
  • 2. Choose display style
  • 3. Add app block in theme settings
  • 4. Enable app embed and preview
  • 5. Result
  • App still not working on product page?
  1. Product variants swatch

Display on product page

Color swatches allow customers to easily see and select product variations like different colors. Follow this step-by-step guide to set them up in your store.

PreviousVariant swatch styleNextShow only images related to the selected variant

Last updated 22 days ago

1. Enable swatch setting on product page

  • Open the Globo Color Swatch app from your Shopify admin panel.

  • Navigate to the Settings section.

  • Enable the Swatch on Product Page option to activate swatches on product pages.

2. Choose display style

  • Navigate to the Dashboard app

  • Change the style for each option in the Options list. If you do not change, we display it as default type Button

  • Click the save button to save the changes.

3. Add app block in theme settings

  • Go to Online Store > Themes > Customize.

  • Select Product Page in the theme editor.

  • Click Add block > Apps and choose Globo Color Swatch > Variant swatchs to display variant app

You can use the application block to move to the position you want.

Required* :

  • The default theme variant picker block must be kept, not deleted to ensure the default theme and add to cart functionality works properly.

  • If you want to hide it before the app displays, please

4. Enable app embed and preview

  • In Online Store -> Themes -> Customize

  • Click to App embeds -> find Globo Color Swatch -> Enable

5. Result

  • View product online store


App still not working on product page?

  1. Make sure your current product status is active and you have synced data in the app.

  2. Double check your pricing, if you are on free plan, app will only show first 100 products

  3. If you see it showing in the default language, and not in other languages, please double check if pricing supports multi-language

  4. If it still doesn't work, please contact us, our support will help you solve the problem.

Setting on product page
Change style option
Add block variant swatchs
Enable app embed
Result variant swatch app