---
title: "Setting Star Rating as an Anchor on Category Pages"
slug: "setting-star-ratings-on-the-category-page"
tags: ["Reviews ", "Shopify Plus", "Shopify", "Adobe Commerce (Magento)", "WooCommerce", "BigCommerce", "Volusion", "Salesforce Commerce Cloud", "Custom"]
updated: 2024-04-01T23:12:06Z
published: 2024-04-01T23:12:06Z
canonical: "support.yotpo.com/setting-star-ratings-on-the-category-page"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Free, Starter, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

			

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.

	
	**Please note:**
	

		

- This article explains how to customize a Yotpo feature using external code
- The code is generic and provided as is. Implementation or modification of this code is not supported by Yotpo
- We recommend using the services of a developer for the purpose of integrating this customization into your website

	

	
	Is this article for me?
	If you are using the new Star Rating widget, see [Customizing the Star Rating](/v1/docs/customizing-the-star-rating-30-to-shopify).

## 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.

	

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

### Platform-specific examples

**Shopify**

	

	

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

**BigCommerce**

	

	

<a href=" %%GLOBAL_ProductLink%% "> <div class="yotpo bottomLine" data-product-id="%%GLOBAL_ProductId%%" data-url="%%GLOBAL_ProductLink%%"> </div> </a>

**Other platforms**

	

	

Replace the anchor tag's href property with the relevant product-URL variable in the Star Rating code.

## 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:

	

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

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

	

```markup
id="yotpoReviewsWidget"
```

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

	

```markup
<!-- 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 -->
```