ShopperApproved collects store and product ratings from your customers. They have documentation on how to get the service working on your website but do not have the specific details for implementing in Shopify stores. So here I've got the details for that.
Overview
Getting Shopper Approved up on your site is a lengthy process. One of the benefits of Shopper Approved is that Google sees them as a trusted provider of reviews. So their reviews will show up in your search results, which can look like this:
Let's break down the above review information. The first result is for a Collection page. The review information shown there is for the store level reviews. You can see a total of 6,570 store reviews. The second result is for a product page and is showing the reviews for the product. There are 20 of them. And its only coincidence that the store and product have the same 4.8 review score.
That information shows up because we're adding review structured data to each page. And each page should only have one set of review data on it, so we'll be specifying which pages get store reviews and which pages get product reviews.
* * * Disclaimer * * *
I'll be providing lot's of code examples below as I think showing working examples is a quick way to help others figure it out. But this code won't work as is. You'll need to put your account information and store URL in places. And this code may also need to be adjusted for your theme.
Also, you'll need to work with Shopper Approved support to get this fully set up in your store. Many settings and CSS are controlled on their servers which you don't have access to.
Checkout Code
The first step is to add the Shopper Approved script to your checkout that will kick off the review process for that order. Here's the generic code that Shopper Approved provides to be added to the Shopify Thank You page. This script is added through the Shopify Admin under Settings > Checkout. There's an input box for Additional scripts.
The XXXXX's are placeholders for you to put your Shopper Approved account ID.
And here's the actual code to use after it has been edited for Shopify's liquid code. What's being added is the Shopify code for passing on the order, product and customer information to Shopper Approved.
Theme.liquid
The Shopper Approved script needs to be added to Theme.liquid. Also notice the CSS within the Style tages. Its here because that CSS needs to come after the Shopper Approved JS file on the page. The theme and other CSS files are loaded much earlier in the page so the CSS can't be added there. The Shopper Approved section in theme.liguid looks like this:
Product Page
I prefer the product review information to be shown to consumers in two places. The first is the rating which just shows the stars. And I put that near the top with other essential product information.
And the second is a listing of all of the reviews further down on the page so consumers can read the details of what other customers thought about the product.
And I have the rating section link to the review selection, so consumer can quickly get to that detail if they desire. To do this, I create two snippets and add references to them in the product template where I want them placed.
Here's the Product Stars snippet:
And the Product Reviews snippet:
Collection Pages
You can add a product rating to each product on collection pages. It looks like this:
Here's the code you need to add in whatever section/snippet is listing out your products.
Review Page
Google best practices recommend a page on your site will all of your reviews. This one is pretty easy. Create a page in Shopify and the following code (with your store's info) right into the page's Content using the Show HTML function.
Footer
In the footer, I have the Store Reviews widget which looks like this:
And I've also put the code in that gives the structured data for reviews. Notice the logic that doesn't put the structured data on product pages and the Store Reviews page as structured data is added to those pages in other elements.
Conclusion
Adding Shopper Approved reviews to your Shopify store is a lot of manual steps and you'll need to be comfortable in Liquid. But doing so provides valuable snippets in your search results.
Hope this helps!