Shopify Integration

This page will give you detailed steps to integrate Growlytics on your shopify website.
Step1: Link your store with Growlytics
Login to https://app.growlytics.in.
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.
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>
Make sure you are replacing <api-key> with your actual project api key. You can find api-key in project settings.
Make sure you are replacing <store-name> with your shopify store name.
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>
User/Customer Profile
Next - Sdk Integrations
Browser SDK
Last updated 8 months ago