Zum Hauptinhalt springen

Shopify-Themes mit Varify.io testen

Zuletzt aktualisiert am 22. Apr. 20264 Min. Lesezeit
Inhaltsverzeichnis

Kurz gefasst​

Nutze das Feature „Shopify Theme Preview“, um mit Varify.io einfach ein neues Shopify-Theme per A/B-Test gegen dein altes zu testen. Erstelle dazu ein neues Experiment und verwende den bereitgestellten JavaScript-Code. Passe ihn mit deiner neuen Theme-ID an und teste das neue Theme, bevor du deinen Store umstellst.

Verwende Theme-Tests nur, wenn du wirklich ein neues Theme testen möchtest. Wir empfehlen generell, Änderungen mit dem Varify Visual Editor oder mit JSS- und/oder CSS-Änderungen vorzunehmen. Wir garantieren nicht für die Funktionalität des bereitgestellten Codes und die Funktionalitäten von Shopify. Ein gründliches QA ist für einen Theme-Test unbedingt erforderlich.

Warum Shopify-Themes testen​

Ein neues Shopify-Theme sollte vor dem Wechsel per A/B-Test geprüft werden, um sicherzustellen, dass es die Store-Performance nicht verschlechtert. Designänderungen können das Kundenverhalten und KPIs wie die Conversion Rate beeinflussen. A/B-Testing ermöglicht eine datengestützte Prüfung, ob das neue Theme bessere oder schlechtere Ergebnisse liefert.

Schritt 1: Varify.io-Snippet in die Datei theme.liquid einfügen​

💡Hinweis: Wir empfehlen, das Varify-Snippet für das Testen von Themes über die Datei themes.liquid zu integrieren. Schritt 1 muss nur durchgeführt werden, wenn das Varify-Snippet noch nicht auf deiner Website installiert ist.

Kopiere das Varify.io-Snippet aus dem Dashboard und füge es so weit oben wie möglich in die theme.liquid-Datei deines Stores ein. Gehe dazu im Shopify-Backend zu „Online Store“ -> „Themes“ und klicke auf „edit code“

Shopify „Themes“ mit geöffnetem Kontextmenü des aktuellen Themes und hervorgehobenem Eintrag „Edit code“ Anschließend kannst du den Varify.io-Snippet wie im folgenden Beispiel einfügen. Bitte ändere nichts an dem Snippet, auch wenn Shopify Änderungsvorschläge macht - Änderungen führen zu Flicker-Effekten oder der A/B-Test funktioniert nicht mehr.

Shopify-Code-Editor mit geöffneter theme.liquid; das Varify-Snippet sitzt direkt unter dem öffnenden „<head>“-Tag Teste, ob die Implementierung erfolgreich war. Erstelle dazu testweise über das Varify.io-Dashboard ein neues Experiment auf einer Produktseite deines Stores. Wenn sich der Editor öffnet, war die Implementierung erfolgreich.

Varify-Dashboard mit der eingegebenen Shopify-Shop-URL neben der Schaltfläche „Create new Experiment“

Schritt 2: Finde die Theme-ID des neuen Themes, das du testen möchtest​

Wir benötigen die Theme-ID, um Shopify mitzuteilen, welches Theme die Testteilnehmer sehen sollen. Hier ist eine Schritt-für-Schritt-Anleitung, wie du die Theme-ID aus dem Vorschau-Link findest:

  1. Gehe zu: Sales Channels > Online Store > Themes > Theme Library.

  2. Suche nach dem Theme, das du testen möchtest.

  3. Klicke auf die drei Punkte (Actions)

  4. Klicke auf „Preview“ und kopiere den Link.

Dein Preview-Link sieht dann ungefähr so aus: https://deinshop.myshopify.com/?preview_theme_id=1234567890

Die Zahl am Ende des Links (1234567890) ist die Theme-ID, die du brauchst.

Mach jetzt dasselbe für dein aktuelles Theme und kopiere die Theme-ID auch hier.

Schritt 3: Experiment erstellen​

Erstelle ein neues Experiment. Gib einfach die Startseite deines Shops als Editor-URL im Varify-Dashboard ein. Klicke dann auf „Add JS“ und füge dem Experiment das folgende JavaScript hinzu.

Varify-Editor-Dialog „Add JS“ mit dem Skript, das das Theme wechselt; die Zeile „preview_theme_id“ übernimmt die ID des neuen Themes

💡Hinweis: Trage in Zeile 6 die Theme-ID deines aktuell verwendeten Themes ein und in Zeile 17 die Theme-ID, die getestet werden soll.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (themeElement) => {
    // …then run your redirect logic.
    (function () {
      const url = new URL(window.location.href);
      const params = url.searchParams;
      const shadow = document.querySelector('div#varify-shadow-root');

      // only redirect when the variation-param is missing AND the shadow-root isn't present
      if (!params.has('pb') && !shadow) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // replace so you don't add a new history entry
        window.location.replace(url.toString());
      } else {
        console.log('Redirect skipped:', {
          hasVarifyVariation: params.has('varify-variation-id'),
          varifyShadowRootExists: !!shadow
        });
      }
    })();
  }
);

Sobald du das Code-Snippet mit den neuen Theme-IDs aktualisiert hast, klicke auf „Finished“ und gib dem Experiment einen passenden Namen. Öffne dann „Page Targeting“ im Experiment und ändere den „Match Type“ von „Simple Match“ auf „Contains.“ Klicke anschließend auf „Save Page Targeting.“.

Seiten-Targeting des „Shopify Theme Test“: Die URL-Bedingung „Contains“ stimmt mit der Shop-Domain überein

Sobald du oder ein Besucher die Testversion gesehen hat, wird auch nach Abschluss des Experiments weiterhin die Preview-Version angezeigt. Damit du in der Original-Variante auch wieder das Original-Theme siehst, erstelle eine neue Variante mit dem Namen "New Original". Klicke dann im Visual Editor auf "Add JS", füge den folgenden JavaScript-Code ein und ersetze die data-theme-instance-id durch die Preview-Theme-ID des Shopify-Themes, das du testen möchtest.

Laufender „Shopify Theme Test“ mit drei Zeilen: Original bei 0 % Traffic, „Variation 1“ und „New Original“ bei je 50 % 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Schritt 4: Targeting und Qualitätssicherung​

Sobald du das JavaScript implementiert und das Experiment gespeichert hast, kannst du deine Store-URL im Seiten-Targeting des Experiments speichern. Du kannst außerdem die "Preview"-Links nutzen, um zu prüfen, ob die Weiterleitung funktioniert und ob alle Einstellungen korrekt vorgenommen wurden. Suche dazu einfach im Store-Code nach der entsprechenden Theme-ID. In der Testversion sollte entweder die Original-Theme-ID oder die Preview-Theme-ID zu finden sein.

Schritt 5: Experiment starten​

Starte nun das Experiment mit "Start Experiment". Ab sofort werden 50 % deiner Besucher auf das neue Theme geleitet und 50 % sehen weiterhin das alte Theme. Die Besucher bleiben für die Dauer des Experiments immer derselben Variante zugeordnet. Das bedeutet, dass sie das Theme, das sie einmal gesehen haben, während des Experiments erneut sehen. Nach einiger Zeit erkennst du, welches Theme besser performt.

Schritt 6: Vorschau-Modus nach Beendigung des Experiments zurücksetzen​

Sobald deine Nutzer die Vorschau-Theme-Variante gesehen haben, sehen sie diese auch nach Beendigung des Experiments weiterhin. Du kannst ein "Clean Up"-Experiment starten, damit die Nutzer wieder dein ursprüngliches Theme sehen können. Erstelle einfach ein neues Experiment und füge den JavaScript-Code der "New Original"-Variante (siehe oben) unter "Add JS" ein. Speichere das Experiment unter einem Namen deiner Wahl. Setze die Traffic-Zuteilung auf 100 % Variante und starte das Experiment.

Der Vorschau-Modus ist nun für alle bisherigen Testteilnehmer beendet, die die Variante gesehen haben. Bitte überprüfe die Funktionalität des Codes, bevor du das Experiment startest, wie in den vorherigen Schritten.

Auf dieser Seite