Bigcommerce Installation


Installing the TagTray Initialization Snippet

Open up the panel HTMLHead.html in your theme folder, and insert the JavaScript include before the closing </head> tag as documented in Step 2 of our Installation & Configuration docs.


Sample TagTray Installation Code

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

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.

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>

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:

Product-Specific Gallery Display

<div class="tagtray-gallery" data-gallery-code="add your assigned gallery code here" data-product-id="%%GLOBAL_ProductId%%"></div>