Shopify Product Reviews Integration guide

Here is the guide for Shopify Product Reviews Integration with Boost Product Filter & Search app.

In this article

About Shopify Product Reviews

1
App Information

  • Shopify Product Reviews allows you to add a customer review feature to your products. This provides a way for your customers to engage with you, as well as each other to encourage sales.
  • App details: https://apps.shopify.com/product-reviews

    • 2
    Shopify Product Reviews Integration Benefit

    • Display reviews/ratings in the product item.
    • Display a filter option by ratings/reviews.

    Demo of Shopify Product Reviews Integration

    Here is our customer's store with our app and Shopify Product Reviews (Shopify) integration.

    1
    Display reviews/ratings in the product item.

    Display reviews/ratings in the product item.

    2
    Display a filter option by ratings/reviews.

    We have not yet received any request to display a filter option by ratings/views with Product Reviews (Shopify). However, it should be exactly like in the screenshot.

    Display a filter option by ratings/reviews

    Instruction

    Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.

    Build Rating for the Product item

    1
    Edit your current theme.
    2
    Copy the following code snippet to your clipboard: 
    //For boost-pfs-filter.js
'<span class="shopify-product-reviews-badge" data-id="{{itemId}}"></span>' +

//For boost-pfs-filter-html.liquid
<span class="shopify-product-reviews-badge" data-id="[[itemId]]"></span>
    3
    Go to the boost-pfs-filter.js file, then find productGridItemHtml and paste the snippet to where you want the Ratings to appear, for example, under the product title:
    Shopify Product Reviews Integration
    If  productGridItemHtml variable does not exist, please check the file boost-pfs-filter-html.liquid:
    Shopify Product Reviews Integrate
    4
    Go again the boost-pfs-filter.js file, then paste the content below to the  ProductList.prototype.afterRender function. 
    if (window.SPR) {
    window.SPR.initDomEls();
    window.SPR.loadBadges();
}

    Build a filter option by ratings/reviews

    1
    Please go to Product Filter & Search -> Tool -> Metafields
    2
    Add the new metafield like the image below:
    Namespace: spr
    Key: reviews

    How to edit metafield to prepare for the integration

    3
    Build a filter option by ratings/reviews.
    Wait about 3 minutes for the syncs done before creating a filter option by review ratings: Go to the app's Homepage > Manage Filter tree > From a filter tree, click Add a filter option button > Choose Review Ratings > Click 2 Save buttons. Refer to  this article for more details.

    Still need help? Contact Us Contact Us

    Related Articles