Integration with Shopify

To integrate your Shopify storefront with ZEPIC Web SDK follow the below steps:

1. Log in to your Shopify admin portal (https://admin.shopify.com/store)

2. Click on Settings -> Apps and Sales channels.

3. Click on the button “Develop Apps.”
   
   

4. Click on the button “Create an App.”
   
   

5. In the popup, enter the app's name to connect with ZEPIC.

6. Click on the button “Configure Admin API scopes.”

7. Search for the following scopes in this text box and select them:

   • write_customers

   • read_customers

   • write_draft_orders

   • read_draft_orders

   • write_orders

   • read_orders

   • write_script_tags

   • read_script_tags

   • read_customer_events

   • write_product_listings

   • read_product_listings

   • write_products

   • read_products

   • write_checkout_branding_settings

   • read_checkout_branding_settings

   • write_all_checkout_completion_target_customizations

   • read_all_checkout_completion_target_customizations

Once selected, it will look like this:

8. After selecting all the options mentioned in the above step, click on “Save.”

9. After successfully saving the settings, click the “Install app” button. In the next pop-up, click the “Install” button.

10. Click the “Reveal token once” link and copy the access token. You will need this to connect with Shopify from ZEPIC.

11. Now, go to your ZEPIC account. Click on 'Connectors', a section where you can manage your data integrations. Look for a Shopify connector that is pre-configured in your account. Click on that Shopify connector to start the integration process. 

12. Enter the details of your Shopify store and API key that we generated (in step 10) and click on “Authorize”

13. Click on the next button and go to the 'Configurations' tab. Four models (Products, Customers, Orders, and Checkouts) will be listed on your left. Select every model and click on the 'Datahook' sub-section. This is where you can enable incoming webhooks to receive real-time updates from your Shopify store.
    

14. Make sure that you enable this option for all four data models displayed (Products, Customers, Checkouts, Orders)

15. Click on the following button to open the “Summary” tab. Here, you can review all the settings before clicking the “Connect” button.

Congratulations! You have successfully connected your Shopify backend with ZEPIC, and you will now see all the customers, product catalogs, and order details flowing from Shopify to ZEPIC.

The next step is to connect your Shopify storefront with ZEPIC’s WebSDK to track your website’s visitors and understand their behavior.

1. In the ZEPIC application, now click on the “Connectors” -> “Catalog” -> General category.
   
   

2. Click on the “JS SDK” and fill in the details, such as your website (Shopify store) URL. Then click on the “Connect” button.
   
   
   

3. In the next section, you will see the JS SDK. Select and copy the URL, as shown below:

4. Now, you have the JS SDK (WebSDK)’s URL and the Shopify API key. Replace both of them in the placeholders below the curl request:

curl -XPOST -L -H 'Content-Type: application/json' -H 'X-Shopify-Access-Token:Shopify_API_Access_Key' 'https://your_shopify_store_URL/admin/api/2023-10/script_tags.json' -d '{"script_tag": {"event": "onload", "src": "JS SDK URL"}}'

5. If you are using a MacBook, open “Terminal” on your desktop 

6. Copy the cURL request mentioned above, paste it into the terminal, and execute it.

7. If you are using a Windows system, do the following:

   1. Follow the instructions from here: https://reqbin.com/req/c-g95rmxs0/curl-for-windows to install curl in Windows

   2. Once it is installed, you can copy and run the curl request

Yaay! Congratulations! You have successfully integrated the ZEPIC WebSDK with your Shopify Storefront. You will now see your storefront's visitors in ZEPIC's Visitors and Contacts tab.

.