Durch A/B-Tests von Shopify-Themes kannst du ein veraltetes oder nicht optimal angepasstes Theme gegen eine deutlich bessere Alternative antreten lassen. So findest du heraus, welches Design und Layout bei deinen Kunden am besten ankommt, die Conversion-Rate steigert und letztendlich deinen Umsatz erhöht.
Durch das Testen verschiedener Themes erhältst du wertvolle Einblicke in das Verhalten und die Vorlieben deiner Nutzer. Auf dieser Grundlage kannst du nach den Theme-Tests mit gezielten, detaillierteren Optimierungen weitermachen. In diesem Blogpost zeigen wir dir, wie du durch strategische Tests die ideale Basis für deinen Shopify-Shop schaffst und das volle Potenzial deines Online-Stores ausschöpfst.
1. Erstelle einen Varify.io® A/B Testing Account mit 30 Tagen kostenloser Trial Phase
Besuche https://varify.io/registrierung und erstelle einen Account für deinen Shop. Sobald du die Willkommen Email bestätigt hast kannst du dich einloggen und mit dem Setup beginnen. In der Regel reicht die Trial Phase aus, um deinen Shopify Theme A/B Test durchzuführen.
2. Varify.io® mit deinem Shopify Store verbinden
Es gibt drei verschiedene Möglichkeiten deinen Store mit Varify.io® zu verbinden:
1. Das Snippet in die Theme.liquid Datei einfügen (Empfohlen)
Kopiere das Varify.io-Snippet aus dem Dashboard und füge es möglichst weit oben in die Datei theme.liquid deines Stores ein. Gehe dazu im Shopify Backend zu “Online Store”-> “Themes” und klicke auf “edit code”
2. Implementiere das Snippet alternativ mit dem Google Tag Manager (nicht empfohlen). Wie erfährst du hier.
3. Lade die Varify.io A/B Testing Shopify App herunter und trage deine Account ID ein (bald verfügbar).
So geht es weiter:
Nachdem das Snippet implementiert wurde, öffne im Varify.io-Dashboard eine deiner Produktdetailseiten. Wenn sich der Editor in deinem Shop öffnet, war die Implementierung erfolgreich.
3. Finde die Theme ID des neuen Themes, das du Testen möchtest
Die Theme-ID benötigen wir, 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 herausfindest:
1. Gehe zu: Vertriebskanäle > Online-Shop > Themes > Theme-Bibliothek.
2. Wähle das Theme aus, das du testen möchtest.
3. Klicke auf: Aktionen.
4. Rechtsklicke auf Vorschau und kopiere den Link.
Dein Vorschau-Link wird etwa so aussehen: https://deinshop.myshopify.com/?preview_theme_id=1234567890
Die Zahl am Ende des Links (1234567890) ist die Theme-ID, die du benötigst.
4. Erstelle das Experiment
Öffne irgendeine Seite deines Stores mit dem Editor. Als nächstes musst du folgendes JavaScript zum Experiment hinzufügen. WICHTIG: Bitte vergiss nicht, die Theme-ID aus dem vorherigen Schritt auszutauschen.
Dieser JS Code muss rechts oben bei “JavaScript” eingefügt werden – mit der Theme ID, die wir vorhin gefunden haben.
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('varify-mode') !== 'edit') {
var themeName = 'newTestTheme', themeQueryParam = {
_ab: 0,
_fd: 0,
_sc: 1,
preview_theme_id: 123456789876 // add theme ID here
};
var updateQueryStringParameter = function (uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (value === undefined) {
if (uri.match(re)) { return uri.replace(re, '$1$2'); } else { return uri; }
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if (uri.indexOf('#') !== -1) { hash = uri.replace(/.*#/, '#'); uri = uri.replace(/#.*/, ''); }
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
};
var themeUrl = window.location.href;
for (var key in themeQueryParam) {
themeUrl = updateQueryStringParameter(themeUrl, key, themeQueryParam[key]);
}
if (!(sessionStorage.getItem('theme-' + themeName) == 'true')) {
sessionStorage.setItem('theme-' + themeName, 'true');
window.location.href = themeUrl;
}
};
Als nächstes fügen wir noch folgendes CSS in die CSS-Funktion ein, um die Vorschau-Leiste in Shopify auszublenden:
#preview-bar-iframe{display: none !important;}
Im Editor sieht es dann aus wie in der folgenden Abbildung. Hast du beide Snippets erfolgreich im Experiment gespeichert, kannst du auf “Finished” klicken und dem Experiment einen Namen geben.
5. Targeting und Qualitätssicherung
Nachdem du das JavaScript und CSS implementiert und das Experiment gespeichert hast, kannst du deine Shop URL im Page-Targeting des Experiments speichern. Außerdem kannst du nun mit den “Preview”-Links überprüfen, ob die Weiterleitung funktioniert und ob alle Einstellungen korrekt vorgenommen wurden.
Ein Tipp: Sollte die Weiterleitung nicht sofort kommen, sondern du siehst das aktuelle Theme einen Moment, solltest du Prüfen ob du das Snippet aus Schritt 2.1 weiter nach oben setzen kannst.
6. Starte den A/B Test
Nun starte das Experiment mit “Start Experiment”. In wenigen Momenten werden die ersten Besucher deines Shops schein auf das neue Theme geleitet. Varify.io® wird nun tracken wie viele User jeweils im ursprünglichen und neuen Theme gekauft haben. Nach einiger Zeit wirst du erkennen welches Theme besser performt.
