Docly

How to install review stars on the collection pages on Shopify’s newer and older themes ?

Estimated reading: 3 minutes 221 views

This tutorial explains how to display star rating in your collection page. Please follow the next steps to add the code snippet in your theme.

Add Star Rating Code Snippet

After adding star rating code snippet, your collection pages will display reviews rating with stars

1- Navigate to Online Store > Themes in your Shopify admin

First Go to Online Store

Choose the theme you want to add the code Snippet

2- Go to Edit Code from Action Menu

Click on Action Menu

Select Edit Code

3- Select theme.liquid file in Layout folder and paste the code below after the <head> tag

<script src=”https://app.apex-reviews.me/widgets/ApexCollectionBadges.js”></script>

Find and select theme.liquid file in Layout folder 

Add the code above here, below the <head> tag

4- Locate the code file in Snippets folder where the star rating code will be added

In Edit Code menu, go to Snippets folder. Since each themes has a different file name, please search for one of the following files: card-product.liquid or product-card-grid.liquid or product-card.liquid or product-grid-item.liquid or product-thumbnail.liquid or product-info.liquid file

Click on Snippets and find the one of the above mentioned code file

In Dawn theme please choose card-product.liquid file. For other themes please search the above mentioned file names in the Snippets folder.

In Dawn theme we found card-product.liquid file. But in Debut theme you need to select product-card-grid.liquid file

For example in Debut theme you need to select product-card-grid.liquid file

4- Copy and paste the following code below the code line including {{ product.title }}

Please find the code line containing { product.title } and add the following code after it:  <div class=”apex_badge” data-product-id=”{{ product.id }}”></div>

Find the code line containing { product.title }

And paste the code above here

Please note that in newer themes, the code we are looking for may have “card” prefix like this: {{ card_product.title }}

In this case the code we need to add should also include “card” prefix and the code will be like this:

<div class=”apex_badge”  data-product-id=”{{ card_product.id }}”></div>
 

In Dawn theme, the code line we are looking for is this. 

Please add the code above here just after the code line containing  {{ card_product.title }}

6- Save the file

We hope this tutorial was helpful. If you need help please contact us.

Leave a Comment