How To Create & Publish Product Page Galleries

A step-by-step guide to create and publish product page galleries on your online store’s product pages. These product page galleries featuring visual shoppable UGC relevant to each product. 

So, let’s get started now. Just follow these simple steps.

1. Create your Free trial account or Log in to your existing Taggbox Commerce account

2. You will see the home dashboard, click on Shoppable Galleries option from sidebar

taggbox commerce dashbaord

3. Your existing gallery will appear, click on the EDIT button on the gallery

4. You will see multiple social media platforms, select the source platform for collecting content

Let’s choose Instagram as an example here. You can add more feeds later from the Add Feeds option under Content Gallery. 

social platforms taggbox

5. Now select your feed type like Hashtag, Handle, Mentions, Tagged, Stories, etc. 

add social feeds

6. Click on Create Feed and complete the authentication process successfully

NOTE: Taggbox does not store or have access to your private information or passwords relating to the social media accounts that you connect. 

After this, you will get all your social media posts as per your feed. 

 Now it is time to upload your brand’s product catalog to your Taggbox account. 

7. Click on Add Products under Product catalog in sidebar menu, a new screen will appear

8. You will see the following options:

  • Import Product List: This option helps you upload products in bulk using a CSV file 
  • Add a Product: This option lets you upload one product at a time
  • Sync Shopify Products: Enter Shopify store URL and fetch products directly from Shopify

IMPORTANT: For product page galleries, it is essential to have the Product ID for each product in your catalog. 

Note: While uploading products through a CSV file. Do remember to follow the sample format provided during the uploading process. Incorrect CSV file format may result in products not being uploaded or errors in galleries. 

Error In Product ID: In excel sheet, when you enter more than 11 digits in a cell it will automatically truncate the number. Make sure your number is mentioned as is without truncation or any formula. 

9.After uploading your products, click on the TAG PRODUCTS option in the sidebar menu

You will see all your posts with the Tag Products option under them. 

10. Click on the Tag Products button under any post, a pop-up will appear

12. Enter the product name in the search bar and click on the product to tag it to the post. 

Similarly, you can tag products to all the images in your gallery. You can also tag multiple products to one post.

Note: it is recommended to not assign Hotspots on the product page gallery if you wish to show small size images. 

 Next step is to choose the compatible theme for the Product page gallery. 

13. Click on Design & Filter menu and then choose Themes option, you will see the themes

14. Click on the Modern Slider theme and then click on the Apply button. 

Note: Modern slider is the most compatible theme for product page galleries.

You can also make changes to card style, theme settings, hover effect, social actions, CTA button and more in the Customization section under Design & Filter menu.

14. Now click on the PUBLISH button at the bottom left corner; you will see 2 publishing options 

  • Homepage & Landing Pages
  • Product Page Galleries

15. Select the Product Page Galleries option and you will see different CMS options like HTML, Shopify, WordPress. etc.

16. Click on your choice of CMS. Let’s choose Shopify as an example.  Now, you will see the steps to publish Product page galleries on Shopify.

Note: The publish code mentioned there isn’t applicable directly. You first need to copy the code and paste it into your product page template code file. Now enter your site’s {{product_id}} identifier key after data-filter-id in the publish code.

For example: data-filter-id=”{{product_id}}

product gallery publish code

17. Now save the changes on your website and you will have successfully published the product galleries on your online store’s product pages. 

Similarly, you can follow the steps for your CMS as well. 

Note: If you face any challenges and issues while publishing the galleries, then feel free to contact us through message, mail, or call. We will help you set up your galleries.