Shopify Integration

Step1: Link your store with Growlytics
1.Login to https://app.growlytics.in.
2.On top right corner, click on Integrations > Shopify Integration. You will be redirected to shopify integration page.
3. On shopify integration page, enter name of your shop <shop>.myshopify.com and click on in Integrate Shopify Button.
4. You will be redirected to your shopify admin dashboard, and will be asked to install Growlytics app on shopify. Click on Intall App to continue. After you click on Install App button, you will be redirected to growlytics with integration success message.
Step2: 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:
1
<!-- theme.liquid - Add this script at the end of theme.liquid file -->
2
<script type="text/javascript" src="https://static.growlytics.in/growlytics.min.js"></script>
3
<script>
4
    let grwSyncInfo = {
5
      page: '{{request.page_type}}',
6
      cart: {{cart | json}},
7
      product: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyProduct: null,
8
      collection: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyCollection: null,
9
    };
10
    {% if customer %}
11
        grwSyncInfo.customer = {
12
            id: '{{ customer.id }}', 
13
            info: {
14
            'name': '{{ customer.name }}' ? '{{customer.name}}' : null,
15
            'email': '{{ customer.email }}' ? '{{customer.email}}' : null,
16
            'mobile': '{{ customer.phone }}' ? '{{customer.phone}}' : null,	
17
            'firstName': '{{ customer.first_name }}' ? '{{customer.first_name}}' : null,
18
            'lastName': '{{ customer.last_name }}' ? '{{customer.last_name}}' : null,
19
            'totalOrders': {{ customer.orders_count }},
20
            'lastOrder': '{{ customer.last_order }}' ? '{{ customer.last_order }}' : null,
21
            'totalSpent': {{customer.total_spent }},
22
            'addressList': {{customer.addresses | json}}
23
        }
24
    };  
25
    {% endif %}
26
    Growlytics.shopify.sync(grwSyncInfo);
27
    Growlytics.initialize({
28
      apiKey: '<API-KEY>',
29
      enabled: true,
30
    
31
      shopify: true,
32
      shopifyStore: '<store-name-goes-here>',
33
    
34
      webPushEnabled: true,  // Enable/disable push notifs
35
      serviceWorkerFile: '<service-worker-file-location-goes-here>',
36
      autoRequestWebPushPermission: true 
37
    });
38
  </script>
Copied!
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.
1
<!-- product.liquid - Add this script at the end of product.liquid file -->
2
<script>
3
  {%if product %}
4
 	let prodInfo = {{ product | json }};
5
  prodInfo.url = "{{ shop.secure_url }}{{ product.url }}";
6
	prodInfo.price = {{product.price}}/100;
7
  prodInfo.imageUrl = "https:{{ product.featured_image.src|img_url:'grande' }}";
8
  if(window.Growlytics){
9
		window.Growlytics.shopify.productViewed(prodInfo);
10
  }else{
11
    if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
12
  	window.GrowlyticsInfo.shopifyProduct = prodInfo;
13
  }
14
  {% endif %}
15
</script>
Copied!
4. . Add the code below at the end of collection-template.liquid template file. This will allow Growlytics to track collections viewed by visitors.
1
<!-- collection-template.liquid - Add this script at the end of collection-template.liquid file -->
2
<script>
3
{%if collection %}
4
  if(window.Growlytics){
5
    window.Growlytics.shopify.collectionViewed({{collection|json}});
6
  }else{
7
    if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
8
    window.GrowlyticsInfo.shopifyCollection = {{collection|json}};
9
  }
10
{% endif %}
11
</script>
Copied!

User/Customer Profile

Next - Sdk Integrations

Browser SDK

Last modified 1yr ago

Copy link

Contents

Step1: Link your store with Growlytics

Step2: Install additional scripts