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. App integrations

PageFly Landing Page Builder

PreviousSetting up quantity breaksNextGempage

Last updated 17 days ago

1

Go to admin app PageFly -> Edit product template

  • Go to Admin app PageFly

  • Go to pages

  • Select tab Product

  • Choose template show app

2

Add element HTML/Liquild

  • In edit builder find Element HTML/Liquid

  • Move element to position app show

3

Open code editor

4

Add code show app

  1. Show Vairant Swatch App

<div class="globo-swatch-product-detail"></div>

  1. Show Group Product as Variants

<div class="globo-swatch-product-detail"></div>

  1. Show Product Bundles 

<div class="globo_color_swatch_bundle_combo"></div>

  1. Show Quantity Breaks

<div class="globo_color_swatch_bundle_quantity_break"></div>

Example add code: Show variant swatch app

5

Keep variant picker default of PageFly

Our app currently works on pageFly variant picker events. So you need to show PageFly variant picker too to work perfectly.

If you have double varant picker in your product, please contact us we will fix it

Show variant picker of PageFly

  • Click Add Elements -> Shopify

  • Select Product Variant -> choose any style variant of PageFly and show

6

Save and view live page

  • Click Save

  • Public new update to live theme

  • Go to the product page in frontstore and check if it works

Troubleshooting

  • If the add to cart variant is not correct, please contact us to integrate it with the template you are using.

  • For further assistance, contact us via [email protected]

Add Element HTML/Liquild
Open Code Editor
Example add code