Product Reviews not displaying in desktop - working in mobile

New Member
2 0 0

We are currently using the shopify product reviews app but for some reason were having an issue where the review on products are not displaying in desktop or tablet sized screens, only in mobile.

I have taken a look at the code and can't find anything obvious wroong with it but windered if anyone had heard of this before and has any idea what's happened? Has worked before.

0 Likes
Highlighted
Shopify Partner
4 0 2

If someone else is looking for the same issue, we had a similar one (desktop instead of mobile). It turns out the SPR javascript code is looking for the first instance only of this div:

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

so if your theme insert it twice on the page (one div for the mobile only code, another for the desktop part, each one getting the

display: none

attribute to hide it on other devices), you'll need  to remove the hidden div that comes first on the document.

A sample code to fix it in my case (the desktop div was coming first on the document, so reviews were not shown on mobile). The breakpoint (here 500px) should match the one used for the CSS display rules.

<script> 
 if (window.innerWidth < 500) {
    document.getElementById('shopify-product-reviews').remove();
  }
</script>

 

0 Likes
Highlighted
New Member
1 0 0

I was trying to fix this issue, but it it seems that there is no mobile only code for our theme (Prestige).  Do you know of any solution to getting the reviews on the mobile version to show? Thanks.

0 Likes