Star rating section product page

Store Design
, ,

Topic summary

A user seeks help recreating a star rating display from a reference website for their Shopify store (Ciara-boutique.com). The desired design shows star icons with text like “Beloved by 1,700+ people” on the product page.

Key findings:

  • The reference site originally used Trustpilot Reviews but has since switched to static HTML code
  • Multiple solutions were proposed:

Recommended approaches:

  1. Install a review app (Judge.me Product Reviews or Loox)
  2. Add custom HTML/CSS code via Custom Liquid block in the product page customization

Implementation provided:

  • One responder shared complete HTML/CSS code that can be added through: Online store → Customization → Product page → Add custom liquid block
  • The code creates a clickable star rating display with customizable text
  • Screenshots demonstrate the working implementation

The discussion remains open with multiple experts offering assistance, though a complete code solution has been provided for immediate use.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi! Could some one help me create exactly this:

image
image1043×488 40.8 KB

It’s on this website: Ellie - Breathable Cotton Hemp Summer Dress – Sophie's Boutique

My store is: Ciara-boutique.com

Looking forward hearing from you!

2

Hello, I am happy to assist you in it

5

@Rickyxane - looks like the section is been added via an app, so need to check which rating app can be used and then put its code into the theme files to have it like above, I can assist you with that.

6

Hi @Rickyxane,

I checked and it was using Trustpilot Reviews to generate this, but it seems they disabled it and now it’s just HTML code.
If you want, you can use the review app it will show well, refer: Judge.me Product Reviews App, Loox ‑ Visual Product Reviews,…
If I helped you, then a Like would be truly appreciated.

7

Hi @Rickyxane ,

Online store → Customization → Product page → Add custom liquid block
Either add this code, or install the Judge.me app.

<a href="#aus-tp-slider" class="reviews_stars">
<style>
  .reviews_stars {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #000000;
  }

  .reviews_stars .stars {
    display: flex;
    gap: 1px;
    max-width: 90px;
  }

  .reviews_stars .ratings span {
    white-space: nowrap;  
  }
  
</style>
  <div class="stars">
    <svg class="star-svg" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 0H0V32H32V0Z" fill="#E3E3E3"></path>
      <path class="star-indicator" d="M32 0H0V32H32V0Z" fill="#00B67A"></path>
      <mask id="mask0_19_10" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
        <path d="M27 5H5V27H27V5Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0_19_10)">
        <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="white"></path>
      </g>
    </svg>
    <svg class="star-svg" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 0H0V32H32V0Z" fill="#E3E3E3"></path>
      <path class="star-indicator" d="M32 0H0V32H32V0Z" fill="#00B67A"></path>
      <mask id="mask0_19_10" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
        <path d="M27 5H5V27H27V5Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0_19_10)">
        <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="white"></path>
      </g>
    </svg>
    <svg class="star-svg" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 0H0V32H32V0Z" fill="#E3E3E3"></path>
      <path class="star-indicator" d="M32 0H0V32H32V0Z" fill="#00B67A"></path>
      <mask id="mask0_19_10" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
        <path d="M27 5H5V27H27V5Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0_19_10)">
        <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="white"></path>
      </g>
    </svg>
    <svg class="star-svg" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 0H0V32H32V0Z" fill="#E3E3E3"></path>
      <path class="star-indicator" d="M32 0H0V32H32V0Z" fill="#00B67A"></path>
      <mask id="mask0_19_10" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
        <path d="M27 5H5V27H27V5Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0_19_10)">
        <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="white"></path>
      </g>
    </svg>
    <svg class="star-svg" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 0H0V32H32V0Z" fill="#E3E3E3"></path>
      <path class="star-indicator" d="M32 0H0V32H32V0Z" fill="#00B67A"></path>
      <mask id="mask0_19_10" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
        <path d="M27 5H5V27H27V5Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0_19_10)">
        <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="white"></path>
      </g>
    </svg>
  </div>
  <div class="ratings">
    <span>Beloved by 1,700+ people</span>
  </div>
</a>

Thanks!

image
image1365×633 113 KB

image
image1365×631 133 KB