# How to display Yotpo star ratings on Builder product page

**URL:** <https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028>\
**Category:** Visual Editor Help\
**Created:** [April 13, 2022, 12:36am UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028 "2022-04-13T00:36:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![oscarlora](https://avatars.discourse-cdn.com/v4/letter/o/ce73a5/32.png) [@oscarlora](https://forum.builder.io/u/oscarlora)\
**Post date:** [April 13, 2022, 12:36am UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/1 "2022-04-13T00:36:19Z")

</div>

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/9bcfbd836cb84bf588be1225fb8e4dd1?previewProduct=gut-care)**
>
> Build and optimize digital experiences for any tech stack, visually.

**Builder public api key**  
a03f2562d472492f9b4fc2fc86ecc5ba

**What are you trying to accomplish**  
I want to display Yotpo star ratings on the product page I’m building with Builder.

I copied the code from Yotpo and pasted it in a custom code block but it’s not showing up. Is there anything I’m missing?

@logan Can you help here? 🙏

**Code stack you are integrating Builder with**  
Shopify

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [April 13, 2022, 12:41am UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/2 "2022-04-13T00:41:43Z")

</div>

Hi @oscarlora, you can follow the instructions here to use Yotpo with Builder: [Yotpo app template - Builder.io](https://www.builder.io/c/docs/yotpo-app-template)

---

<div class="post-metadata">

**Author:** ![oscarlora](https://avatars.discourse-cdn.com/v4/letter/o/ce73a5/32.png) [@oscarlora](https://forum.builder.io/u/oscarlora)\
**Post date:** [April 13, 2022, 3:25am UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/5 "2022-04-13T03:25:01Z")

</div>

@logan Thank you, I really appreciate the detailed instructions you’re sending. I’m sure others that are trying to implement these things will find it useful.

Just so it’s clear, [this](https://paste.pics/88488a1a2c67982d5b4043690e744f19) is what I’m referring to.

---

<div class="post-metadata">

**Author:** ![oscarlora](https://avatars.discourse-cdn.com/v4/letter/o/ce73a5/32.png) [@oscarlora](https://forum.builder.io/u/oscarlora)\
**Post date:** [April 13, 2022, 3:26am UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/6 "2022-04-13T03:26:22Z")

</div>

Thank you for replying Sarah, I tried with the integration but that’s for the reviews. What I’m trying to display is the star rating that usually goes close to the product title and description. [Here’s](https://paste.pics/88488a1a2c67982d5b4043690e744f19) an example.

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [April 13, 2022, 7:19pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/7 "2022-04-13T19:19:50Z")

</div>

Hi @oscarlora, thanks for clarifying! One way you could do this is by placing a text block within the native embed reviews wrapper layer, and binding the text to the code below:

 ![yotpo stars code](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f80a589eae82e51a559ce0fddad3eda77859dd53.png)

---

<div class="post-metadata">

**Author:** ![oscarlora](https://avatars.discourse-cdn.com/v4/letter/o/ce73a5/32.png) [@oscarlora](https://forum.builder.io/u/oscarlora)\
**Post date:** [April 13, 2022, 10:07pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/8 "2022-04-13T22:07:09Z")

</div>

Thank you Sarah, how do I do that? In Data \> Edit content JS + CSS and replace the JS there?

I tried doing that and it’s not displaying the stars in the text block.

Here’s the block:

 ![Screen Shot 2022-04-13 at 5.05.10 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b4c3ccc2d8b7f33e93ca2ae659447abc5f197217.png)

Then I went to Data \> Edit JS + CSS:

 ![Screen Shot 2022-04-13 at 5.05.47 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/dd6f1a035fcbeb2d67230998abbbad8281fd2afa.jpeg)

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [April 13, 2022, 10:32pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/9 "2022-04-13T22:32:50Z")

</div>

H @oscarlora, you can select the text box you added and add a new binding in the data tab under “Element data bindings”. You can set the “Get” field to “Text”, select the “edit code” button in the “from” field, and then paste this code there.

---

<div class="post-metadata">

**Author:** ![mrnda\_darkroom](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mrnda\_darkroom](https://forum.builder.io/u/mrnda_darkroom)\
**Post date:** [November 15, 2022, 5:51pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/10 "2022-11-15T17:51:46Z")

</div>

Hi Sarah! I’ve done this but I’m not seeing the stars appear on my page. Can you assist?

 ![Screen Shot 2022-11-15 at 9.50.20 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/12026c6573d3ec952dd19afe58576e51d9bf7fd1.png)  
 ![Screen Shot 2022-11-15 at 9.50.45 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4f7bb0894975234c2463ab6018fc614cc3d3f59e.png)

Also, I’m wondering how I could use a specific image for the stars, rather than just the star symbol?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 18, 2022, 7:22pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/11 "2022-11-18T19:22:06Z")

</div>

Hi @mrnda_darkroom,

You can try the below code

```auto
//ratings could be a dynamic data object or an array 
let itemsLen = state.reviews.length;
for(let i = 0; i < itemsLen; i++){   
  let rating_stars = [];   
  for(let j=0; j< parseInt(state.reviews[i].score); j++){     
    rating_stars[j] = state.star_img; // state.star_img can be a star image or any review.    
  }   
 state.reviews[i].score = rating_stars;
}

```

Let us know if you have any further questions. Thank you!

---

<div class="post-metadata">

**Author:** ![mrnda\_darkroom](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mrnda\_darkroom](https://forum.builder.io/u/mrnda_darkroom)\
**Post date:** [November 23, 2022, 4:33pm UTC](https://forum.builder.io/t/how-to-display-yotpo-star-ratings-on-builder-product-page/2028/12 "2022-11-23T16:33:01Z")

</div>

> [@manish-sharma](#):
>
> ```auto
> let itemsLen = state.reviews.length;
> for(let i = 0; i < itemsLen; i++){   
> let rating_stars = [];   
> for(let j=0; j< parseInt(state.reviews[i].score); j++){     
> rating_stars[j] = state.star_img; // state.star_img can be a star image or any review.    
> }   
> state.reviews[i].score = rating_stars;
> }
> 
> ```

Hi @manish-sharma, thank you.

This didn’t work either. See below:

 ![Screenshot 2022-11-23 at 8.31.23 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5d59596ac84c4af6186ba4182f56cf34cc3a2aac.png)

See content link here:https: [//builder.io/content/0c3f9ed8408943d0896cb21056def2f2/edit?activeDesignerTab=3&selectedBlock=builder-0156cdd015a2483aafb25c632b73fc21](https://builder.io/content/0c3f9ed8408943d0896cb21056def2f2/edit?activeDesignerTab=3&selectedBlock=builder-0156cdd015a2483aafb25c632b73fc21)