How to display Yotpo star ratings on Builder product page

Builder content link

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? :pray:

Code stack you are integrating Builder with
Shopify

Hi @oscarlora, you can follow the instructions here to use Yotpo with Builder: Yotpo app template - Builder.io

Hey @oscarlora!

You can calculate the star rating and display it dynamically with the Yotpo plugin (we should probably build this into the plugin) and I will mark this to write up in more detail tomorrow morning :memo:

See you then,
Logan from Builder.io

1 Like

@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 is what I’m referring to.

1 Like

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 an example.

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:

1 Like

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:

Then I went to Data > Edit JS + CSS:

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.