Product reviews

[timwf]

Hey! Anyone have any tips for custom built Product reviews UI?

I'm working from a design so cutomising Shopifys Product Reviews markups CSS is just not cutting it!

Is there a simple way of accessing the data in the metafield created by SPR? And using it to create my own mark up including the submit form? Or am I barking up the wrong tree??

[timwf]

I've actually gone for..

    const reviews = $('.spr-review')
    let arr = []

    if(!reviews.length){
      productReviews()
    }else{
      $(reviews).each(function(){
        let name = $(this).find('.spr-review-header-byline strong:first-of-type').text();
        let date = $(this).find('.spr-review-header-byline strong:last-of-type').text();
        let body = $(this).find('.spr-review-content-body').text();
        let numStars = $(this).find('.spr-starratings:eq(0)').attr("aria-label").charAt(0);
        arr.push({name: name, date: date, body: body, numStarts: numStars});        
      })
      console.log(arr);
    }

The productReviews function is on a setTimeout and loops 10 times in 1s intervals to check if product reviews are there and loaded... Not ideal as Shopify could change their markup at anytime but its working..  Shame they don't have an API for reviews!

Any other ideas would ve appreciated!!!

[Sensei]

Why take the long way with codes?

I have been using Videowise for quite some time now. It's simple and easy to set up product reviews. Also, I feel since videos are becoming a go-to content format for a lot of customers, it's better to add video reviews on your product page than text reviews.

This app has been doing all the legwork for me, from fetching the videos from channels like Youtube, Instagram, TikTok to adding them right beside my product description. Showing video reviews also helps your customers to make better purchase decisions. 🙂

I have used Shopify's product review for a couple of months and didn't find it appealing. Videowise is doing a good job for me!

I think this should be a good alternative for you too.