Shopify Integration

This page will give you detailed steps to integrate Growlytics on your shopify website.

STEP 1: Install the Growlytics Shopify App

Before proceeding, make sure you are logged in to your Shopify store and have the required access to install apps.

Install the Growlytics Shopify public app from this link. Click on the 'Add App' button to review the permissions of the app, and subsequently click 'Install App'. You will be asked to accept $5 monthly app charges. Click on 'Accept' to continue installing the app.

STEP 2: Provide the Growlytics API Key In the Shopify App

For this step, start from the video recording or look through the step-by-step instructions below.

1. Once you have installed the app, you will see the screen shown below. Click on the 'Connect Growlytics Account' button to continue.

1. Enter the API key and click on the 'Connect' button.

1. To generate the Growlytics API Key, login to your Growlytics Dashboard, click on Settings from the left side menu, and click on the API Keys' section. You will be redirected to the API Keys page.

1. Verify the details of the store and Growlytics account being connected. Once verified, click on the 'Start Sync' button. Once you start sync, the connector app will automatically start syncing all your customers, and past orders with your connected Growlytics account.

1. On your Shopify Dashboard, click on Online stores -> Customize -> Theme Settings -> App Embed -> Growlytics and enable the tab.

STEP 3: Install additional scripts

After first step, you will need to add scripts in 3 different liquid template files: theme.liquid, product.liquidand collection-template.liquid.

1. Add the code below at the end of theme.liquid template file. This will allow Growlytics to analyze visitor's behaviour on your site:

<!-- theme.liquid - Add this script at the end of theme.liquid file -->
<script type="text/javascript" src="https://static.growlytics.in/growlytics.min.js"></script>
<script>
    let grwSyncInfo = {
      page: '{{request.page_type}}',
      cart: {{cart | json}},
      product: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyProduct: null,
      collection: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyCollection: null,
    };
    {% if customer %}
        grwSyncInfo.customer = {
            id: '{{ customer.id }}', 
            info: {
            'name': '{{ customer.name }}' ? '{{customer.name}}' : null,
            'email': '{{ customer.email }}' ? '{{customer.email}}' : null,
            'mobile': '{{ customer.phone }}' ? '{{customer.phone}}' : null,	
            'firstName': '{{ customer.first_name }}' ? '{{customer.first_name}}' : null,
            'lastName': '{{ customer.last_name }}' ? '{{customer.last_name}}' : null,
            'totalOrders': {{ customer.orders_count }},
            'lastOrder': '{{ customer.last_order }}' ? '{{ customer.last_order }}' : null,
            'totalSpent': {{customer.total_spent }},
            'addressList': {{customer.addresses | json}}
        }
    };  
    {% endif %}
    Growlytics.shopify.sync(grwSyncInfo);
    Growlytics.initialize({
      apiKey: '<API-KEY>',
      enabled: true,
    
      shopify: true,
      shopifyStore: '<store-name-goes-here>',
    
      webPushEnabled: true,  // Enable/disable push notifs
      serviceWorkerFile: '<service-worker-file-location-goes-here>',
      autoRequestWebPushPermission: true 
    });
  </script>

1. Make sure you are replacing <api-key> with your actual project api key. You can find api-key in project settings.

2. Make sure you are replacing <store-name> with your shopify store name.

3. Make sure you are replacing the <service-worker-file-location> with your store's server location.

3. Add the code below at the end of product.liquid template file. This will allow Growlytics to track products viewed by visitors.

<!-- product.liquid - Add this script at the end of product.liquid file -->
<script>
  {%if product %}
 	let prodInfo = {{ product | json }};
  prodInfo.url = "{{ shop.secure_url }}{{ product.url }}";
	prodInfo.price = {{product.price}}/100;
  prodInfo.imageUrl = "https:{{ product.featured_image.src|img_url:'grande' }}";
  if(window.Growlytics){
		window.Growlytics.shopify.productViewed(prodInfo);
  }else{
    if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
  	window.GrowlyticsInfo.shopifyProduct = prodInfo;
  }
  {% endif %}
</script>

4. . Add the code below at the end of collection-template.liquid template file. This will allow Growlytics to track collections viewed by visitors.

<!-- collection-template.liquid - Add this script at the end of collection-template.liquid file -->
<script>
{%if collection %}
  if(window.Growlytics){
    window.Growlytics.shopify.collectionViewed({{collection|json}});
  }else{
    if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
    window.GrowlyticsInfo.shopifyCollection = {{collection|json}};
  }
{% endif %}
</script>