Install the "TagTray on Shopify App"

To unleash the full power of TagTray within Shopify, install our Shopify app from the Shopify App Store at https://apps.shopify.com/tagtray.



Installing the TagTray Initialization Snippet

Open up the file theme.liquid under the Layouts folder of your theme editor, and insert the TagTray JavaScript include before the closing </head> tag as documented in Step 2 of the installation docs here.


<script src="//api.tagtray.com/v3/tagtray.js"></script>


Inserting Global Galleries Into Your Templates

To insert a gallery into your Shopfy store, just find the Liquid template corresponding to where you wish the gallery to display, and insert the gallery code described in Step 3 of the installation docs here.


Sample TagTray Display Snippet

<div class="span12">
    <h1>TagTray Test Gallery</h1>
    <div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here"></div>
</div>

As an example, to insert this gallery on your home page, you would just insert it in the template file index.liquid at the appropriate position as visualized below:



Inserting Product-Specific Galleries Into Your Templates (w/ Shoppable Galleries)

The easiest way to add product-specific galleries to your product pages is by using our Shoppable Galleries feature.

By tagging the products contained within your social photos using the shoppable galleries interface, you can then add a filter to your primary gallery to only show the photos in the gallery which contain a specific product. This is accomplished by passing the Shopify product ID in as an attribute to your gallery.


Product-Specific Gallery Display -- Using Shoppable Galleries

<div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here" data-product-id="{{ product.id }}">