Shopify

Folgende Standard-Features von Shopify werden von unserer Integration unterstützt.

* = ausschließlich Sterne-Rating und Anzahl der Bewertungen basierend auf Shopify Meta-Field vom Typ Rating und  und Review

** = per Restriktion auf den für Shopgate festgelegten Sales Channel

Shopgate zu Ihrem Shop einladen

Shopgate kann nahezu die komplette Integration für Sie übernehmen. Dazu ist eine Einladung von Shopgate als Gast zu Ihrem Shop notwendig. Generieren Sie dazu bitte einen Zugangscode für Shopgate und lassen Sie uns diesen verschlüsselt zukommen. Beispielsweise können Sie den Code in Ihrem Shopgate Adminbereich über Integration > Zugangsdaten hinterlegen. Anschließend lässt Shopgate Ihnen basierend auf diesem Code eine Zugriffsanfrage zukommen, die Sie bestätigen müssen. 

Wie Sie den Zugriffscode generieren, ist hier beschrieben.

Stellen Sie bitte sicher, dass die Shopify "Headless" App in Ihrem Shop installiert wurde.

Anbindung durch Shopgate

Shopgate stellt eigenständig die Anbindung zu Ihrem Shopify-Shop her. Dazu erstellen wir einen neuen Headless Sales-Channel für die App. Dieser Sales-Channel kann anschließend dafür verwendet werden, die Verfügbarkeit von Produkten oder die Anwendung bestimmter Preisregeln für die App direkt in Shopify zu steuern.

Sofern Sie für die App ein separates Shopify Menü vorgesehen haben, teilen Sie uns dies bitte mit.

Conversion-Tracking einrichten

Um App-Bestellungen aus dem Webcheckout automatisiert an Shopgate zu senden, ist es notwendig einen Tracking-Pixel in Shopify zu hinterlegen. Dazu gehen Sie bitte wie folgt vor:

1. Navigieren Sie in Ihrem Shopify Admin in Settings > Customer Events
                    
2. Klicken Sie auf Add Custom-Pixel
   
   
3. Geben Sie dem Pixel einen eindeutigen Namen wie "Shopgate Webcheckout Tracking"
   
4. Öffnen Sie den Reiter Permission und treffen Sie die Auswahl wie im Screenshot
   
5. Kopieren Sie den folgenden Code in den 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. Klicken Sie auf Speichern
7. Klicken Sie auf Connect