Add Galleries to Shopify vintage

Use this article to integrate Bazaarvoice Galleries and display tagged photos on your Shopify store home, product, and collection pages using customizable theme blocks. You will learn how to:

• Add Galleries code to your store pages
• Update the Galleries code

Note: Before completing these steps, ensure you have configured your account. Refer to the configure your account topic for more information. 

To add Galleries to your account follow the below steps.

Step 1: Add Galleries code to your store pages

To display galleries in your home, product, and collection pages, add blocks or sections do the following: 

1. Open your Shopify Theme .
2. In your current theme, select Edit code from the menu .
3. Add a gallery to your home, product, and collection pages.

Home page:

• Select the Templates folder from the list on the left side of the page.
• Select either the index.liquid or theme-template.liquid file containing your home page code.
• Paste the following code where you want to add your home page gallery:
  
  

  Copy Code HTML

  <div data-crl8-container-id='homepage' data-crl8-locale='en_US'></div>

  
  

Product page:

• Select the file that contains your product page code.
• Paste the following code where you want to add your product page gallery:
  
  

  Copy Code HTML

  <div crl8-container-id='product' data-crl8-locale='en_US' crl8-filter="productId:'{{ product.selected_or_first_available_variant.sku}}'"></div>

  
  

Collection page:

• Select the file that contains your collection page code.
• Paste the following code where you want to add your category page gallery:
  
  

  Copy Code HTML

  <div crl8-container-id='category' data-crl8-locale='en_US' crl8-filter="category:'{{collection.id}}'"></div>

  
  

Other pages:

• Select the file where you’d like to add your gallery.
• Update your <div> tag with your unique container ID, for example:
  

  Copy Code HTML

  <div data-crl8-container-id='gallery-XYZ' data-crl8-locale='en_US'></div>

  
  
• Paste the updated <div> tag where you want your gallery to appear.
  
  
4. Save your changes.
   
   

Step 2: Update the Galleries code

To update the Galleries code you’ve added to your store pages for each gallery you want to display:

1. In Vibe , select the gallery you want to display in your Shopify store.
2. Copy the unique container ID from the URL in your browser's search bar. For example, you would copy gallery-XYZ from the below URL.

https://app.curalate.com/galleries/website?containerId=gallery-XYZ

3. Open your Shopify Theme .
4. In your current theme, select Edit code from the menu .
5. Find the file that contains the code you need to update. From the list of folders on the left side of the page, find the file containing the code you need to update.

If you’re updating a product page, the file is usually titled product.liquid or main-product.liquid. It is most likely to be in the Templates folder, but may be in the Sections folder.

If you’re updating a collection page, the file is usually titled product-card-list.liquid, product-card-grid.liquid, product-grid-item.liquid, or collection.liquid. It is most likely to be in the Templates folder, but may be in the Sections or Snippets folders.

6. Paste the unique container ID into the <div> tag. For example, you would paste "12345" into the below <div> tag.
   

   Copy Code HTML

   <div data-crl8-container-id="12345" data-crl8-locale='en_US'></div>

   
   
   
7. Save your changes.