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 elementClick to copy

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 ElementClick to copy

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

PageFly XO Gallery

XO Gallery ConfigurationClick to copy

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. 

PageFly XO Gallery

         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:

PageFly XO Gallery

        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:

PageFly XO Gallery

        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.

xo gallery

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

xo gallery

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. 

Thank you for your feedback!

Navigate this category

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!