Skip to main content
Solved

Symmetry Theme Shopify Reviews on collection pages

  • 24 July 2024
  • 1 reply
  • 28 views

Hi there, 

 

is there someone who coul help me where to add the <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div> Snippet in the symmetry theme code to display reviews on collection pages ?

 

Thanks for the help!

1 reply

Userlevel 5
Badge +25

Hey @ghostzicht 

I might not be 100% correct but this is more of like you trying this and seeing if it works

  • Locate the Collection Template:

    • In your Shopify admin dashboard, go to Online Store > Themes.
    • Find your Symmetry theme and click on Actions > Edit code.
  • Identify the Collection Template File:

    • Look for the template file that controls how collection pages are displayed. Typically, this is named something like collection.liquid or similar, depending on your theme’s structure.
  • Insert the Klaviyo Reviews Snippet:

    • Inside the collection template file (collection.liquid or similar), locate where you want the Klaviyo reviews to appear. This might be within a loop that iterates through products in the collection.
  • Place the Snippet Correctly:

    • Insert the Klaviyo reviews snippet <div class="klaviyo-star-rating-widget" ... ></div> where you want the reviews to display for each product.
  • Use Liquid Variables for Product Data:

    • Make sure to use Liquid variables to correctly insert product data like {{ product.id }}, {{ product.title }}, and {{ product.type }}. These should dynamically pull the relevant information for each product in the collection.
  • Save and Test:

    • After making your changes, save the file and then test by visiting your collection pages on the storefront to ensure that the Klaviyo reviews are displaying correctly.

Example Implementation

Here’s a simplified example of how you might insert the Klaviyo reviews snippet within a product loop in collection.liquid:

{% for product in collection.products %}
<div class="product">
<h2>{{ product.title }}</h2>
<!-- Other product details -->

<div class="klaviyo-star-rating-widget"
data-id="{{ product.id }}"
data-product-title="{{ product.title }}"
data-product-type="{{ product.type }}">
</div>
</div>
{% endfor %}
  • Replace ‘collection.products’ with your theme's appropriate variable if it differs.
  • Ensure the classes and data attributes (data-id, data-product-title, data-product-type) are correctly formatted as per Klaviyo’s documentation.

By following these steps and customizing the snippet placement within your theme's collection template, you should be able to display Klaviyo reviews on your collection pages effectively. If you encounter specific issues or need further customization, consulting with a Shopify developer or referring to Shopify's documentation might also be helpful.

I hope this helps

Thanks

Arpit

Reply