Installing the TagTray Initialization Snippet
</head> tag as documented in Step 2 of
our Installation & Configuration docs.
Inserting Global Galleries Into Your Templates
To add a TagTray gallery to one of your store pages, locate the corresponding layout in your theme folder, and follow Step 3 of our Installation & Configuration docs.
Note that the TagTray script is very configurable, with many options available to customize to fit your site. To see a sample of how some of these options could be used, use the "Customize Code Snippet" option below.
<div class="span12"> <h1>TagTray Test Gallery</h1> <div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here"></div> </div>
For instance, to add a gallery to your home page, you would insert the snippet in the layout default.html as depicted here:
Inserting Product-Specific Galleries!
If you've upgraded to one of our paid plans, you can easily create product-specific galleries (once you have tagged the products in your photos), by passing your Bigcommerce product ID into your TagTray code snippet when displaying your gallery. For more info on this feature, see Shoppable Galleries
This can be accomplished by opening up the panel ProductDetails.html, and inserting the TagTray gallery display snippet where you would like the gallery to appear, with the inclusion of one extra parameter specifying the Bigcommerce product ID (which can be accessed in the panel using the global tag %%GLOBAL_ProductId%%). The complete snippet would look similar to the following:
<div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here" data-product-id="%%GLOBAL_ProductId%%"></div>