Adding complete TagTray support to your Magento store, with customized galleries per product, is very easy to accomplish.

Installing the TagTray JavaScript

Open up the file /app/design/frontend/your_theme/template/page/html/head.phtm, and insert the TagTray JavaScript include before the closing </head> tag as documented in Step 2 of the installation docs here.

Inserting Global Galleries

If you want to display a general gallery not tied to any particular product, locate the template corresponding to where you wish the gallery to display, and insert the gallery code following Step 3 of the installation docs here.

Configuring Shoppable Galleries

In order for TagTray to access your product catalog, it must be exposed via Magento's REST API ( allowing TagTray's API to access the same product information as the customers on your site). The steps to do so are:

  • From the Magento Admin menu, select System -> Web Services -> REST - Roles, and edit the role "Guest" to allow access to all resources as shown here.
  • Next, select the menu System -> Web Services -> REST - Attributes, and edit the attribute rules for "Guest" to allow access to all resources.

If configured correctly, you should be able to view your product catalog by hitting the following URL on your site:

We also offer legacy support for the SOAP v2 API, contact us for more info if necessary.

Displaying Product-Specific Galleries via Shoppable Galleries

In order to display product-specific galleries on your product pages, you can pass your Magento product ID into your gallery display snippet using the data-product-id attribute. After doing so, only photos tagged with the specified product will be displayed.

To access the current product ID from your Magento template, use:
$product_id = $this->getProduct()->getId();

Displaying Product-Specific Galleries via Hashtag per Product (Legacy Method)

While the easiest way to create product-specific galleries is with our Shoppable Galleries feature, it's also possible to create galleries tied to specific products via hashtags only -- using the techniques below, you may either create a gallery per product, or create a gallery that can be assigned to multiple products based on any grouping you choose.

To do so, you'll need to create a couple custom product attributes -- for an overview of how these attributes work, consult the Magento guide here.

Below are a couple suggested attributes, though these identifiers can be adjusted as needed to suit your needs.

this attribute will be used to store the TagTray gallery code for the gallery to be displayed with a product

this attribute is used to store the hashtag name that would be displayed to the customer on the product page (for instance, as a way to instruct them on how to tag their own images to be included in the gallery).

Then, to display your TagTray gallery on the product page (found in /app/design/frontend/default/your_theme/template/catalog/product/), use these attributes to customize your gallery like this:

<?php $gallery_code = $_product->getData('gallery_code'); ?>
<?php if (!empty($gallery_code)): ?>
    <div class="grid_12 omega alpha tagTray p-details clearfix">
        <div class="header clearfix">
            <h3 class="left">TAG YOUR PHOTOS</h3>
            <span class="left"> Tag your photos using <?php echo $_product->getData('hashtag')?> on Instagram or on our Facebook page.</span>
        <div class="tagtray-gallery" data-gallery-code="<?php echo $gallery_code; ?>"></div>
        <div class="clearfix"></div>
<?php endif; ?>

Finally, for each product that should have a gallery displayed, just populate the appropriate gallery code in the database for that product.