Introduction
Integrate the Tydal review stars on individual collections and product templates across your online store.
✨ This option is available in all plans
How to Add Review Stars to Any Page on Your Shopify Store
Adding review stars to your products is a fantastic way to integrate reviews across the entire customer journey. Tydal's review stars can be added to the collections, product, and homepage templates by just simply adding a piece of custom code.
Collection pages
Open your Shopify admin
Click Online Store in the sidebar menu
Go to Themes and select the theme you'd like to add the stars on
Click Actions > Edit code
Open your collection or product template that your products use. Sometimes it is called
product-item.liquidorcard-product.liquidCopy the snippet below and paste it where you want the review stars to appear. We suggest placing it below the product title or product price
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating" data-product-id="{{ product.id }}" data-rating="{{ product.metafields.ba_rev.review_data.stars }}" data-count="{{ product.metafields.ba_rev.review_data.reviews_count }}"> <div class="tydal-reviews-rating-count"></div></div>
<!-- Tydal Reviews Stars End -->
Important: If your product is referenced as card_product in the file, you will need to adjust the above code to reflect that:
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating" data-product-id="{{ card_product.id }}" data-rating="{{ card_product.metafields.ba_rev.review_data.stars }}" data-count="{{ card_product.metafields.ba_rev.review_data.reviews_count }}"> <div class="tydal-reviews-rating-count"></div></div>
<!-- Tydal Reviews Stars End -->
Note: Please be advised that the collection or product template's file name may vary depending on the theme. If you can't find the proper file, you may consult your Shopify technical expert or directly ask your theme developer.
Advanced customizations
To display the stars only for products that have reviews
To display the stars only for products that have reviews
{% if product.metafields.ba_rev.review_data.reviews_count > 0 %}
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating" data-product-id="{{ product.id }}" data-rating="{{ product.metafields.ba_rev.review_data.stars }}" data-count="{{ product.metafields.ba_rev.review_data.reviews_count }}"> <div class="tydal-reviews-rating-count"></div></div>
<!-- Tydal Reviews Stars End -->
{% endif %}
To display the stars only for products that have reviews (card-product)
To display the stars only for products that have reviews (card-product)
{% if card_product.metafields.ba_rev.review_data.reviews_count > 0 %}
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating" data-product-id="{{ card_product.id }}" data-rating="{{ card_product.metafields.ba_rev.review_data.stars }}" data-count="{{ card_product.metafields.ba_rev.review_data.reviews_count }}"> <div class="tydal-reviews-rating-count"></div></div>
<!-- Tydal Reviews Stars End -->
{% endif %}
To display the stars for products even with 0 reviews
To display the stars for products even with 0 reviews
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating" data-product-id="{{ product.id }}" data-rating="{{ product.metafields.ba_rev.review_data.stars | default: 0 }}" data-count="{{ product.metafields.ba_rev.review_data.reviews_count | default: 0 }}">
<div class="tydal-reviews-rating-count"></div>
</div>
<!-- Tydal Reviews Stars End -->
To display the stars for products even with 0 reviews (card-product)
To display the stars for products even with 0 reviews (card-product)
<!-- Tydal Reviews Stars Begin -->
<div class="tydal-reviews-star-rating"
data-product-id="{{ card_product.id }}"
data-rating="{{ card_product.metafields.ba_rev.review_data.stars | default: 0 }}"
data-count="{{ card_product.metafields.ba_rev.review_data.reviews_count | default: 0 }}">
<div class="tydal-reviews-rating-count">
</div>
</div>
<!-- Tydal Reviews Stars End -->
💡 Pro Tip: Reach out to the live chat support team if you are not sure where to add the snippet - we'll help you add it to your theme for you!