Builder content link [image] Builder.io: Drag and drop page builder and CMS 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 Yot…

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

@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.

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.

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] Then I went to Data > Edit JS + CSS: [Screen Shot 2022-04-13 at 5.05.47…

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.

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] [Screen Shot 2022-11-15 at 9.50.45 AM] Also, I’m wondering how I could use a specific image for the stars, rather than just the star symbol?

Hi @mrnda_darkroom , You can try the below code //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.sta…

[image] manish-sharma: 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. } stat…

How to display Yotpo star ratings on Builder product page

Visual Editor Help

sarah April 13, 2022, 7:19pm 7

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:

Topic		Replies	Views
How to add star ratings in builder.io? Technical Questions styling	1	357	November 14, 2022
Rendering simple image for each product Shopify visual-editor , shopify , api	2	48	October 24, 2024
Builder IO with Shopify Plugin : can't show product images Visual Editor Help	2	144	April 25, 2024
Data binding works in builder but broken on deploy Technical Questions	3	286	April 8, 2024
React+shopify+builder General react	1	503	December 12, 2022

How to display Yotpo star ratings on Builder product page

Related topics