Skip to main content

Manage galleries

Gallery list page​

This is overview page. Here you can edit, clone, delete, import, export or publish a gallery.

To export gallery, click ... button, then choose Export gallery

Save export json file.

You can use exported gallery json file and import to another store.

Images location

All images are in old store by default. If you want to transfer images to new store, check Import images to new store.

  • From gallery list page, click Add new Gallery
  • Name your gallery
  • Upload images
  • Press Save

Images​

Here you can upload new images, add images from Shopify files or Product to your gallery.

Image settings​

Here you can change settings for the image:

  • Edit content:
    • Add title/description... (depend on what you choose in design tab)
    • Enable video (show in popup): support Youtube & Vimeo video. Just paste video URL here.
  • Image settings:
    • Filter (if you enable filter in settings)
    • Link
    • Alt text
    • Image width (depend on gallery type): compare with column
    • Image height (depend on gallery type): compare with column
    • Hover effect: here you can choose different hover effect for each image
    • Appear effec: here you can choose different appear effect for each image
    • Setting show/hide on different devices
  • Replace image: Change image to another image
  • Hotspot: (pro plan)
    • Tags product
    • Add custom link
    • Show hotspot with/without number
  • Delete image

Hotspot / Shoppable Galleries​

You can tag a product or add custom link to your images. Open Image settings > Hotspot

  1. Tag some products or links. This will appear when user view image in popup.
  2. Click Enable hotspot if you want to show hotspot in images. You can drag hotspot anywhere on image.
  3. Place title / description

You can copy hotspot from 1 image to another images.

  1. Opem image settings > Hotspot, click Copy hotspots
  2. Open image settings (of another image) > Hotspot, click Paste hotspot

Add "View more" button for each product/link:

  1. Click Settings tab, find and check Enable tagged product view more button
  2. Fill button text and choose style

You can access gallery settings by clicking Settings when edit gallery.

  • Grid a regular set of equal rows and columns grid of images that displays every image as a square

  • Masonry placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall

    You don't have to calculate and crop image in some fixed with & height. XO Gallery do it for you.

  • Stack placing elements near each other

  • Justified style like Flickr images

  • Carousel Put image in carousel type

Hover effect​

Set global effect for all images in gallery. You can set different effect for single image in image settings popup.

List of all effects here.

info

If you use Hoverdir effect, you can't set different effect for single image in gallery.

Appear effect​

This will hide all gallery images, then show images when user scroll.

Enable popup​

Here you can:

  • Choose effect for popup
  • Change background opacity
  • Show/hide caption
  • If you choose design type with description, you can choose to add description text to the caption
  • Limit display item (with config text)
caution

Loadmore & filter will be disabled if you enable limit feature.

Loadmore​

This feature is useful when you have many images in your gallery and want to show a few images on first load. The demo is here

Filter​

Add filter for images in gallery. The demo is here

info

Filter is available for Grid, Masonry, Stack & Justified types.

Images​

Image order​

Change order of images in gallery:

  • Normal: follow upload order
  • Reverse: reverse upload order
  • Random: Image will display random everytime user visit gallery page.

Thumbnail size​

Images in gallery will be resized for fast loading. Here you can manual set thumbnail width for your images. Popup will use original image that you upload.

Option to crop image in particular size.

info

Image will be cropped from center. Image crop can't be upscale.

Lazyload​

Lazyload is enabled by default. Check if you want to disable lazyload.

Here you can modify how images are displayed.

  • Choose type
    • Simple title
    • Title & description
    • Title & button
    • Button
    • Image: with this type, user can see other image when hover over an image.
    • Disable (no hover layer)
    • Custom HTML
  • Custom for item
  • Custom for hover layer

Gallery build page​

Responsive​

Image order panel​

This tool give you quick way to reorder images, add blank item, show/hide image (or blank item) in specific devices.

File requirements​

Image file requirements​

AttributeRequirement
File sizeMaximum of 6 MB (megabytes)
ResolutionMaximum of 20 MP (megapixels)
Aspect ratioBetween 100:1 and 1:100
File formatsJPEG, PNG, WEBP, HEIC, and GIF

Video file requirements​

AttributeRequirement
File sizeMaximum of 50 MB (megabytes)
ResolutionMaximum resolution of 4K
Video lengthMaximum video length of 10 minutes
File formatsMOV and MP4