Jump to content

Adding HTML code for 'star rating' on individual product pages

Recommended Posts

Site URL: https://www.laviedavi.com/store/the-messier-42-nebula-stud-earrings

Hi all

I am trying to add some code onto my site on each product page that will show a 'star rating'. I have a piece of code from Yotpo that I am currently using on each product page (via additional information and adding a code block in the footer) to allow customers to leave reviews on individual product pages. However, now I am trying to add a star rating widget (also via Yotpo) next to the product title (i've just messily circled the area in the attachment). The code i have from yotpo is " <div class="yotpo bottomLine" data-yotpo-product-id="LVDA0022"> </div> ". I am a newbie to coding unfortunately, so it's probably very far out of my reach, but i was wondering if anyone knows if a) this is possible and b) how i can do it?

What i have tried so far is the 'settings - advance - page header code injection' but of course that just results in the star rating ending up at the top of the page.

Any help will be really appreciated! The page i am using as my first attempt is: https://www.laviedavi.com/store/the-messier-42-nebula-stud-earrings230783694_Screenshot2020-10-03at15_09_591.thumb.png.10773d46d3d759e63e3ee8632931ac2b.png

The SKU is 'LVDA0022'. Please help! I emailed Squarespace but rightfully so they did advise they're unable to assist with any coding that's not from the platform.

Thanks in advance!

Avi 

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

@Brianay Please post the URL to a page where you have the widget. Also describe where you want the widget to end up.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@Brianay It looks like you have the full review widget installed. Now you need to add the code for the Yotpo Star Rating bit.

I'm going to talk in generalities as we don't have all the pieces with which to work. With the other bit of code installed it should be possible to use some Javascript to move it up under the price.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Before we can talk about the Javascript to move the star rating I think you need a second piece of code from yotpo which I think you can read more about at < https://support.yotpo.com/en/article/generic-other-platforms-installing-the-yotpo-star-rating >. It is a different piece of code than the one you already have. I think it's function is to give you some stars and a review number count only. In addition if a user clicks on it, it takes you to the part of the page with the big review widget you already have installed.

The code you already have is the big review widget they put at the bottom of a product page. To move all that up under the price would be user unfriendly.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 months later...
  • 1 month later...
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.