Shopify: Installing the Yotpo Star Rating on Category and Collection Pages

The way you install the Yotpo star rating on your category or collection pages will depend on the type of theme you’re using. We support the following:

• Online Store 2.0 (including Dawn)
• Shopify themes prior to Online Store 2.0
• Specific Shopify themes

Good to know

• The star rating is shown only for products that have reviews.
• By default, the Yotpo star rating on category pages does not link anywhere. If you want to set up star rating as an anchor to product pages, please click here.

This is what the star rating on Category/Collection Pages should look like:

Standard Shopify themes

To add the star rating, follow the steps below.

1. Go to your Shopify Themes menu.
2. Click Actions > Edit Code.

For Online Store 2.0

1. Locate the file called card-product.liquid.
2. Inside <div class="card-information">, look for the following line of code:  <div class="card-information__wrapper">
3. Add the following code directly below this line:

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

For themes prior to Online Store 2.0

1. Locate one of the following file names:
   • product-grid-item.liquid
   • product-collection.liquid
   • prodct-card-grid.liquid
   • product-list-item.liquid

2. Look for this element: {{ product.title }}. If you don't find this exact code, then look for something similar containing title.
3. Add the following code directly below this line:

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

Specific Shopify themes

If the star rating shows the total number of reviews of your store instead of the product-specific number of reviews, please follow this guide.