How can I make the Shopify Product Reviews rating stars clickable?

[konsequent]

Hi!

I have been trying to make the rating stars created by the Shopify Product Reviews app into a clickable link that leads directly to the product reviews section on the same page but without success.

I have tried many different versions of the href link but nothing seems to work.

Could somebody maybe point me in the right direction?

We are using the Dawn Theme by Shopify and this is an example product page: https://www.konsequent.co.at/products/bio-disteloel-seife-100-g-kaltgeruehrt

The code for the rating stars (that I want to make clickable) is:

And the code for the product reviews section (that I want to be the link target) is:

{{ product.metafields.spr.reviews }}

We have modified the code to change the position of the product reviews section from below the product description to the left of the product description. Not sure whether that might cause any problems.

Thank you so much in advance for any advice.

Fiona

[nicotroplent]

Hi Fiona, I was able to give the text span the desired link from my browser playing around with the DOM. You can include an anchor tag around the span caption of the rating element directing to the #shopify-product-reviews id. Like below:

{{Rating Star Code e.g 4 reviews}}

Here are screenshots for your convenience below.

If I may, I would suggest implementing smooth scrolling as well by including this snippet of code at the bottom of your base.css file in your assets folder (Online Store > Theme > Edit Code > Assets > base.css) .

html {
  scroll-behavior: smooth;
}

Nico

[konsequent]

Hi!

Thank you so much for your reply!

I integrated your suggestion regarding smooth scrolling, thank you for the tip!

The other code is more difficult … on the one hand I am not sure how to execute it and on the other hand I feel like this code would only work for this specific product page and only as long as we have exactly 4 reviews? Or am I missing something? Sorry if the questions seem stupid, my coding skills are basic at best

I would like to have a code that applies to all product pages on our site and links to the corresponding reviews independently of the number of reviews at any given moment.

Would that work with your code?

The suggestion I keep finding in tutorials is placing this code in the main-product.liquid file: or variations of it but none of it seems to work for us. In most cases, that just makes the star rating disappear all together.

Thanks so much for your efforts!

Fiona

[nicotroplent]

Hello Fiona, happy to help :). The code should be dynamic and work with all product pages. I have some free time; if you provide me with access at nicolas@ecomspaces.com, I can take a look and build that feature for you.

Refer to this video for staff account access. https://www.youtube.com/watch?v=1xqV4ZLHhgc

Best,

Nico

[designpassion]

Dear Nico, thank you so much for working out the solution. I also have the dawn theme, and am trying to see where I shall insert your snippet. In the main-product.liquid section, I identified the following section. Where would it be inserted? Also shown on the picture.

Thank you so much for your help. Best, Ana

{%- when ‘rating’ -%}
{%- if product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max -}}

({{ product.metafields.reviews.rating_count }}) {{- product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}