Put Product Reviews under Product recommendations

Solved
Highlighted
Tourist
8 0 1

Hi, I would like the actual reviews to be displayed at the very bottom, right under product recommendations and keep the review form right under my description on product page. Not the two under my description.

Can someone please help me with that? Here's a link to my product page: https://fineforeal.com/collections/baddies-for-life-bodysuits/products/baddie-for-life-jumpsuit

Thank you

 

Screenshot 2020-01-19 at 23.41.44.png

0 Likes

Success.

New Member
2 1 1

Like this?

 

Screenshot_2020-01-19 Baddie For Life Jumpsuit.png

1 Like
Highlighted
Tourist
8 0 1

Wow yes this is exactly what I am looking for !


@jt2190 wrote:

Like this?

 

Screenshot_2020-01-19 Baddie For Life Jumpsuit.png


 

0 Likes
Highlighted
New Member
2 1 1

Well, I achieved that with a hack in JavaScript, by adding some code to product-template.liquid, around line 250 of the default Debut theme:

 

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>

  <!-- BEGIN Move Product Reviews Below Suggestions -->
  <script type="text/javascript">
   var mainContentEl = document.getElementById('MainContent')
   var sprContentEl = document.getElementsByClassName('spr-content')[0]

   sprContentEl.parentElement.removeChild(sprContentEl)
   var pageWidthEl = document.createElement('DIV')
   pageWidthEl.className = 'page-width'
   pageWidthEl.appendChild(sprContentEl)
   mainContentEl.appendChild(pageWidthEl)
  </script>
  <!-- END Move Product Reviews Below Suggestions -->
{% endunless %}

Why do I call this a hack? Because I'm changing the display of customer reviews in a way that isn't supported by the Product Reviews app. This means that a future update of Product Reviews could break this code.

As you may have already guessed, the Product Reviews app wasn't designed to separate the display of the Reviews from the overall Customer Rating like this without serious customization. (I'm pretty new to Shopify, so I'm still trying to learn how to customize things.)

If you decide to try this, note that I haven't tested this extensively. I'd be careful to make sure that this works for mobile users and for product pages that don't have any reviews.


 

0 Likes