How to Use XO Gallery Shopify with PageFly

XO Gallery Shopify Element Configuration

What is XO Gallery?

XO Gallery Shopify allows you to add unlimited images in unlimited galleries by use of a simple upload process. XO Gallery also offers a ton of great features to customize your gallery until you’re satisfied.

It supports modern Grid and Masonry layouts and provides the following three options: lightbox, link and caption on image. Not only that, but you can even customize each photo in the gallery and even modify them for desktop, laptop, mobile and tablet to suit your liking.

Install XO Gallery

Before using this element, you have to install the XO Gallery app to your store and configure options in the app and then come back to PageFly to use the element(s) on all of your PageFly pages.

In order to use this element, you will need to install the XO Gallery element from Shopify Store and go to PageFly to use the element.

Access the Bundler – Product Bundles Element

  • Step 1: Go to Add third party elements in the left toolbar > Click on the Edit your 3rd party elements button.
  • Step 2: In the Integrations popup page, you can search “XO Gallery” on the search bar
  • Step 3: Click on the XO Gallery element in the catalog
  • Step 4: Drag and drop the XO Gallery element on the canvas.

XO Gallery Configuration

Step 1 : Set up XO Gallery app by your Shopify Account.

  • Go to your Shopify Admin > Apps > Choose XO Gallery to set it up.

Step 2: Set up in XO Gallery app.

  • In the Dashboard of XO Gallery, head to Add new gallery section.

  • Add Title for the gallery, then choose Images from your device.

You can configure for your gallery based on your liking, by heading to tabs: Settings, Design, Build, Custom code.

Here you can choose Effect for your Gallery, or configure the display on other devices, etc…

Please refer to this GIF for more information:

XO Gallery Shopify - Effect on Gallery

  • Click Save.

NOTE: After clicking Save the first gallery, there might appear the message which is:

  • Your galleries are not working.
  • You need to enable XO Gallery scripts in theme customizer.

Here you will need to click in Theme customizer and enable app XO Gallery Scripts.

  • Back to your PageFly editor, choose the page that you want to display the gallery.

Drag and drop the XO Gallery element into the page editor, then choose the Gallery in the right side of page editor.

You can customize the styling of the XO Gallery element in the Styling tab.

XO Gallery Shopify - Styling

You can check more information about the Styling tab here.

That’s it! Don’t forget to Save and Publish your product page to see the element on your PageFly page.

Key Takeaways

XO Gallery Shopify is here so sellers can embed their photo gallery into their Shopify store, as it’s incredibly easy to edit and manage.

Frequently Asked Questions

Overview

When was XO Gallery Created?

2018

How Much is XO Gallery Shopify?

From $5.95/month

Can I use XO Gallery on PageFly Editor?

Yes

What is XO Gallery Shopify?

XO Gallery is an photo gallery, specifically optimized for Shopify Online Store.

What’s included in the XO Gallery Plan?

A Free XO Gallery Shopify Plan includes 12 images, with few gallery types, including Grid, Masonry, Justified and Stack.

Why using XO Gallery?

With XO Galleray Shopify, you’re allowed to Create any number of galleries with unlimited photos. It’s very easy to upload and organize, as you can tag products into image. You also can transform product images into a gallery, and edit smoothly on every screen-size, so that you would never miss a potential customer.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us