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 3 den Wert der Konstante pdpVariationName ‘new-pdp’ und ersetze diesen mit dem Namen deines neuen Templates
Speichere das Experiment
// ─── CONFIG ───
// Just set this to match your Shopify alternate PDP template name:
const pdpVariationName = 'new-pdp';
(function () {
const href = window.location.href;
const forbiddenRegex = /[?&#](?:varify-variation-id|varify-variation-name|varify-editor)=/;
// ─── 0. Bail out if any forbidden param is present ───
if (forbiddenRegex.test(href)) {
return;
}
// ─── 1. Hide everything until we’ve loaded the variation ───
document.documentElement.style.visibility = 'hidden';
const url = new URL(href);
const params = new URLSearchParams(url.search);
// ─── 2. Merge existing params (e.g. variant=…) & add view ───
params.set('view', pdpVariationName);
// ─── 3. Fetch the variation template HTML ───
fetch(`${url.pathname}?${params.toString()}`, { credentials: 'same-origin' })
.then(res => res.text())
.then(html => {
// ─── 4. Parse & swap head/body ───
const doc = new DOMParser().parseFromString(html, 'text/html');
document.head.replaceWith(doc.head);
document.body.replaceWith(doc.body);
// ─── 5. Remove only the `view` param, keep all others ───
params.delete('view');
const cleanQS = params.toString();
const cleanURL = url.pathname + (cleanQS ? `?${cleanQS}` : '') + url.hash;
history.replaceState(null, '', cleanURL);
// ─── 6. Un-hide the page ───
document.documentElement.style.visibility = '';
})
.catch(() => {
// On error, just show the default template
document.documentElement.style.visibility = '';
});
})();
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
