Metafield gallery

Want to show different images for every product without creating 100 separate galleries? With the Metafield Integration, you can connect a single XO Gallery to Shopify Metafields. Upload your media directly to your products, collections, pages, blogs or articles, and the gallery will update automatically.

Pro Feature

Metafield gallery requires a Pro plan subscription.

How it works

The images in your gallery act as a template. On your store, the gallery shows the media from the metafield instead, in order, and each item keeps the layout and style settings of the gallery image in the same position. If the metafield has more media than the gallery, the extra items use the settings of the first gallery image.

Step 1: Create your Metafield in Shopify

First, we need to tell Shopify where you’ll be storing your images/videos.

1. From your Shopify Admin, go to Settings > Metafields and metaobjects > Products (or Collections/Pages/Blog posts).
2. Click Add definition.
3. Name: Give it a name (e.g., "Gallery Media").
4. Select type: Choose List of values and File.
5. Validation: Ensure you select "List of files" and set accepted file types to "Media" (this allows both images and videos).
6. Click Save.

Step 2: Connect XO Gallery to the Metafield

1. Open the XO Gallery app.
2. Create a new gallery or edit an existing one (you can use dummy images for now to preview the layout).
3. Go to the Settings tab within the gallery editor.
4. Expand the Metafields section.
5. Under Source type, select the object where you created the metafield: Product, Collection, Page, Blog or Article. Select None to turn off the metafield source.
6. Under Select metafield, choose the definition you created in Step 1. If you see "No metafields yet", check that the definition was created for the same source type.
7. Optional: check Hide gallery if metafield is empty to hide the gallery on pages where the metafield has no media. If it's unchecked, those pages show the gallery's own images.
8. Click Save.

Step 3: Add the Gallery to your Theme

1. Go to Online Store > Themes and click Edit theme.
2. Navigate to the page type you chose (e.g., Default Product page).
3. In the sidebar, click Add block or Add section and select XO Gallery.
4. In the block settings, select the Gallery you just configured.
5. Click Save.

Step 4: Add Media to your Products

1. Go to any Product page in your Shopify admin.
2. Scroll down to the Metafields section.
3. Upload your images or videos to the "Gallery Media" field.
4. View your store—the gallery will now dynamically display the media specific to that product!