Skip to content

Add to product

Store 2.0

You can use XO Gallery product section in your theme. After assign section, use publish feature in the app.

Store 1.0

To add gallery to product, you must add liquid code to your template first.

Liquid code

To display gallery in product detail page, you will need to add this code to product template file.

  • Go to Online store > Themes
  • Click Actions button link in Current theme, choose Edit code
  • Find Templates > product.liquid
  • Copy below code and paste after {% section 'product-template' %}
<!-- [XO Gallery] product gallery  -->
{% if product.metafields.xo_gallery %}
    {% for xo_gallery in product.metafields.xo_gallery %}
        {% assign xo_gallery_id = xo_gallery | last | split: "_" | last %}
        <div class="xo-gallery" data-id="{{xo_gallery_id}}"></div>
    {% endfor %}          
{% endif %}
<!-- End [XO Gallery] product gallery -->

Not sure where to add?

Please send email to [email protected], we will help you to add Gallery where you want.

Adding from product edit page

In product edit page, click More actions:

  • Edit gallery: Will send you to the page with all galleries integrated with current product.
  • Add new gallery: Click to add new gallery to product.

Adding from App page

  • From gallery list page click Publish
  • Click Product
  • Choose products