Skip to main content

Publishing options

Get your galleries live on your Shopify store with these flexible publishing methods.

Auto-publish to pages​

The easiest way to add galleries to your store pages.

Create new page with gallery​

  1. Find your gallery in the gallery list
  2. Click Publish
  3. Select New page
  4. Choose gallery position on the page
  5. Click Save

Add to existing page​

  1. Click Publish on your gallery
  2. Click Choose pages
  3. Select an existing page
  4. Choose where to place the gallery
  5. Click Save
Auto publish

Add to homepage and other pages​

Use Shopify's app block to add galleries anywhere.

Using theme sections​

  1. Go to Online Store > Themes
  2. Click Customize on your active theme
  3. Navigate to the page you want to edit
  4. Click Add section
  5. Select XO Gallery
  6. Enter your gallery ID
  7. Click Save

Add section

Your gallery ID appears in the gallery list - it's the number you'll need for sections.

Embed code method​

For maximum control over gallery placement.

Getting the embed code​

  1. Click Publish on your gallery
  2. Select Embed code
  3. Click Copy code

Using embed code​

  1. Go to Online Store > Pages (or Blog posts)
  2. Edit the page where you want the gallery
  3. Click Show HTML to switch to HTML view
  4. Paste the embed code where you want the gallery
  5. Save the page

Embed code

Page templates (Advanced)​

Create reusable page templates with galleries built-in (Check the video from 1:00)

Create gallery page template​

  1. Go to Online Store > Themes
  2. Click Customize
  3. Open the template dropdown at the top and choose Pages
  4. Click + Create template
  5. Name your template (e.g., "Gallery Page")
  6. Choose a base template
  7. Click Create template
  1. Click Add section
  2. Click Apps
  3. Select XO Gallery
  4. Configure your gallery settings
  5. Click Save

Apply template to pages​

  1. Go to Online Store > Pages
  2. Edit the page you want to use the template
  3. In Template, select your gallery template
  4. Click Save

Remove galleries from pages​

Remove auto-published galleries​

  1. Go to Online Store > Pages
  2. Edit the page with the gallery
  3. Click Show HTML
  4. Find and delete the code with class="xo-gallery"
  5. Save the page

Remove gallery

Remove section galleries​

  1. Go to Online Store > Themes
  2. Click Customize
  3. Find the XO Gallery section
  4. Click the section and select Remove
  5. Click Save

Use metafield - Dynamic source​

1. Create metafield​

In your Shopify admin, go to Settings > Custom data. We will add new metafield to Page (You can add it to other parts)

Then click Add definition to add new metafield definition. Follow this instruction:

  1. Fill metafield name
  2. Click "Select type"
  3. Choose Integer
  4. Click Save

2. Add app block​

Go to your theme customize, choose page (if you add metafield to another part, you should choose the corresponding template)

Click Add section then choose XO Gallery

3. Connect dynamic source​

In the XO Gallery app block, click "Insert dynamic source" icon

Then choose XO Gallery ID (metafield name that you fill when create new definition)

The Gallery id here will be ignore

4. Fill gallery id in your page​

Edit your page (that using the template) and fill your id

caution

When adding a new page, you will not see the metafield card. It will appear after you save the page.

Add to product​

You can add different galleries to different products.

Use metafield​

It is easier to manage with metafield.

Use app publish feature​

You can use XO Gallery product section in your theme.

After assign section, use publish feature in the app.

Publishing tips​

  • For homepages: Use sections for easy management
  • For product pages: Embed code gives precise control
  • For blog posts: Embed code works great in content
  • For multiple similar pages: Create page templates

Next, learn about basic customization options.