Shopify

The following standard Shopify features are supported by our integration.

* = star rating and number of reviews only, based on the Shopify metafields of type Rating and Review

** = by restricting them to the sales channel set up for Shopgate

1. Invite Shopgate to your shop

Shopgate can take care of almost the entire integration for you. For this, you need to invite Shopgate to your shop as a collaborator. Please generate an access code for Shopgate and send it to us in encrypted form. For example, you can store the code in your Shopgate admin under Integration › Credentials. Shopgate then sends you an access request based on this code, which you need to approve. 

How to generate the access code is described here.

Please make sure that the Shopify "Headless" app is installed in your shop.

2. Connection by Shopgate

Shopgate sets up the connection to your Shopify shop independently. To do this, we create a new headless sales channel for the app. You can then use this sales channel to control the availability of products or the application of certain pricing rules for the app directly in Shopify.

If you have set up a separate Shopify menu for the app, please let us know.

3. Set up conversion tracking

To send app orders from the web checkout to Shopgate automatically, you need to add a tracking pixel in Shopify. Please proceed as follows:

1. In your Shopify admin, go to Settings > Customer Events
                    
2. Click Add custom pixel
   
   
3. Give the pixel a unique name, such as "Shopgate Webcheckout Tracking"
   
4. Open the Permission tab and make the selection as shown in the screenshot
   
5. Copy the following code into the pixel

   setTimeout(() => {
     if (navigator.userAgent.indexOf('libshopgate') === -1) return
     browser.ReactNativeWebview = {
       postMessage: (message) => window.webkit.messageHandlers.ReactNativeWebView.postMessage(message)
     }
   
     SGJavascriptBridge = {
       dispatchCommandsForVersion: (commands, versions) => {
       console.log(commands, versions)
       browser.ReactNativeWebview.postMessage(JSON.stringify({ commands, versions }))
       },
       dispatchCommandsStringForVersion: (commands, versions) => {
         var commandsJson = JSON.parse(commands);
         window.ReactNativeWebView.postMessage(JSON.stringify({ commands: commandsJson, versions }));
       }
     };
     console.log( 'SGWC pixel loaded')
   }, 1000)
   
   
   analytics.subscribe("checkout_completed", event => {
     if (navigator.userAgent.indexOf('libshopgate') === -1) return
     console.log({ event }, 'SGWC pixel received checkout event')
     window.sgOrder = {
       orderNumber: event.data.checkout.order.id,
       currency: event.data.checkout.currencyCode,
       totals: {
         shippingPrice: event.data.checkout.shippingLine.price.amount,
         taxPrice: event.data.checkout.totalTax.amount,
         totalPrice: event.data.checkout.totalPrice.amount
       },
       lineItems: event.data.checkout.lineItems.map((li) => {
         return {
           variant_id: li.variant.id,
           product: li.variant.product,
           quantity: li.quantity,
           title: li.title,
           price: li.finalLinePrice.amount,
           gift_card: li.gift_card
         }
       })
     };
   
     const sgCheckoutScript = document.createElement('script');
     sgCheckoutScript.setAttribute('src', 'https://shopgate-public.s3.eu-west-1.amazonaws.com/webcheckout/shopify/checkout-script_v3.js');
     document.head.appendChild(sgCheckoutScript);
   
     console.log({ sgOrder: window.sgOrder }, 'SGWC pixel mapped order');
   });

6. Click Save
7. Click Connect