Setting Star Rating as an Anchor on Category Pages (Legacy)

By default, star ratings that are placed on category pages or other customized sections on-site are not clickable.

The following guide will assist you in setting up the star rating as an anchor to product pages and/or the Reviews Widget.

Linking the star rating to a product page

This solution allows end-users to click on the star rating and be redirected to the relevant product page.To link the star rating to a product page, do the following:

1. Wrap the category page star ratings code with an anchor tag. <a> </a>
2. Set the href="" property with the URL placeholder of your specific platform.

Depending on your eCommerce platform, the Yotpo star rating on category pages will look like a variation of the code below.

    <div class="yotpo bottomLine"
        data-product-id="{{ product.id }}"
        data-url="{{ product.url }}">
    </div> 

Platform-specific examples

Linking the star rating to the Reviews Widget

This solution allows end-users to click on the star rating and be redirected to the Reviews Widget.To link the star rating to the Reviews Widget, do the following:

1. Replace the star rating code with the following code:

<a href="{{ product.url }}#yotpoReviewsWidget">
    <div class="yotpo bottomLine"
        data-product-id="{{ product.id }}"
        data-url="{{ product.url }}">
    </div> 
</a>

2. Add the following code on the reviews widget div:

id="yotpoReviewsWidget"

Depending on your eCommerce platform, the Reviews Widget code will look like a variation of the code below.

<!-- Yotpo - Reviews Widget --> 
<div class="yotpo yotpo-main-widget" 
 id="yotpoReviewsWidget"
 data-product-id="{{ product.id }}"
 data-price="{{ variant.price | money_without_currency }}"
 data-currency="{{ shop.currency }}" 
 data-name="{{ product.title | escape }}" 
 data-url="{{ shop.url }}{{ product.url }}" 
 data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}" 
 data-description="{{ product.description | escape }}"> 
</div>
<!--  End of Yotpo - Reviews Widget -->