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 Product or Collection pages, and the gallery will update automatically.

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. Locate the Metafield section.
5. Under Source Type, select the object where you created the metafield (e.g., Product).
6. Under Select Metafield, choose the definition you created in Step 1.
7. 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!