Zum Hauptinhalt springen

Shopify - Test PDP-Template

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

Kurz gesagt​

Mit Varify kannst du einfach alternative PDP-Templates für deinen Shopify-Store testen. Erstelle dazu zunächst ein neues PDP-Template mit allen gewünschten Anpassungen. Erstelle einen neuen A/B-Test und füge das JavaScript aus diesem Guide hinzu. Änderungen an Produkten oder Shopify-Einstellungen sind nicht notwendig.

Neue Vorlage erstellen​

Erstelle zunächst eine neue Vorlage für deine Produktdetailseite (PDP). Damit kannst du alternative Anordnungen, App-Widgets oder andere Elemente testen.

So erstellst du in wenigen Schritten eine neue Vorlage:

  1. Gehe zu Online Store > Themes > Customize
  2. Klicke auf das Dropdown-Menü oben, das standardmäßig auf „Home page“ eingestellt ist
  3. Wähle im Dropdown den Bereich Products aus
  4. Klicke auf Create Template, um deine neue PDP-Vorlage zu erstellen
Shopify-Theme-Editor in drei Schritten: Öffne das Seiten-Dropdown, wähle „Products“ aus und klicke dann auf „Create template“
  1. Gib dem neuen Template einen Namen, zum Beispiel: new-pdp.
  2. Wähle unter „Based on“ das Template aus, das du aktuell verwendest – es dient als Ausgangspunkt für dein neues Template.
Shopify-Dialog „Create a template“ mit dem Namen „new-pdp“ basierend auf „Default product“
  1. Nimm nun alle gewünschten Änderungen am neuen Template vor:
  • Teste Widgets einer Shopify-App
  • Erstelle neue Blöcke, Elemente oder Texte
  • Ändere die Reihenfolge bestehender Blöcke
  • Passe das Farbschema an
  • und vieles mehr
  1. Speichere anschließend die neue Version 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​

  1. Erstelle ein neues Experiment auf einer deiner Produktseiten
  2. Klicke oben rechts auf das Code-Symbol
  3. Wähle „Add JavaScript“ aus
  4. Füge das folgende JavaScript ein
  5. Ändere in Zeile 5 den Wert der Konstante pdpVariationName 'new-pdp' und ersetze ihn durch den Namen deines neuen Templates
  6. Ändere in den Zeilen 3 und 4 die Experiment- und Variant-IDs entsprechend auf die IDs des Experiments. (Wichtig: Du musst den Test vorher einmal speichern, damit die IDs überhaupt erst erstellt werden. Anschließend kannst du ihn über Edit erneut speichern und die IDs ersetzen).
  7. 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;
  }
})();

Konfiguriere und starte das Experiment-Targeting​

Das Experiment soll auf allen Produktseiten angezeigt werden. Daher ist eine kleine Anpassung im Page Targeting notwendig.

  1. Öffne das Page Targeting des Experiments
  2. Setze das Targeting auf /products/ mit dem Matching-Typ „Contains“
  3. Falls deine Produktdetailseiten nicht eindeutig über die URL identifizierbar sind, kannst du auch einen eindeutigen CSS-Selektor verwenden, der nur auf deinen PDPs vorkommt. Der Selektor „Buybox“ ist dafür in der Regel geeignet.
  4. Starte das Experiment
Page Targeting des „PDP Template test“: Die URL-Bedingung „Contains“ matcht „/products/“
Auf dieser Seite