If you’re on the hunt for ways to boost sales in your Shopify store (and let’s face it, who isn’t?) one of the best steps to take is to add Shopify Product Reviews to your storefront.
Luckily, Shopify has made the process super simple by offering a totally free product review application for users to download and utilize in their store.
But with this app can come some coding conundrums that can be tricky. Keep reading as we unpack some of the app’s big benefits, and also how to move through some potential coding challenges.
What are Shopify Product Reviews?
The free application from Shopify allows businesses to collect and share customer reviews on the product pages of their online store, including ratings and feedback that can be helpful to other consumers and to business owners themselves.
What are some of the benefits?
When it comes to the positive side of Shopify Product Reviews, the list of benefits is long. In addition to being a tool that can provide important and honest insight to consumers and businesses, the free app also:
- has a theme-friendly design that can match your store's look and feel.
- allows for easy, code-free customizations for layout, text, and colors.
- lets you take Bulk Actions to publish, hide, filter, and manage reviews quickly.
- uses CSV import and export to import/export your reviews in a spreadsheet.
- utilizes SEO-friendly review scores that you can add to your Google search results.
JSON coding challenges in Shopify Product Reviews
If you already use this app and have tried to display the reviews area on one of your product pages, it’s likely that you use the code:
|
{{ product.metafields.spr.reviews }} |
In order to indicate where you want the reviews area to appear.
What’s the problem?
One disadvantage of using this approach, is that the code injected by the reviews app on the page in this area, also includes the JSON that contains the “AggregateRating". We might want the “AggregateRating '' added to another area of the page, so we have to be careful of duplicating here.
In order to keep from displaying it twice, we’ll need to stop the JSON that’s automatically injected by the Product Reviews app from getting added by doing the following:
Use some liquid code to remove the JSON element from the reviews content:
|
{%- assign reviews_no_json = product.metafields.spr.reviews | split: '<script type="application/ld+json">' | first -%}<div id="shopify-product-reviews" data-id="{{product.id}}">{{ reviews_no_json }}</div>
|
This approach will prove successful for reviews added through liquid.
However, you might find that if you wait a few seconds after checking the page code when new content appears, the reviews app gets even more JSON injected on the page that includes AggregateRating. (For example, you have a section that includes some other recommended products for which you want to display the ratings.)
To ensure that these are automatically removed as soon as they’re added by the app, use some Javascript code:
|
myElement.attachEvent('DOMSubtreeModified', contentChanged);
|
This code watches the reviews containers for changes and takes action as soon as JSON gets added in these areas. You can use Javascript to remove it as soon as it is added, ensuring that the AggregateRating will only display where you want it, and not where the app is configured to add it.
Conclusion
As with all apps, there are benefits and challenges that come with Shopify Product Reviews. But don’t be overwhelmed by simple coding speed bumps, and stick with us for more tips and tricks for Shopify and beyond!
We Are Slicedbread.