Passa al contenuto principale

Shopify - Testare il template PDP

Ultimo aggiornamento il 22 apr 20262 min di lettura
Indice

In breve​

Con Varify puoi testare facilmente template PDP alternativi per il tuo store Shopify. Per farlo, crea prima un nuovo template PDP con tutte le personalizzazioni desiderate. Crea un nuovo A/B test e aggiungi il JavaScript di questa guida. Non è necessario alcun cambiamento ai prodotti o alle impostazioni di Shopify.

Crea nuovo template​

Prima crea un nuovo template per la tua pagina di dettaglio prodotto (PDP). Questo ti permette di testare disposizioni alternative, widget dell'app o altri elementi.

Come creare un nuovo template in pochi passaggi:

  1. Vai su Online Store > Themes > Customize
  2. Clicca sul menu a tendina in alto, impostato di default su "Home page"
  3. Seleziona l'area Products nel menu a tendina
  4. Clicca su Create Template per creare il tuo nuovo template PDP
Editor di temi Shopify in tre passaggi: apri il menu a tendina della pagina, seleziona «Products», poi clicca su «Create template»
  1. Assegna un nome al nuovo template, ad esempio: new-pdp.
  2. In „Based on“, seleziona il template che stai attualmente utilizzando: fungerà da punto di partenza per il tuo nuovo template.
Finestra di dialogo Shopify „Create a template“ con il nome „new-pdp“ basato su „Default product“
  1. Ora apporta tutte le modifiche desiderate al nuovo template:
  • Testa i widget di un'app Shopify
  • Crea nuovi blocchi, elementi o testi
  • Modifica l'ordine dei blocchi esistenti
  • Personalizza lo schema colori
  • e molto altro
  1. Poi salva la nuova versione del tuo template PDP. Non è ancora visibile poiché i tuoi prodotti sono ancora impostati sul template originale.

Crea un nuovo esperimento in Varify​

  1. Crea un nuovo esperimento su una delle tue pagine prodotto
  2. Clicca sull'icona del codice in alto a destra
  3. Seleziona "Add JavaScript"
  4. Inserisci il seguente JavaScript
  5. Nella riga 5, cambia il valore della costante pdpVariationName 'new-pdp' e sostituiscilo con il nome del tuo nuovo template
  6. Nelle righe 3 e 4, cambia gli ID dell'esperimento e della variante con gli ID corrispondenti dell'esperimento. (Importante: devi prima salvare il test una volta affinché gli ID vengano effettivamente creati. Puoi poi salvarlo di nuovo tramite Edit e sostituire gli ID).
  7. Salva l'esperimento
(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;
  }
})();

Configura e avvia il targeting dell'esperimento​

L'esperimento dovrebbe essere mostrato su tutte le pagine prodotto. Pertanto, è necessaria una piccola modifica nel targeting delle pagine.

  1. Apri il targeting delle pagine dell'esperimento
  2. Imposta il targeting su /products/ con il tipo di corrispondenza "Contains"
  3. Se le tue pagine di dettaglio prodotto non sono chiaramente identificabili tramite l'URL, puoi anche usare un selettore CSS univoco che compare solo nelle tue PDP. Il selettore "Buybox" è solitamente adatto a questo scopo.
  4. Avvia l'esperimento
Targeting delle pagine del «PDP Template test»: la condizione URL «Contains» corrisponde a «/products/»
Su questa pagina