How to package the Shopify Product Reviews app with your theme?

It has been proven time and again that reviews are a powerful driver of conversions for e-commerce stores.  For stores on the Shopify e-commerce platform, there are plenty of options via the Shopify App Store, that enable them to easily add an engaging Ratings and Reviews module. One of the most popular ones on that list, especially for stores that are just starting out, is Shopify’s very own Shopify Product Reviews(SPR) app.

SPR is a free app with easy customizations, theme friendly look-and-feel, etc. The app also keeps it SEO friendly, letting search engines pick up the product rating as part of organic search results, which is awesome! The layout blends in nicely with the site, and especially with mobile-heavy traffic, SPR has good support for responsive rendering by default.

While those are great positives, there is just one catch from a store owner’s perspective. The installation process is manual, and configuring the module requires editing the store’s HTML/Liquid templates, which is not something every store admin is comfortable with. Further, Shopify supports a number of different layouts/themes where the steps to configure an add-on module starts to become a very tedious process because of how specific the instructions have to be. Suffice it to say there’s enough complexity buried in there to intimidate most store admins that are new to Liquid. As a theme developer, integrating SPR into your theme can make life easier for store admins, and can make for a compelling selling point for your theme given the extra magic of the seamless “native” integration of a reviews module. This blog post outlines the steps needed to accomplish that integration as a theme developer. The basic integration has two parts

  1. Product details
  2. Collection pages

Product details

In your templates/product.liquid or where it is expanded

  • For a badge next to the product title, include the below snippet
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
  • Include the below snippet to show detailed reviews, usually right after the product description container
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  • If you have a tabbed layout like “Details”, “Specifications”, “Reviews”, follow the same steps as above, and paste the snippet where you would like it to appear

Collection pages

In your product-grid-item.liquid or where it is expected, add badge metadata to the product, usually below the product title and price,

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

SPR batches the data fetch for the collection to a single call, making it more efficient, for eg: if the collection has 10 products, all 10 product badges are fetched in a single call

With the above sections, a simple integration can be enabled by the store admin by just installing SPR on their store, or if they are switching between themes and already have SPR, they don’t have to touch a thing. That really makes it clean and simple to manage.

Advanced integration

For more mature, higher-end stores, a simple integration may not be sufficient. These stores usually have a lot of dynamic content that they leverage third party providers for, to try and create a differentiated experience for their users. In some cases, stores will require the rendering to be optimized based on the current section the user is viewing, etc. so load only what is required.

You can leverage the browser’s DOM event layer to integrate into the theme, and render the module in dynamic fashion by adding a refresh utility to SPR in the theme nativelyAdd the JS below to your theme.js or app.js or main.js as needed.

(function(){
  // Added a custom event
  $(document).bind("theme:spr:refresh", function(){
    if(window.SPR){
      // refresh badges and product section
      window.SPR.initDomEls();
      window.SPR.loadBadges();
      window.SPR.loadProducts();
    }
  });
  //The event can be triggered from any function as needed by using below code
  //$(document).trigger("theme:spr:refresh");
})();

With the above utility set, here’s how you can enable the more advanced integration scenarios:

  1. Mobile Heavy Audience
    Needless to say, a heavy chunk of e-commerce users are on a mobile device, so mobile-first rendering principles have to take priority. The product rating and reviews section are highly critical for mobile users, as this helps make the key decision to go forward in their journey. Though SPR renders nicely on the mobile, there are some mobile optimizations that can be provided from the theme. Eg: One aspect of the case is the first fold load experience. Lets take products and collections view. Increase the speed of your rendering by reducing/removing unused network calls, and delay rendering until the content is near the visible viewport

    • Collections view – On a typical mobile device, there are at most 4-6 products in the first fold, and the collection page itself can have any number of products. To give a fast responsive experience, auto-load only the top 4-6 products’ badges and then throttle the load for the next batch of products. This effectively reduces the number of network calls made, saving both bandwidth and rendering time.
      {% for product in collection.products limit:4 %}
        {% include 'product-grid-item', autorating: true %}
      {% endfor %}
      {% for product in collection.products offset:4 %}
        {% include 'product-grid-item', autorating: false %}
      {% else %}
        <div class="grid-item">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endfor %}
      <span class="shopify-product-reviews-badge" data-{%if autorating %}id{% else %}productid{% endif %}="{{ product.id }}"></span>
      
      // delayed for mobile - collections
      $(document).ready(function(){
        function loadAllRatings() {
          $(".shopify-product-reviews-badge[data-productid]").each(function(){
            $(this).attr("data-id", $(this).attr("data-productid"));
          });
        	$(document).trigger("theme:spr:refresh");
        }
        var isMobile = $(window).width() <= 480;
        if(isMobile){
          window.setTimeout(loadAllRatings, 2000);
        } else {
          loadAllRatings();
        }
      });
    • Products view – On a typical mobile device, the first fold shows important product information like title, average rating, vendor and a featured image. The product reviews and description are reached after a scroll. To give a fast responsive experience, auto-load only the product badge. The reviews section can be loaded via a throttle. This effectively reduces the network calls made and thereby rendering time is saved for immediate requirements.
      <div id="shopify-product-reviews" data-id="{{product.id}}" data-autoload="false">{{ product.metafields.spr.reviews }}</div>
      // delayed for mobile - product
      $(document).ready(function(){
        function loadProductReviews() {
          $("#shopify-product-reviews[data-autoload='false']").each(function() {
            $(this).removeAttr("data-autoload");
          });
          $(document).trigger("theme:spr:refresh");
        }
        var isMobile = $(window).width() <= 480;
        if(isMobile) {
          window.setTimeout(loadProductReviews, 1000);
        } else {
          loadProductReviews();
        }
      });
  2. Dynamic rendering/loading reviews

Scrollspy-based loading of content, where the loading only happens when the user’s scroll is near the content can be an effective technique in creating the perception of a very fast and responsive experience on any device.

  • Scroll spy on Collections

    // scroll spy - collections
    (function() {
      function loadNextBatchReviews() {
      	$(".shopify-product-reviews-badge[data-productid]").slice(0, 6).each(function(){
          $(this).attr("data-id", $(this).attr("data-productid"));
        });
      	$(document).trigger("theme:spr:refresh");
      }
      $('#myScrollspy').on('activate.bs.scrollspy', loadNextBatchReviews);
    })();
  • Scroll spy on Product
    // scroll spy - product
    (function() {
      function loadProductReviews() {
        $("#shopify-product-reviews[data-autoload='false']").each(function() {
          $(this).removeAttr("data-autoload");
        });
        $(document).trigger("theme:spr:refresh");
      }
      $('#myScrollspy').on('activate.bs.scrollspy', loadProductReviews);
    })();

    Other Integrations

  1. Dynamic content
    For dynamic content, after the templates are rendered and added to the DOM, call at the end of all rendering. Call $(document).trigger("theme:spr:refresh"); as needed.
    Eg: , AJAX based pagination, search results, other dynamic widgets, and integrations with MVX frameworks like angularjs, knockoutjs, ember, etc. Include the badge and product review snippets where needed in the template
  2. Third party content
    The third party app can integrate themselves with the theme natively by adding the SPR HTML templates and calling $(document).trigger("theme:spr:refresh");  at the end of their widget load.
    Eg: Personalization engine content widgets, recommendations

When SPR is not installed, the above code is just a no-op, or it can be included via a theme setting using conditional liquid include. Doing this will improve the ease-of-use for your theme and make it possible for other third party apps to more seamlessly integrate their offering for the store.

The idea here is that when the store using your theme installs the Shopify Reviews app, it would just magically work out of the box; they would just see everything setup nicely without lifting a finger, and that can make for a delighted customer 🙂 We wouldn’t recommend doing this native integration for most apps, but given this is a Shopify app, you can certainly consider making the exception. We hope you found these tips useful, and we’d love to hear any feedback/thoughts you have on how we can make this better. Do let us know in the comments on how this worked for you if you tried it out, or if you have any modifications you would like to see

Recommended Posts

Leave a Comment