Shopify

* = only the star rating and review count, derived from the Shopify meta field designated for Rating and Review 

** = subject to the limitations set by the sales channel specified for Shopgate

Install the Shopgate app

Connection through Shopgate

Shopgate automatically connects to your Shopify store. This is done by creating a new headless sales channel for the app. This sales channel can then be used to control the availability of products or the application of certain pricing rules for the app directly in Shopify.

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

Set up conversion tracking

In order to automatically send app orders from the webcheckout to Shopgate, it is necessary to place a tracking pixel in Shopify. To do this, please follow these steps

1.  In your Shopify Admin, navigate to Settings > Customer Events.

2.  Click Add custom pixel.

3.  Give the pixel a unique name such as "Shopgate Webcheckout Tracking".

4.  Open the Permissions tab and make the selection as shown in the screenshot.

5.  Copy and paste 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 on Save.
7.  Click on Connect.

Updated: 24 April 2025