Reviews

Integrate 3rd Party Review Apps like Yotpo, Growave, etc.

Reviews

1. All 3rd party reviews like Yotpo , Growave etc Reviews are based on Product Metafields.

2. To integrate them into the product card, first create the a Metafield Filter.

3. To create a Metafield filter go to Search Filter Merchandise -> Add Filter Option.

4. Create the Product Metafield, with appropriate Namespace and Key.

5. Pls ensure you choose - 'Metafield Display' for this type for metafield. This will ensure that this data point will be used only for Display Purposes.

6. Then copy the internal field name and update it in the Response Fields. (Search & Collections -> Filter Settings -> Extra Properties -> Response Fields).

7. Pls sync all the products to ensure the data for the new metafield is synced.

8. In case you find any issues during the integration, feel free to reach out to Frenzy Support.

Growave Reviews Example

Here we discuss the process of integrating Growave Reviews for a Store using Product Grouping.

1. Grouped Product reviews are stored under the Product Metafield - Namespace- ssw, Key- unite_review.

2. Individual Product reviews are stored under the Product Metafield - Namespace- ssw, Key- review.

3. Once the metafields are created in Frenzy Shopify portal, add the following code to the callback function- window.FrenzyProductGridChangeCallBack.

4. This will add Reviews next to Product Titles.

var reviewData = null;
  if(data.smf_unite_review){
    data.smf_unite_review =  JSON.parse(data.smf_unite_review[0]);
     reviewData = data.smf_unite_review;
  }else if(data.smf_review){
    data.smf_review =  JSON.parse(data.smf_review[0]);
    reviewData = data.smf_review;
  }
  if(reviewData!==null && reviewData.count > 0){
    var floo_avg = Math.floor(reviewData.avg);
    var iconreview ='';
    for(var i=1;i<=floo_avg;i++){
      iconreview += "<i class='ssw-icon-star'></i>";  
    }
    var ssw_rate_last_star = 5 - reviewData.avg;
    var ssw_y = Math.floor(ssw_rate_last_star);
    var ssw_x = reviewData.avg - floo_avg;
    var rclass = '';
    if(ssw_x > 0.74){
        iconreview += "<i class='ssw-icon-star'></i>";
    }
    else{
      if(ssw_x > 0.24){
         iconreview += "<i class='ssw-icon-star-half-alt'></i>";
      }else{
        if(ssw_x > 0){
             ssw_y = (ssw_y+1);
            // rclass= 'ssw-icon-star-empty';
        }
      }
    }
    for(var j=1;j<=ssw_y;j++){
           iconreview +='<i class="ssw-icon-star-empty"></i>';
    }
    var startHTML = '<div class="ssw-widget-avg-rate-listing ssw-stars ssw-stars-large " data-rate="'+reviewData.avg+'" tabindex="0" aria-label="Review listing, rating is: '+reviewData.avg+'">';
      startHTML += iconreview;
      startHTML += '<span class="ssw-review-count" tabindex="0" aria-label="'+reviewData.count+'"> ('+reviewData.count+') </span>';
    startHTML += '</div>';
    html.querySelector('.frenzy_product_title').insertAdjacentHTML("beforeend",startHTML);
  }

Yotpo Reviews Example

Here we discuss the process of integrating Yotpo Reviews.

1. Yotpo Reviews can be integrated customizing Frenzy Product Card HTML. Add the code below to the product card. (Reference)

<div class="frenzy_product_review">
      <a href="[[url]]#reviews" class="frenzy_reviews_link" aria-label="[[product_title]] review"></a>
      <div class="yotpo bottomLine" data-product-id="[[id]]" data-url="https://www.organicolivia.com[[url]]"></div>
</div>

1. Add the following code to Shopify theme.liquid file.

<script type="text/javascript">
  (function e() {
  var e = document.createElement('script');
    (e.type = 'text/javascript'),
      (e.async = true),
      (e.src = '//staticw2.yotpo.com/6RQJlFjAc4PLTlEIthkOGDNBacitsWWDG69ThtXp/widget.js');
    var t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(e, t);
  })();
</script>

window.frenzAfterApiCallBack = function(){
  setTimeout(function() {
    var api = new Yotpo.API(yotpo);
    api.refreshWidgets();
  }, 1000);
}