Guide to Integrating with Shopify

If your eCommerce is developed in Shopify, you can sync it with your Connectif account in just a few minutes and start collecting interaction data from your contacts on the website.

In this article, you will learn how to install and configure the Connectif app for Shopify.  

 
Implementation time: 15 min.
Difficulty: Low.
When to use it?: When opening your Connectif account.

 

STEP 1. App Installation 

1. Log in to your Connectif account.

2. Go to Store Settings in the left side menu.

3. In the e-commerce Platforms section, find Shopify and click on  Edit.

Shopify_integracio_n_oct_22_-_01.png

4. Click on Install our module from the Shopify app store to go to the Shopify App Store.

Integración con Shopify - 1-min (1).png

5. Click on the Install app button.

Integración

6. Log in or create a new account.

Integración

 

STEP 2. Subscription Activation

  

Once the app is installed, it will be necessary to subscribe to a Connectif plan. If you are using your free trial, you can subscribe to your plan later. In that case, go to step 3 to configure your account.

7. Log in to your Connectif account.

Integración

8. Select the store you want to integrate and configure. 

Integración

9. Go to the General Information block to review the information about the Connectif account linked to your Shopify installation.

Shopify_integracio_n_oct_22_-_8.png

10. Choose from one of the available Connectif plans.

Shopify_integracio_n_oct_22_-_9.png

11. (Optional). Request a custom plan from Connectif through the Request a custom plan panel.

 
Only one custom plan request can be queued at a time.

Shopify_integracio_n_oct_22_-_10.png

 

STEP 3. App Configuration

3.1. (Optional). Configuring store information transfer to Connectif

(This section explains the steps to configure accounts that will collect activity information in different stores. This way, Connectif will only register activity in the corresponding account when a customer browses in the configured language and currency).

12. In the Multi-Store section, click Enable.

  

This configuration is optional if you want navigation in each language to go to a different store. If not configured, Connectif will collect activity from all stores in the same account, regardless of the country and currency used. 

Integración

13. Select the language and currency in which you want to register activity for the main account and click Enable.

Integración

14. Click Add Store to connect another Connectif account to track the store in another language and/or currency.

 

Adding other stores is optional, but you will need to do this to track their activity in the corresponding Connectif account. You can repeat the process as many times as you wish to link stores.

Integración

15. Enter the username and password of the Connectif account that will track the second store.

16. Select the store you are going to link to that account.



Integración

17. Select the language and currency in which you want to register activity for the secondary account and click Add.

Integración

 

3.2. Sync Configuration 

(This section explains the minimum steps required to sync Shopify and Connectif and start collecting real-time interaction data from web contacts).

18. In "Settings > Tracking", activate the Connectif tracking switch to include the Connectif script on your website.

Shopify_integracio_n_oct_22_-_11.png

19. Click Save changes.

Shopify_integracio_n_oct_22_-_12.png

  

Activating Tracking collects traffic and navigation data but does not collect information on contacts, purchases, visited products, etc. To obtain this information, the Theme Extension must be enabled.

20. Click the Configure theme extension button.

Shopify_integracio_n_oct_22_-_13.png

21. Select the active theme (the one marked as "main") and click Configure theme extension.

Shopify_integracio_n_oct_22_-_14.png

22. In the Theme Editor, click Save to enable the Theme Extension in your account.

Shopify_integracio_n_oct_22_-_15.png

 

3.3. Configuring to receive product information 

(This section explains the Connectif module configuration options to collect product information).

23. In "Settings > Product", check or uncheck the Use product variants checkbox to collect product variants (size, color, etc.) in carts and purchases.

24. Choose between collecting the Shopify internal product ID or SKU by checking one of the two selector options.

  The Shopify ID is automatically assigned, while the SKU must be specified when creating your products.

Shopify_integracio_n_oct_22_-_16.png

25. Check the Update products in real-time box if you want to update products in Connectif immediately when a change is made to the product from the Shopify panel.

 

When using this functionality, keep in mind that:
- Custom product fields that sync through other means (visited product tags via the theme extension) will not be updated in Connectif.
- The original size of product images will be collected.
- If the name or products are modified in Shopify, they will not be updated in Connectif. 
- Deleting products in Shopify will not update the stock status or delete products in Connectif.

26. Click Save changes.

 

3.4. Configuring purchase notifications 

(This section explains the Connectif module configuration options to collect purchase information).

 

Purchase settings can only be made when tracking is disabled, so to change this configuration, it must be temporarily disabled (step 3.2.).

27. In "Settings > Purchases", choose between notifying online or offline purchases. By default, Connectif will collect online purchases.

 

What is the difference between Use online purchases and Use offline purchases?
- When Using online purchases, the purchase will be recorded immediately after the user has visited the checkout page, using the Theme Extension tag.
- When Using offline purchases, the purchase will be recorded in Connectif asynchronously at any time after the purchase (not immediately).

Shopify_integracio_n_oct_22_-_17-min.png

 

In addition to configuring purchase notifications in Shopify, you will need to implement the tracking snippet in your store. Learn how to do this in this article.

3.5. Theme Extension Configurations

(This section explains what configurations can be adjusted in the Theme Extension editor and how to do it).

 

The Theme Extension and the Connectif module configuration are different platforms, so make sure both configurations match and, if not, make the necessary adjustments.

28. Click on the Configure Theme Extension button.

Shopify_integracio_n_oct_22_-_11-min.png

29. In "Cart Configuration", verify that the Use product variants option matches the one you selected in step 3.3.

Shopify_integracio_n_oct_22_-_18.png

30. In "Product Settings > Product ID", confirm that the product information configured matches what you selected in step 3.3.

Shopify_integracio_n_oct_22_-_19.png

31. In "Product Settings", choose the product image size to be displayed in Connectif (in pixels).

Shopify_integracio_n_oct_22_-_20.png

32. In "Custom Tags", insert the custom fields created in Connectif using Liquid code.

Shopify_integracio_n_oct_22_-_27__1_-min.png

 

3.6. (Optional). Creating Custom Product and Customer Fields in Shopify

(This section explains how to create custom Product and Customer fields in Shopify and sync them with those in Connectif).

33. Go to the Admin Panel of your Shopify store and click on Settings.

Shopify_integracio_n_oct_22_-_21.png

 

In our example, we illustrate how to create a custom product tag called "Example".

34. Go to Metafields and select the part of the store where you want to add the new custom field.

Shopify_integracio_n_oct_22_-_28.png

 

In our example, a field for Products is added.

35. Add a new metafield by filling in the Name and Description.

36. Select a Field Type.

37. Check the box that allows this field to be connected via API.

Shopify_integracio_n_oct_22_-_23.png

 

In our example, a text line type field is created.

38. Click Save.

Shopify_integracio_n_oct_22_-_24.png

39. Copy the metafield name to include it in the Theme Editor.

Shopify_integracio_n_oct_22_-_25.png
 

In our example, the created Product metafield is copied (product.metafields.custom.example).

40. Add the copied metafield in the following code snippet:

<span class="custom_meta">{{ product.metafields.custom.example }}</span>

 

41. Copy the resulting code snippet into the Custom Tags section of the Theme Editor.

Shopify_integracio_n_oct_22_-_26.png
 

In our example, it shows how to include the code for the created Product metafield.

42. Click Save.

Shopify_integracio_n_oct_22_-_29-min.png

 

 

Success!
Your Connectif app installation for Shopify is now ready.

  

You can ensure that you have correctly integrated by following the steps in  this article.

 


Frequently Asked Questions

1. I don't have an active Connectif plan yet and want to subscribe

(This section explains what to do if you don't have a Connectif plan and want to subscribe through Shopify).

  • In that case, follow the instructions in Step 2.

2. I already have a Connectif plan but want to pay through Shopify

(This section explains what to do if you already have a Connectif plan that is not being billed through Shopify and want to switch to pay through the tool.)

  • In your Shopify account, go to the Connectif module control panel and, in Plan, click the Subscribe button.

Shopify_integracio_n_oct_22_-_30.png

 

  • Once the conditions are reviewed and accepted, choose and accept the payment method.

Shopify_integracio_n_oct_22_-_31.png

 

3. I need to start paying the assigned plan

(This section explains what to do if you already have the assigned plan to subscribe and are going to start paying through Shopify).

  • In your Shopify account, go to the Connectif module control panel and, in Plan, click the Subscribe button.

Shopify_integracio_n_oct_22_-_30.png

 

  • Once the conditions are reviewed and accepted, choose and accept the payment method.

Shopify_integracio_n_oct_22_-_31.png

 


Keep learning!

To get the most out of your Connectif account, we recommend continuing with the following articles:

Was this article helpful?
0 out of 0 found this helpful