XO Gallery element

In this article, you will learn how to use the XO Gallery element.
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.

Install XO Gallery

Install PageFly

About XO Gallery element

The XO Gallery element 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.

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. 

Access XO Gallery Element

In your PageFly editor, head to the Integrations section > search for XO Gallery > Enable XO Gallery element. 

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.

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

         2. 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:

        3. 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. You can refer to this GIF for details:

        4. 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.

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.