Faq

aliases:

• /platform-guides/shopify/setup/using-currency-conversion-on-shopify/
• /platform-guides/shopify/troubleshooting/handling-require.js-in-shopify-only-for-clerk-js1-users/
• /platform-guides/shopify/setup/working-with-multiple-currencies-in-your-shopify-store/
• /platform-guides/shopify/setup/installing-sliders-on-the-frontpage-with-sections-in-shopify/
• /platform-guides/shopify/troubleshooting/finding-shopify-theme-files/
• /platform-guides/shopify/getting-started/full-installation-of-clerk.io-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-import-data-when-using-http-authentication-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-fix-common-shopify-errors-when-importing-data-to-clerk.io/
• /platform-guides/shopify/setup/upgrading-to-clerk.js-2-on-shopify/
• /platform-guides/shopify/troubleshooting
• /upgrading-to-clerk.js-2-on-shopify
• /installing-sliders-on-the-frontpage-with-sections-in-shopify
• /full-installation-of-clerk.io-on-shopify
• /how-to-import-data-when-using-http-authentication-on-shopify
• /getting-started
• /handling-require.js-in-shopify-only-for-clerk-js1-users
• /using-currency-conversion-on-shopify title: FAQ description: “Lösungen für häufige Fragen und Probleme bei der Nutzung von Clerk mit Shopify” weight: 7

Haben Sie Probleme mit Ihrer Shopify-Integration? Dieses FAQ behandelt die häufigsten Probleme und deren Lösungen – von Währungsumrechnung bis zu Speicherorten von Theme-Dateien.

Bildgrößen #

Shopify-Bild-URLs können beim Sync feste Abmessungen beinhalten, zum Beispiel _600x600.

Falls Ihr Design andere Ausgabengrößen je nach Platzierung benötigt, können Sie die synchronisierte feste Größe entfernen und eine neue Breite in der URL anfordern.

Beispiel (ersetzen Sie 600x600 mit Ihrer konfigurierten Standardbildgröße):

{{ product.image
  | replace '_600x600.' '.'
  | replace '?v=' '?width=350&v=' }}

Das ist besonders praktisch, wenn ein Design mehrere Bildformate nutzt (z. B. für Produktkarten und große Hero-Platzierungen) und Sie vermeiden möchten, mehrere Bildattribute zu synchronisieren.

Währungsumrechnung #

Die integrierte Währungsumrechnung von Shopify erleichtert das Auslesen des Währungssymbols und des Wechselkurses aus dem Webshop.

Standardmäßig wird Clerk.js für Shopify mit einem Formatter ausgeliefert, der funktioniert, solange Ihre Drittanbieter-App das integrierte Währungsobjekt von Shopify verwendet.

Standardlösung #

Sie müssen in Ihren Designs einen Formatter benutzen, um Preise umzurechnen.

Dieses Beispiel nutzt unsere Standard-Template-Sprache hier.

Bei Verwendung von Währungsumrechnungen und -symbolen erkennt Clerk.js Einstellungen wie Sprache, Währung und Ländercode.

Die folgenden Beispiele zeigen, wie die verschiedenen Komponenten funktionieren.

Design Editor #

1. Erstellen Sie eine Text-Komponente an der gewünschten Stelle zur Preisanzeige.
2. Fügen Sie den folgenden Liquid-Code hinzu, um den Preis, basierend auf der Währungsumrechnung, im Textfeld anzuzeigen:

{{ currency_symbol }}{{ item.price | currency_converter }}

Code-Modus #

1. Gehen Sie in my.clerk.io zu Search/Recommendations > Designs und klicken Sie auf Design bearbeiten für Ihr Design.
2. Ersetzen Sie den bestehenden money oder money_eu Formatter für Preise durch currency_converter.
3. Klicken Sie auf Design aktualisieren.
4. Sie können nun die umgerechneten Preise samt Währungssymbol im Design sehen.

Individuelle API-Lösung #

Hinweis: Dies ist eine sehr individuelle Lösung, um Preisumrechnungen zu erhalten, falls keine Daten von der Shopify API kommen. Nur verwenden, wenn Sie eine spezifische und individuelle Konfiguration für Preisumrechnungen auf Basis von Geo-IP-Anpassungen nutzen.

Dies ist die Frontend-Lösungsdokumentation auf Github.

Dieser Abschnitt erklärt, wie Sie kontextbezogene Daten in Echtzeit abrufen können, um sie im von der Clerk API zurückgegebenen Content anzuzeigen.

Das Design-Pattern besteht aus folgenden Teilen:

• Eine Collection, die alle Produkte enthält.
• Ein alternatives Layout zur Darstellung der Collection-Informationen als JSON.
• Eine JavaScript-Klasse, die die in der Collection verfügbaren Daten einsammelt.
• Ein JavaScript-Snippet, das die Daten für die relevanten Produkt-IDs im jeweiligen Ergebnis nutzt und sie in einem div im Template platziert.

Collection erstellen #

Um sicherzustellen, dass Sie eine Collection mit allen möglichen Produkten haben, erstellen Sie eine Collection, deren Bedingung von allen Produkten erfüllt wird.

Die Collection soll Clerk api heißen, damit sie als Route /collection/clerk-api im Frontend erreichbar ist.

Die Bedingung für die Collection könnte z.B. price > -1000000 lauten.

Alternatives Layout erstellen #

Erstellen Sie ein alternatives Layout, um Ihre Daten über die Collection auszugeben.

Dazu bearbeiten Sie zunächst den Theme-Code des zu verwendenden Themes.

Unter dem Punkt Templates auf der linken Seite klicken Sie auf Add new Template.

Im Popup wählen Sie collection als Resource-Typ.

Wählen Sie liquid als Dateityp.

Tragen Sie unten json ein, sodass die erstellte Datei collection.json.liquid heißt.

Der Inhalt dieser Datei sollte der collection.json.liquid Datei im liquid-Ordner dieses Projekts entsprechen.

Sie können in dieser Vorlage beliebig Felder zum Produkt ergänzen.

JS-Klasse hinzufügen #

Um die Daten aus Ihrer Collection zu holen und aufzubereiten, fügen Sie den gesamten Inhalt von index.js aus dem Ordner class dieses Projekts innerhalb des script-Tags mit Clerk.js in Ihrer theme.liquid ein.

Das sieht ungefähr so aus:

<script>
  // Clerk.js Injection Code
  // Clerk Config mit Key und Formatters
  // Klasse aus diesem Projekt
  clerk_shopify_api.init()
  // Zuletzt init() für die Klasse, damit sie beim Laden der Seite ausgeführt wird.
</script>

Diese Klasse macht Daten anhand von Zeitstempeln und Währungen ungültig, ohne dass Sie den Code anpassen müssen.

Die Zeit bis zur Invalidation beträgt 12 Stunden seit letztem Datenaufbau.

Jede Änderung im Währungskontext macht die Daten ebenfalls ungültig.

Template-Funktion hinzufügen #

Fügen Sie das template.js in das verwendete Design-Template ein.

Die Funktion greift zu, wenn die Daten verfügbar sind und platziert sie in den jeweiligen Child-Elementen jeder Produktkachel.

Das Beispiel enthält die Felder list_price und price.

Zu beachten: Falls Sie Felder nutzen wollen, die sich von price und list_price unterscheiden, ergänzen Sie diese in collection.json.liquid und passen dann sowohl template.html als auch template.js an. Die Klasse aus Schritt 3 brauchen Sie dabei nie zu verändern.

Theme-Dateien finden #

Shopify bietet über 100 verschiedene Themes, um Ihren Webshop zu gestalten und anzupassen.

Jedes Theme funktioniert nach demselben Prinzip – Sie passen die Theme-Dateien an, um ein gewünschtes Ergebnis im Shop zu erzielen.

Allerdings variieren die Namen der Theme-Dateien je nach Theme.

Shopify stellt Ihnen ein Suchfeld zur Verfügung, mit dem Sie schnell und einfach die gesuchte Theme-Datei finden.

Falls Sie den Namen der gewünschten Datei nicht kennen, können Sie das Suchfeld zum Auffinden nutzen.

Suchen Sie beispielsweise nach dem Code für die Suchseite, wird die Datei vermutlich „search" im Dateinamen enthalten.

Wenn Sie nicht sicher sind, ob Sie die richtige Datei gefunden haben, vergleichen Sie das HTML in der Theme-Datei mit dem HTML der betreffenden Seite, um zu sehen, ob sie übereinstimmen.

Das können Sie in Google Chrome via Rechtsklick auf einen beliebigen Seitenbereich und dem Menüpunkt „Untersuchen" machen.

Danach können Sie das HTML der Seite inspizieren und prüfen, ob class/ID der Elemente in Datei und Seite übereinstimmen.

Wenn Sie weitere Unterstützung benötigen, können Sie gern unser Supportteam kontaktieren.

Empfehlungen im Warenkorb-Drawer #

Die Installation durch einen Shopify-Entwickler wird dringend empfohlen.

Diese Anleitung beschreibt eine sehr angepasste Lösung, die sich je nach Shopify-Theme unterschiedlich verhalten kann. Sie ist speziell für Themes konzipiert, bei denen der Warenkorb auf jeder Seite Teil des DOM ist, aber vom Nutzer erst beim Öffnen sichtbar wird.

Clerk Recommendations im Warenkorb-Drawer auf Shopify einzublenden, ist eine großartige Möglichkeit, Kunden beim Checkout zusätzliche Produkte zu präsentieren.

1. Bearbeiten Sie den Code Ihres Shopify-Themes in Online Store > Themes > Edit code.
2. Suchen Sie die Datei des Warenkorb-Drawer-Templates (in der Regel cart-drawer.liquid o.ä.).
3. Fügen Sie einen Clerk Recommendations-Snippet aus Recommendations > Elements ein.
4. Benennen Sie die Klasse von clerk um, um das Rendern zu steuern – z.B. als clerk_m:

<span
  class="clerk_m"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

1. Ergänzen Sie den obigen Snippet um ein Script, das Clerk Recommendations einblendet, sobald der Nutzer den Warenkorb öffnet. Eine Möglichkeit besteht in der Nutzung eines MutationObservers. Das folgende Script enthält alle Elemente und gibt Ihnen ein Beispiel, wie Sie vorgehen können:

<script>
    // Wählen Sie das zu überwachende DOM-Element für Mutations
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Fügen Sie alle Klassennamen des Warenkorb-Drawers bei Öffnung hinzu
    const targetNodeClasses = "drawer animate active";

    // Optionen für den Observer (zu beobachtende Mutationen)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funktion zum Abrufen der Warenkorb-Daten
    async function fetchCartData() {
        const response = await fetch("/cart.js");
        const data = await response.json();
        let itemsID = [];
        let cartItems = data.items;
        for (var i = 0; i < cartItems.length; i++) {
            itemsID.push(cartItems[i].product_id);
        }
        return itemsID;
    }

    // Callback-Funktion für Mutations-Events
    const callback = async (mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.type === "attributes") {
                if (targetNode.className == targetNodeClasses && !cartFetched) {
                    cartFetched = true;
                    try {
                        const itemsID = await fetchCartData();
                          if (JSON.stringify(previousitemsID) != JSON.stringify(itemsID)) {
                            await Clerk('content', '.clerk_m', 'param', { products: itemsID })
                            previousitemsID = itemsID
                          }
                    } catch (error) {
                        console.error(error);
                    } finally {
                        cartFetched = false;
                    }
                }

            }
        }
    };

    // Observer-Instanz mit Callback erstellen
    const clerk_observer = new MutationObserver(callback);

    // Beginnen Sie die Beobachtung des Zielknotens
    clerk_observer.observe(targetNode, config);
</script>

Ihre cart-drawer-Datei sollte so aussehen:

HTTP-Authentifizierung #

HTTP-Authentifizierung wird häufig auf Staging-Websites verwendet, um unerwünschte Besucher auszuschließen.

Dies blockiert den Clerk Importer und zeigt einen 401 Unauthorized-Fehler im Sync-Log an.

Sie können das Problem beheben, indem Sie die Authentifizierungsdaten in die Import-URL einfügen.

In my.clerk.io > Data > Configuration aktualisieren Sie Ihre Import-URL wie folgt:

https://USER:PASS@www.ewoksRus.com

Häufige Sync-Fehler #

Beim Importieren von Daten über die Shopify-Integration ist der Server Ihres Webshops dafür verantwortlich, Produkt-, Kategorie- und Verkaufsdaten an Clerk zu senden.

In manchen Fällen kann die Serverkonfiguration jedoch verhindern, dass der Importer Zugriff bekommt, was zu einem Fehler im Data Sync führt.

Hier finden Sie eine Übersicht der häufigsten Fehler und wie Sie sie beheben.

401 Unauthorized #

Dieser Fehler tritt auf, wenn Ihr Webshop oder die Entwicklungsumgebung eine HTTP-Authentifizierung erfordert.

Das Problem lässt sich lösen, indem Sie Benutzername und Passwort als Teil der Import-URL einfügen:

http://username:password@awesomeshop.myshopify.com

Berechtigungsfehler #

Dieser Fehler tritt meist auf, wenn Sie keinen Lesezugriff auf Shop-Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen in Ihrer privaten App gewährt haben.

So beheben Sie das:

1. Melden Sie sich bei Shopify an und gehen Sie zu Apps > Manage Private Apps > Clerk.io (oder wie auch immer Sie die App benannt haben).
2. Scrollen Sie zu Admin API Permissions und klicken Sie auf Review disabled Admin API permissions.
3. Suchen Sie Shop-Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen und wählen Sie Lesezugriff:

1. Scrollen Sie zum Seitenanfang und klicken Sie auf Speichern.

Umgang mit require.js #

Diese Anleitung gilt nur für Clerk.js 1.

In manchen Setups verhindert Require.js, dass Clerk.js geladen wird. Das bedeutet, dass keine Slider und Suchergebnisse angezeigt werden.

In diesem Fall sehen Sie den folgenden Fehler in Ihrer Konsole:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, mit Require.js umzugehen. Beide Methoden erfordern Änderungen am tracking-script, das normalerweise in index.liquid eingebunden ist.

Über Require.js einbinden #

Die beste Lösung ist, zu versuchen, dass Require.js Clerk erkennt.

Sie machen dies, indem Sie require(['clerk'], function() {}); am Ende des Tracking-Skripts einfügen:

Require.js ignorieren #

Wenn die obige Lösung nicht funktioniert, können Sie Require.js ignorieren.

Fügen Sie window.__clerk_ignore_requirejs = true; am Beginn des Tracking-Skripts ein:

Nach Anwendung einer der beiden Methoden ist Require.js nun mit Clerk kompatibel.

Upgrade auf Clerk.js 2 #

Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.

Sie erleichtert die Installation von Clerk auf jedem Webshop.

Da die beiden Versionen jedoch geringfügig unterschiedlich arbeiten, müssen Sie die folgenden Schritte für ein erfolgreiches Upgrade befolgen.

Die zwei Hauptunterschiede bei Clerk.js 2 sind:

• Die Designs in my.clerk.io nutzen die Liquid Template-Sprache, lassen sich aber auch einfach im Design-Editor erstellen.
• Das Skript muss direkt vor dem </head>-Tag Ihres Webshop-Templates eingefügt werden.

Designs erstellen #

Da Clerk.js 2 einen anderen Ansatz für Designs verfolgt, müssen Sie neue Designs erstellen.

Sie können Ihre Clerk.js 2 Designs auf zwei Wegen erstellen:

• Nutzen Sie den intuitiven Design Editor, um neue Designs wie in den folgenden Punkten beschrieben zu bauen.
• Konvertieren Sie Ihre alten Designs. Wie das geht, sehen Sie in diesem Guide.

Option Design Editor #

1. Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
2. Geben Sie Ihrem Design im folgenden Screen einen Namen (wir empfehlen, “V2” hinzuzufügen, damit klar ist, dass Sie Clerk.js 2 nutzen).
3. Wählen Sie den Design-Typ.
4. Klicken Sie auf Design veröffentlichen, sobald Sie fertig sind und gehen weiter zu Schritt 2 im Guide.
5. Im Design Editor klicken Sie auf beliebige vorhandene Elemente wie Name, Bild, Button usw., um sie zu editieren – oder fügen weitere hinzu, um mehr Produktinfos einzubinden.
6. Klicken Sie auf Veröffentlichen. Dies sorgt vorübergehend dafür, dass sie im Shop nicht sichtbar sind, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle zu aktualisierenden Elemente.
7. Gehen Sie zu Recommendations/Search > Elements und stellen Sie Ihr Clerk-Element auf das neue Design um.

Sie sind nun bereit, auf Clerk.js 2 umzusteigen.

Script ersetzen #

1. Finden Sie die Template-Datei, mit der alle Seiten des Webshops angezeigt werden und in der sich das ursprüngliche Clerk.js-Skript meist am unteren Ende befindet.
2. Entfernen Sie das alte Skript aus der Datei:

1. Gehen Sie zu my.clerk.io > Developers > Tracking Code.. Diese Seite enthält jetzt Ihren Clerk.js 2 Tracking Code.
2. Kopieren Sie den Code und fügen Sie ihn direkt vor das </head>-Tag im Template ein:

1. Speichern Sie Ihr Template.

Herzlichen Glückwunsch! Sie nutzen jetzt das deutlich verbesserte Clerk.js 2 Setup!

Die vollständige Dokumentation zu Clerk.js 2 finden Sie hier: https://docs.clerk.io/docs/clerkjs-quick-start

Zugriff auf Kundenevents #

Wenn wir Sie beim Einrichten oder Troubleshooten des Order-Tracking via Shopify Pixels unterstützen, bitten wir evtl. um Zugriff auf den Bereich „Customer events“ in Ihrem Shopify-Admin.

Gehen Sie dazu wie folgt vor:

1. Gehen Sie in Shopify zu Settings > Users and permissions.
2. Klicken Sie auf den Mitarbeiter Clerk.io (oder das Personal, das Sie aktualisieren möchten).
3. Scrollen Sie zu Shop-Einstellungen und aktivieren Sie:

• Kundenereignisse anzeigen
• Benutzerdefinierte Pixel verwalten und hinzufügen

4. Klicken Sie auf Save.

Diese Berechtigungen ermöglichen unserem Team die Ansicht des Bereichs Kundenevents sowie die Arbeitsfähigkeit des Clerk Pixels, damit wir die Nachverfolgung der Bestellungen überprüfen können.