Shopify - PDP Template testen
Inhaltsverzeichnis
Kurz & Knapp
Mit Varify kannst du ganz einfach alternative PDP-Templates für deinen Shopify-Store testen. Lege dafür zuerst ein neues PDP-Template mit allen gewünschten Anpassungen an. Erstelle einen neuen A/B-Test und füge das JavaScript aus dieser Anleitung hinzu. Änderungen an Produkten oder Shopify-Einstellungen sind nicht nötig.
Neues Template anlegen
Lege zuerst ein neues Template für deine Produktdetailseite (PDP) an. So kannst du alternative Anordnungen, App-Widgets oder andere Elemente testen.
So erstellst du ein neues Template in wenigen Schritten:
- Gehe zu Online Store > Themes > Customize
- Klicke oben auf das Dropdown-Menü, das standardmäßig auf “Home page” steht
- Wähle im Dropdown den Bereich Products
- Klicke auf Create Template, um dein neues PDP-Template anzulegen
Gib dem neuen Template einen Namen, wie beispielsweise: new-pdp.
Wähle bei “Based on” das aktuell verwendete Template aus – es dient als Ausgangspunkt für dein neues Template.
- Führe jetzt alle deine gewünschten Änderungen am neuen Template durch:
- Teste Widgets einer Shopify App
- Erstelle neue Blöcke, Elemente oder Texte
- Ändere die Reihenfolge vorhandener Blöcke
- Passe das Farbschema an
- und vieles mehr
- Speichere anschließend die neue Variante deines PDP-Templates. Sie ist noch nicht sichtbar, da deine Produkte weiterhin auf das ursprüngliche Template eingestellt sind.
Erstelle ein neues Experiment in Varify
Erstelle ein neues Experiment auf einer deiner Produktseite
Klicke oben rechts auf das Code-Symbol
Wähle “Add JavaScript”
Füge das nachfolgende JavaScript ein
Ändere in Zeile 5 den Wert der Konstante pdpVariationName ‘new-pdp’ und ersetze diesen mit dem Namen deines neuen Templates
Ändere in Zeile 3 und 4 die Experiment- und Varianten-ID entsprechend auf die IDs des Experiments. (Wichtig: Du musst den Test vorher einmal speichern, damit die IDs überhaupt angelegt werden. Danach kannst du ihn über Edit erneut öffnen und die IDs ersetzen.)
Speichere das Experiment
(function () {
// ─── CONFIG ───
const experimentId = 32898;
const variationId = 49279;
const viewValue = 'new-pdp'; //"view"-value (z.B. Template-Name)
// ─── HELPERS ───
if (window.varify.helpers.isInEditor()) {
return
}
// ─── LOGIC ───
const params = new URLSearchParams(window.location.search);
const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');
const needsView = params.get('view') !== String(viewValue);
const needsVa = params.get('va-red') !== paramAsBase64;
if (needsView || needsVa) {
params.set('view', String(viewValue));
params.set('va-red', paramAsBase64);
const newUrl =
`${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;
window.location.href = newUrl;
}
})();
Experiment Targeting konfigurieren und starten
Das Experiment soll auf allen Produktseiten ausgespielt werden. Daher ist eine kleine Anpassung im Page Targeting nötig.
Öffne das Page Targeting des Experiments
Stelle das Targeting auf /products/ mit dem Matching Type “Contains”
Falls deine Produktdetailseiten nicht eindeutig über die URL identifizierbar sind, kannst du diese auch mittels eines eindeutigen CSS-Selektor verwenden, der nur auf deinen PDPs vorkommt. Hierzu eignet sich in der Regel der Selektor der “Buybox”.
Starte das Experiment
