Shopify - Modello PDP di prova
Indice dei contenuti
Breve e dolce
Con Varify, potete facilmente testare modelli PDP alternativi per il vostro negozio Shopify. A tale scopo, creare innanzitutto un nuovo modello PDP con tutte le personalizzazioni desiderate. Creare un nuovo test A/B e aggiungere il JavaScript di questa guida. Non è necessario modificare i prodotti o le impostazioni di Shopify.
Creare un nuovo modello
Creare innanzitutto un nuovo modello per la pagina di dettaglio del prodotto (PDP). In questo modo è possibile testare disposizioni alternative, widget dell'app o altri elementi.
Come creare un nuovo modello in pochi passi:
- Andare al Negozio online > Temi > Personalizza
- Fare clic sul menu a discesa in alto, che per impostazione predefinita è impostato su "Pagina iniziale".
- Selezionare l'area Prodotti nel menu a tendina
- Cliccare su Crea modello per creare il nuovo modello di PDP.
Assegnare al nuovo modello un nome, ad esempio: new-pdp.
In "Basato su", selezionare il modello attualmente in uso, che servirà come punto di partenza per il nuovo modello.
- Ora apportate tutte le modifiche desiderate al nuovo modello:
- Test dei widget di un'applicazione Shopify
- Creare nuovi blocchi, elementi o testi
- Modificare l'ordine dei blocchi esistenti
- Personalizzare la combinazione di colori
- e molto altro ancora
- Salvare quindi la nuova versione del modello PDP. Non è ancora visibile, poiché i prodotti sono ancora impostati sul modello originale.
Creare un nuovo esperimento in Varify
Creare un nuovo esperimento su una delle pagine dei prodotti
Cliccare sul simbolo del codice in alto a destra
Selezionare "Aggiungi JavaScript".
Inserite il seguente codice JavaScript
Alla riga 5, modificare il valore della costante pdpVariationName 'new-pdp' e sostituirlo con il nome del nuovo template
Nelle righe 3 e 4, modificare gli ID dell'esperimento e della variante con gli ID dell'esperimento. (Importante: è necessario salvare il test una volta prima, in modo che gli ID vengano creati. È quindi possibile salvarlo tramite Modifica riaprire e sostituire gli ID).
Salvare 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;
}
})();
Configurare e avviare il targeting degli esperimenti
L'esperimento deve essere visualizzato su tutte le pagine dei prodotti. Pertanto, è necessario un piccolo aggiustamento nel targeting delle pagine.
Aprire la pagina di destinazione dell'esperimento
Impostare il targeting su /products/ con il tipo di corrispondenza "Contains".
Se le pagine di dettaglio dei prodotti non sono chiaramente identificabili tramite l'URL, è possibile utilizzare un selettore CSS unico che compare solo sulle PDP. Il selettore "Buybox" è solitamente adatto a questo scopo.
Avviare l'esperimento
