Growave Integration Guide

Growave is the all-in-one marketing platform that empowers your Shopify store with product reviews, wishlists, loyalty programs, referrals, social login, and UGC. Here is the guideline to make Growave Integration with Boost Product Filter & Search app work.

In this article

About Growave

1
  App Information

2
  Growave  Integration Benefit

  • Display a wishlist heart icon as well as reviews in product items.
  • Build the filter by rating 

Demo for Growave Integration

Here are some of our customers' stores with our app and Growave integration.

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.

Please make sure that both apps are installed on the selected themes or the integration might not work correctly.

Build Wishlist for the product items

1
Edit your current theme.
2

Please go to the collection-template.liquid in your current theme

Add the fave label in the variable boostPFSThemeConfig like the image below:

{% assign customer_locale = shop.locale | prepend: 'lang_' %}
{% unless shop.metafields.ssw[customer_locale] %}
  {% for published_locale in shop.published_locales %}
    {% if published_locale.primary == true %}
      {% assign customer_locale = published_locale.iso_code | prepend: 'lang_' %}
    {% endif %}
  {% endfor %}
{% endunless %}

fave: {{ shop.metafields.ssw[customer_locale].value.fave | json }}<br>

Add the fave label in the variable boostPFSThemeConfig like the image below:

3
Go to the boost-pfs-filter.js file in your current theme.
4
Copy the following snippet: 
'{{itemWishlist}}' + // For boost-pfs-filter.js
[[itemWishlist]] // For boost-pfs-filter-html.liquid

Then paste it inside the block productGridItemHtml, where you want your Wishlist to appear, for example, under the product price: 

Growave code

If the variable productGridItemHtml does not exist in the boost-pfs-filter.js, please find it in the boost-pfs-filter-html.liquid

Growave integration

5
Add the code below in the boost-pfs-filter.js 
// Add ssw wishlist
var itemWishlistHtml = '';
itemWishlistHtml += '<div class="ssw-faveiticon sswfaveicon{{itemId}}">' +
                        '<i data-product-id="{{itemId}}" data-count="0" class="ssw-icon-heart-o ssw-fave-icon ssw-wishlist-element ssw-not-synch"' +
                        'title="' + boostPFSFilterConfig.label.fave + '"' +
                        'data-params=\'{"product_id":"{{itemId}}","event":"fave_button","page":"product_profile"}\'></i>' +
                        '<span class="faves-count">...</span>' +
                     '</div>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);

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.
For other versions, kindly contact support@boostcommerce.net for support.
1
Please go to Product Filter & Search -> Tool -> Integration
2
Switch on the Reviews, Loyalty, Wishlist + integration toggle > Confirm acknowledged that the process will  remove old integration data of  Reviews, Loyalty, Wishlist + (if any) to use the newly selected app data for integration on all  themes  installed our app on. 

Confirm acknowledged that the process will remove old integration data of Reviews, Loyalty, Wishlist + (if any) to use the newly selected app data for integration on all themes installed our app on.

3

Build rating for the product items

After the sync ends, review rating for the product items is automatically enabled. 

By default, review stars are placed  under product titles. For placing review stars to another position, contact us or follow this instruction (only for advanced users who well-known in liquid & javascript code):

Please find the code line contain [[itemTitle]] in the file boost-pfs-filter-html.liquid, & then change it to the place you want:

Please find the code line contain [[itemTitle]] in the file boost-pfs-filter-html.liquid, & then change it to the place you want:

If the file boost-pfs-filter.liquid does not exist, please find it in boost-pfs-filter.js:

If the file boost-pfs-filter.liquid does not exist, please find it in boost-pfs-filter.js:

To use review stars for filtering, refer to Step 4 below.

4
(Optional ) 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.

Judgeme review

Note: An automation will add/delete metafield in the in-app Metafields setting once the integration is enabled/disabled. Kindly do not remove it.

Note: An automation will add/delete metafield in the in-app Metafields setting once the integration is enabled/disabled. Kindly do not remove it.

VIEW MORE INTEGRATED APPS

Related Articles