Integrate Shopify websites with Growmatik

Summary

In this article you will learn how to integrate Shopify websites with Growmatik app. Firstly, we’ll show you how to add the Growmatik to your Shopify store and then we’ll explain how to enable the App Embed in order for the app to work.

• Add Growmatik to your Shopify Website
• Enable the Growmatik App Embed block
• Enabling Guest Checkout Detection

Add Growmatik to your Shopify Website

To add Growmatik to your store or integrate Shopify websites follow these steps:
1. From the left side panel in your Shopify dashboard, select + Add apps button.

2. In the opened modal click on the Shopify App Store link.

3. Search for “Growmatik” using the search box in the hero section.

4. Select Growmatik from the list.

5. Now click on the Add app button.

6. Choose the Install app button.

7. After you click the button above, you will be taken to Growmtik, where a Growmtik account is automatically created based on your Shopify information.

8. Then you have to choose a plan that best fits your business and start using your 14-day free trial.

9. Click on the Approve button on your Shopify dashboard to confirm your subscription.

10. Finally, you will see that your Shopify store is connected and successfully integrated with Growmatik.

Enable the Growmatik App Embed block

Growmatik will work in Shopify when the Growmatik App Embed block is enabled for it. To do so:

1. From the left side panel in your Shopify dashboard, select OnlineStore > Themes. Then click on the Customize button on the page.

2. At the bottom left side of the page, click on the Theme Setting button.

3. Then choose App Embeds and finally enable the Growmatik App Embed.

Enabling Guest Checkout Detection

To allow Growmatik to identify guest checkouts, you must add a script to Shopify’s order status page section. To proceed, follow these steps:

1. In your Shopify dashboard, navigate to Settings > Checkout > Order status page section.
2. Then, copy and paste the following code into the Additional scripts box, and save your changes by clicking the Save button.

<!-- Begin Growmatik Scripts -->
<script async src='{{shop.metafields.growmatik.api_url}}/dynamic/sites/{{shop.metafields.growmatik.site_id}}/automations.js{%if customer and customer.has_account %}?userId={{customer.id}}&token={{customer.id | hmac_sha256: shop.metafields.growmatik.verification_secret}}{%endif%}'></script>
<script type='text/javascript' id='growmatik-if-then-js-extra' async>
window._growmatik = {
load: false,
siteId: '{{shop.metafields.growmatik.site_id}}',
platform: {
  platformKey: 'shopify',
  growmatikApi: '{{ shop.metafields.growmatik.api_url }}',
  env: '{{ shop.metafields.growmatik.env }}',
  integration: '{{ shop.metafields.growmatik.active_status }}' ? 'active' : 'paused'
}};
</script>
<script type='text/javascript' data-minify='0' async src='{{shop.metafields.growmatik.ift_url}}' id='growmatik-if-then-js'></script>
<script type='text/javascript' id='growmatik-if-then-js-extra' async>
var lastOrder = {categories : {}};
{% for order in customer.orders %}
    lastOrder.platform = 'shopify';
    const currencySplit = '{{order.total_price | money_with_currency}}'.split(' ');
    lastOrder.currency = currencySplit[currencySplit.length - 1];
    lastOrder.purchasedAt = '{{order.created_at}}';
    lastOrder.totalAmount = {{order.total_price | money_without_currency}};
    lastOrder.itemCount = '{{order.line_items.size}}';
    lastOrder.paymentMethod = '{{ transactions[0].gateway }}';
    lastOrder.items = {
  {% for line_item in order.line_items %} '{{line_item.product_id}}': '{{line_item.title}}',{% endfor %}
};
{% break %}{% endfor %}
<!-- get last order -->
var noOfPurchasedItems = 0;
var pageUrl = ('{{page.url}}' || '{{article.url}}' || '{{product.url}}' || '{{blog.url}}');
var pageFullUrl = '{{ shop.metafields.growmatik.full_url }}' + pageUrl;
var pageId = ('{{page.id}}' || '{{article.id}}' || '{{product.id}}' || '{{blog.id}}');
{% for order in customer.orders %}
  {% if order.line_items.first.product_id > 0 %}
  {% for item in order.line_items %}
  noOfPurchasedItems += {{item.quantity}};
{% endfor %}{% endif %}{% endfor %}
var hasAccount = {%if customer.has_account %} true {%else%} false {%endif%};
/* <![CDATA[ */
var _growmatikShopifyDataLayer = {
  version: 1,
  user:  { type: (lastOrder.purchasedAt ? 'customer' : (hasAccount ? 'lead' : 'guest')),
  email: '{{customer.email}}', userId: '{{customer.id}}',
  identityToken: '{{customer.id | hmac_sha256: shop.metafields.growmatik.verification_secret}}',
  username: '', firstName: '{{customer.first_name}}', lastName: '{{customer.last_name}}', registeredAt: ''},
  commerce: { shopify: {
    cartItems: [], hasCart: false, lastOrder,noOfOrders: {{customer.orders.size | at_least:0}},
    noOfPurchasedItems,
    products: [
      {% for order in customer.orders %}
      {% for line_item in order.line_items %}{% if line_item.product_id > 0 %}'{{ line_item.product_id }}',
      {% endif %}{% endfor %}{% endfor %}
    ]
  }},
  order: {
    billing: {{checkout.billing_address | json}},
    shipping: {{checkout.shipping_address | json}},
    customer: {first_name: '{{customer.first_name}}', last_name: '{{customer.last_name}}', id: '{{customer.id}}'},
    id: ('{{checkout.order_id}}' || '{{checkout.order.id}}' || '{{order.id}}'),
    email: '{{checkout.email}}', date_created: '{{checkout.created_at}}'
  }
};
var _growmatik = {
  load: true,
  currentTime: new Date(),
  platform: { platformKey: 'shopify', growmatikApi: '{{shop.metafields.growmatik.api_url}}',
  env: '{{shop.metafields.growmatik.env}}', integration: '{{shop.metafields.growmatik.active_status}}' ?
  'active' :
  'paused'},
  siteId: '{{shop.metafields.growmatik.site_id}}',
  site: { id: '{{shop.metafields.growmatik.site_id}}', url: '{{shop.metafields.growmatik.full_url}}'},
  page: { pageType: (('{{blog.id}}' || '{{article.id}}') ? 'post' : ('{{product.id}}' ? 'product' : 'page')),
  isSingle: !(new RegExp('(products|blogs|collections)\/all?$').test(location.pathname)),
  pageId: pageId, platform: 'shopify', url: pageUrl, pageName: 'thank-you'},
  user:  hasAccount ? _growmatikShopifyDataLayer.user : {
  type: 'guest',  email: '', userId: '',  identityToken: '',  username: '', firstName: '', lastName: '', registeredAt: ''
  },
  commerce: _growmatikShopifyDataLayer.commerce,
};
var _growmatikUserOverride = _growmatikShopifyDataLayer.user;
var _growmatikCommerceOverride = _growmatikShopifyDataLayer.commerce;
window._growmatikShopifyInit && window._growmatikShopifyInit();
</script>
<!-- End Growmatik Scripts -->