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 Verwendung von Clerk mit Shopify” weight: 7

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

Bildgrößen #

Shopify-Bild-URLs können feste Dimensionen aus dem Sync enthalten, z.B. _600x600.

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

Beispiel (ersetzen Sie 600x600 durch Ihre konfigurierte Standardbildgröße):

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

Das ist nützlich, wenn ein Design mehrere Bildformate verwendet (z.B. Produktkarten und große Hero-Platzierungen), und Sie vermeiden möchten, mehrere Bildattribute zu synchronisieren.

Währungsumrechnung #

Shopifys integrierte Währungsumrechnung erleichtert das Auslesen des Währungssymbols und Wechselkurses aus dem Webshop.

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

Standardlösung #

Sie müssen in Ihren Designs einen Formatter für die Umrechnung der Preise verwenden.

Dieses Beispiel verwendet unsere Standard-Template-Sprache hier.

Bei der Verwendung von Währungsumrechnung 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 Stelle, an der der Preis angezeigt werden soll.
2. Fügen Sie den folgenden Liquid-Code ein, um den Preis anhand des Währungsformatters im Textbaustein anzuzeigen:

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

Code-Modus #

1. Gehen Sie in my.clerk.io zu Search/Recommendations > Designs und klicken Sie 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 und das Währungssymbol in Ihrem Design sehen.

Individuelle API-Lösung #

Haftungsausschluss: Dies ist eine sehr individuelle Lösung zur Preisumrechnung, falls keine Daten von der Shopify API bereitgestellt werden. Verwenden Sie dies nur, wenn Sie eine spezielle und individuelle Konfiguration für Preisumrechnungen auf Basis von Geo-IP-Änderungen nutzen.

Dies ist die Dokumentation zur Frontend-Lösung in Github.

Dieser Abschnitt behandelt, wie Sie kontextbezogene Daten in Echtzeit abrufen und innerhalb von Inhalten anzeigen, die von der Clerk API zurückgegeben werden.

Das Designmuster besteht aus folgenden Teilen:

• Eine Kollektion mit allen Produkten.
• Ein alternatives Layout zur Darstellung von Kollektionsinformationen als JSON.
• Eine JavaScript-Klasse, die die in der Kollektion bereitgestellten Daten sammelt.
• Ein JavaScript-Snippet, das die Daten für die entsprechenden Produkt-IDs aus einem Ergebnis ausliest und in ein div im Template einfügt.

Kollektion erstellen #

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

Die Kollektion sollte Clerk api heißen, damit sie die Route /collection/clerk-api im Frontend erhält.

Die Bedingung für die Kollektion sollte etwa price > -1000000 sein.

Alternatives Layout erstellen #

Erstellen Sie ein alternatives Layout zum Anzeigen Ihrer Daten über die Kollektion.

Dazu editieren Sie zunächst den Theme-Code für das gewünschte Theme.

Gehen Sie in der Seitenleiste unter “Templates” auf Neue Vorlage hinzufügen.

Wählen Sie im Pop-up als Ressourcentyp collection.

Für den Dateityp wählen Sie liquid.

Geben Sie im untersten Feld json ein, sodass der Name der erstellten Vorlage collection.json.liquid lautet.

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

Sie können nach Bedarf Felder für das Produkt in diesem Template hinzufügen.

JS-Klasse hinzufügen #

Um die Daten aus Ihrer Kollektion zu verwenden, fügen Sie den kompletten Inhalt von index.js im Ordner class dieses Projekts innerhalb des Skript-Tags mit Clerk.js, das Sie in theme.liquid eingefügt haben, ein.

Das sollte in etwa so aussehen:

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

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

Die Zeit bis zur erneuten Invalidate beträgt 12 Stunden seit der letzten Erstellung der Daten.

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

Template-Funktion hinzufügen #

Fügen Sie das template.js im verwendeten Design-Template ein.

Die Funktion liest die Daten (falls verfügbar) aus und platziert sie in spezifischen Kindelementen innerhalb jeder Produktkachel.

Das Beispiel zeigt die Felder list_price und price.

Zu beachten: Falls Sie andere Felder als price und list_price verwenden möchten, müssen diese in collection.json.liquid ergänzt und anschließend template.html sowie template.js angepasst werden, um diese Felder zu nutzen. Die in Schritt 3 beschriebene Klasse muss nie editiert werden.

Theme-Dateien finden #

Shopify bietet über 100 verschiedene Themes zur Gestaltung und Individualisierung Ihres Webshops.

Jedes Theme funktioniert im Grunde gleich – Sie passen die Theme-Dateien an, um ein bestimmtes Ergebnis in Ihrem Shop zu erzielen.

Die Dateinamen der Theme-Dateien variieren jedoch je nach Theme.

Shopify stellt Ihnen ein Suchfeld zur Verfügung, mit dem Sie schnell und einfach die gewünschte Theme-Datei finden können.

Wenn Sie den Namen der gewünschten Datei nicht kennen, können Sie das Suchfeld nutzen, um sie zu finden.

Beispiel: Suchen Sie die Datei mit dem Code für die Suchseite, so wird sie vermutlich ‘search’ im Dateinamen haben.

Wenn Sie nicht sicher sind, ob Sie die korrekte Datei gefunden haben, vergleichen Sie das HTML der Theme-Datei mit dem HTML der zugehörigen Seite, um Übereinstimmungen festzustellen.

Das geht in Google Chrome, indem Sie mit Rechtsklick einen Abschnitt der Seite anklicken und ‘Untersuchen’ wählen.

Anschließend können Sie das HTML auf der Seite prüfen und kontrollieren, ob Klassen/IDs der Elemente mit denen in der Datei übereinstimmen.

Benötigen Sie weitere Hilfe, können Sie gerne unser Support-Team kontaktieren.

Empfehlungen im Warenkorb-Drawer #

Die Installation durch einen Shopify-Entwickler wird ausdrücklich empfohlen.

Diese Anleitung beschreibt eine stark angepasste Lösung, die sich je nach Shopify-Theme unterschiedlich verhalten kann. Sie ist speziell für Themes gedacht, bei denen sich der Warenkorb auf jeder Seite im DOM befindet, aber erst sichtbar wird, wenn der Nutzer ihn öffnet.

Die Anzeige von Clerk Recommendations im Warenkorb-Drawer auf Shopify ist eine hervorragende Möglichkeit, Kunden vor dem Checkout weitere Produkte zu präsentieren.

1. Bearbeiten Sie den Code Ihres Shopify-Themes unter Online Store > Themes > Edit code.
2. Suchen Sie die Datei, in der sich das Template für den Warenkorb-Drawer befindet (meistens cart-drawer.liquid oder ähnlich).
3. Fügen Sie ein Clerk Recommendations-Snippet aus Recommendations > Elements ein.
4. Benennen Sie die Klasse von clerk um Steuern Sie das Rendering. Zum Beispiel, indem Sie sie clerk_m nennen:

<span class="clerk_m" data-template="@cart-others-also-bought" data-products="[{% for line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>

1. Ergänzend zum oben genannten Snippet fügen Sie ein Skript hinzu, das die Clerk Recommendations rendert, sobald der Nutzer den Warenkorb öffnet. Eine Möglichkeit ist die Nutzung eines MutationObservers. Das folgende Skript schließt alle notwendigen Elemente ein und zeigt ein Beispiel, wie es umgesetzt werden kann:

<script>
    // Zu überwachender Knoten für Mutationen auswählen
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Alle Klassennamen des Cart-Drawers hinzufügen, wenn dieser geöffnet wird
    const targetNodeClasses = "drawer animate active";

    // Optionen für den Beobachter (welche Mutationen beobachtet werden sollen)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funktion zum Abrufen der Warenkorbdaten
    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, die bei beobachteten Mutationen ausgeführt wird
    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;
                    }
                }

            }
        }
    };

    // Beobachter-Instanz erstellen, die mit der Callback-Funktion verknüpft ist
    const clerk_observer = new MutationObserver(callback);

    // Beobachten des Zielknotens für konfigurierte Mutationen starten
    clerk_observer.observe(targetNode, config);
</script>

Ihre Warenkorb-Drawer-Datei sollte nun so aussehen:

HTTP-Authentifizierung #

Die HTTP-Authentifizierung wird häufig auf Staging-Seiten verwendet, um unerwünschte Besucher fernzuhalten.

Dies blockiert den Clerk-Importer und führt im Sync-Log zu einem 401 Unauthorized-Fehler.

Sie können dies beheben, indem Sie die Anmeldedaten 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 mittels Shopify-Integration sendet der Server Ihres Webshops Produkt-, Kategorien- und Verkaufsdaten an Clerk.

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

Hier eine Übersicht der häufigsten Fehler und deren Lösungen.

401 Unauthorized #

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

Lösung: Fügen Sie Benutzernamen und Passwort als Teil der Import-URL ein:

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

Fehler bei Berechtigungen #

Dieser Fehler tritt in der Regel auf, wenn Sie keinen Lesezugriff auf Store content like articles, blogs, comments, pages and redirects in Ihrer Private App erteilt haben.

So beheben Sie das:

1. Melden Sie sich bei Shopify an und gehen Sie zu Apps > Manage Private Apps > Clerk.io (bzw. dem von Ihnen vergebenen Namen der App).
2. Scrollen Sie zu Admin API Berechtigungen und klicken Sie auf Deaktivierte Admin-API-Berechtigungen überprüfen.
3. Suchen Sie Store content like articles, blogs, comments, pages and redirects und wählen Sie Lesezugriff:

1. Scrollen Sie ganz nach oben und klicken Sie auf Speichern.

Umgehen von require.js #

Diese Anleitung gilt nur bei Verwendung von Clerk.js 1.

In manchen Setups verhindert Require.js das Laden von Clerk.js, sodass keine Slider oder Suchergebnisse angezeigt werden.

In diesem Fall wird folgender Fehler in Ihrer Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, wie Sie Require.js umgehen. Beide Varianten erfordern eine Anpassung des Tracking-Skripts, das normalerweise in index.liquid eingefügt wird.

In Require.js einbinden #

Die beste Methode ist zu versuchen, dass Require.js Clerk erkennt.

Dazu fügen Sie require(['clerk'], function() {}); am Ende des Tracking-Skripts ein:

Require.js ignorieren #

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

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

Nach Anwendung einer dieser Methoden ist Require.js mit Clerk kompatibel.

Upgrade auf Clerk.js 2 #

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

Damit wird die Installation von Clerk auf jedem Webshop vereinfacht.

Da sich die beiden Versionen leicht unterscheiden, müssen Sie diese Schritte für ein erfolgreiches Upgrade befolgen.

Die zwei wichtigsten Unterschiede in Clerk.js 2 sind:

• Die Designs in my.clerk.io verwenden die Liquid Template-Sprache, können aber auch einfach mit dem Design Editor erstellt werden.
• Das Skript muss direkt vor dem </head>-Tag im Template Ihres Webshops eingefügt werden.

Designs erstellen #

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

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

• Nutzen Sie den intuitiven Design Editor, um neue Designs zu erstellen, wie in den nächsten Punkten beschrieben.
• Konvertieren Sie Ihre alten Designs. Folgen Sie dieser Anleitung, um zu sehen, wie es geht.

Design Editor-Option #

1. Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
2. Geben Sie im folgenden Bildschirm Ihrem Design einen Namen (wir empfehlen, “V2” hinzuzufügen, damit Sie sofort erkennen, dass Sie Clerk.js 2 verwenden).
3. Wählen Sie den Design-Typ.
4. Klicken Sie auf Design veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.
5. Im Design Editor: Klicken Sie auf ein bestehendes Element wie Name, Bild, Button usw., um es zu bearbeiten, oder fügen Sie neue Elemente hinzu, um weitere Informationen über Produkte darzustellen.
6. Klicken Sie auf Veröffentlichen. Dadurch sind die geänderten Designs zunächst nicht sichtbar, bis Sie Schritt 2 fertigestellt haben. Wählen Sie das neue Design für alle zu aktualisierenden Elemente aus.
7. Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihr Clerk-Element auf das neue Design.

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

Skript ersetzen #

1. Suchen Sie die Template-Datei, die für alle Seiten des Webshops verwendet wird und in der sich das ursprüngliche Clerk.js-Skript am unteren Ende befindet.
2. Entfernen Sie das alte Skript aus der Datei:

1. Gehen Sie zu my.clerk.io > Developers > Tracking Code.. Auf dieser Seite finden Sie nun Ihren Clerk.js 2 Tracking-Code.
2. Kopieren Sie diesen Code und fügen Sie ihn direkt vor dem </head>-Tag in das Template ein:

1. Speichern Sie Ihr Template.

Herzlichen Glückwunsch! Sie verwenden 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 bei der Fehlersuche beim Order-Tracking via Shopify-Pixel unterstützen, können wir nach Zugriff auf die Kundenevents in Ihrem Shopify-Admin fragen.

So vergeben Sie die erforderlichen Berechtigungen:

1. Gehen Sie in Shopify zu Settings > Users and permissions.
2. Klicken Sie auf den Mitarbeiter mit dem Namen Clerk.io (oder den zu aktualisierenden Benutzer).
3. Scrollen Sie zu Shop-Einstellungen und aktivieren Sie:

• Kundenevents anzeigen
• Eigene Pixels verwalten und hinzufügen

4. Klicken Sie auf Save.

Diese Berechtigungen ermöglichen unserem Team, den Bereich “Kundenevents” einzusehen und den Clerk-Pixel zu verwalten, sodass wir die Auftragserfassung korrekt überprüfen können.