Adding Shopify review Star rating into product title

Highlighted
Tourist
10 0 7

Hi All,

Is there a way of isolating just the starred rating code snippet from Shopify reviews so I can add it just under the product title?

I'm a newbie to shopify and have tried to search for the shopify reviews source code but cant find it, any tips here as well? All I can find is an exmaple of the Final HTML Markup

Many Thanks,

 

0 Likes
Highlighted
Tourist
10 0 7

Hi All,

Just worked it out. If anyone else wants to know, paste the following code:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

in product-template.liquid (for section themes) or product.liquid depending under this code snippet

 <h1 itemprop="name">{{ product.title }}</h1>

Cheers all,

4 Likes
Highlighted
Excursionist
37 0 5

This worked for me. Thank you! 

0 Likes
Highlighted
Excursionist
39 1 2

Not worked for me. Can you help? Have Debut Theme!

0 Likes
Highlighted
New Member
1 0 0

worked perfectly thanks

0 Likes
Highlighted
New Member
1 0 0

Its complicated enought for me to install the app. So it doesn't work for me

0 Likes
Highlighted
Shopify Expert
48 2 7

Hi @Steve_Kinder 

 

Thanks For Reaching out to Shopify Community 

 

You can try this app https://apps.shopify.com/product-reviews

for integrating reviews on your Shopify store. Once you install the app, there are certain set of instructions to be followed, provided in the app. Just follow that, and then it's all good to go.

However, some updates in code is required since you need your review to come near your product title. 

1) Go to theme, then edit code, after that go to section, find product-template.liquid file, in that file find {{product.title}}, paste the snippet code related to review  (this code is from the app i mentioned above) to search for the shopify reviews source code but

 

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

2) After that, below price, star rating must be visible. Go to snippet of your theme, over there you will find product-grid-item.liquid file, below product-price , you need to paste the following code 

 

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

 You can also schedule one to one appointment with me by shooting an email on arpansrivastava@cedcommerce.com. I would recommend you to visit the resource related to development of shopify store, there are lot of things which seller need to take care about before and after development. As you have already provided you the solution, this is other method, it might work for some of the sellers.

 

Regards


 

Arpan Srivastava
Store Analyst

Skype id-live:danbakker_2

Want to Increase your Sales on Shopify?
Now do connect with me on group also https://www.facebook.com/groups/Shopifysellershub/

Shopify Expert
1 Like
Highlighted
Tourist
7 0 5

2) After that, below price, star rating must be visible. Go to snippet of your theme, over there you will find product-grid-item.liquid file, below product-price , you need to paste the following code 

 

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>


 


I'm looking in Snippets and I'm not finding product-grid-liquid file, I'm using Debut theme.   I got it to where you can leave reviews but I want to get the star ratings under the titles too. Any suggestions?

1 Like
Highlighted
Tourist
3 0 1

@peachfect wrote:

2) After that, below price, star rating must be visible. Go to snippet of your theme, over there you will find product-grid-item.liquid file, below product-price , you need to paste the following code 

 

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>


 


I'm looking in Snippets and I'm not finding product-grid-liquid file, I'm using Debut theme.   I got it to where you can leave reviews but I want to get the star ratings under the titles too. Any suggestions?


I also use the debut theme.

I paste it in the product-template file, just below the line 106 :

 

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
<div class='evm-reviews-widget' id='evm_reviews_widget' data-product-id='{{ product.id }}'></div>

 

And it works. Hope it helps.

 

EDIT : Oh wait, what I just explained is just to display the stars under the product name, only on the product page.

If you want to display the stars on a featured collection on the home page, you have to add it in the snippet. For debut theme, it's product-card-grid.liquid. Find the line 35 and add the code below. It should look something like this :

 

 {% include 'product-price' %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

I just shared what it worked for me, but I'm far from being a coder, I had zero code notion before starting on shopify so just be careful with my advices and pay attention when changing the code ;)

0 Likes
Highlighted
New Member
1 0 0

Worked for me! Love the result.

 

Just wondering, does anyone know how to display a review badge with product titles on category/collection pages?

0 Likes