Shopify - Tester un modèle PDP
Table des matières
En bref
Avec Varify, tu peux facilement tester des modèles PDP alternatifs pour ton magasin Shopify. Pour cela, crée d'abord un nouveau modèle PDP avec toutes les adaptations souhaitées. Crée un nouveau test A/B et ajoute le JavaScript de ce guide. Il n'est pas nécessaire de modifier les produits ou les paramètres Shopify.
Créer un nouveau modèle
Commence par créer un nouveau modèle pour ta page de détails du produit (PDP). Tu pourras ainsi tester des dispositions alternatives, des widgets d'application ou d'autres éléments.
Voici comment créer un nouveau modèle en quelques étapes :
- Allez sur Online Store > Thèmes > Personnaliser
- Clique en haut sur le menu déroulant qui se trouve par défaut sur "Home page".
- Sélectionne dans la liste déroulante la section Products
- Clique sur Create Template pour créer ton nouveau modèle PDP.
Donne un nom au nouveau modèle, par exemple : new-pdp.
Sélectionne dans "Based on" le modèle actuellement utilisé - il servira de point de départ pour ton nouveau modèle.
- Effectue maintenant toutes les modifications souhaitées sur le nouveau modèle :
- Tester les widgets d'une application Shopify
- Crée de nouveaux blocs, éléments ou textes
- Modifier l'ordre des blocs existants
- Personnalise le schéma de couleurs
- et bien plus encore
- Enregistre ensuite la nouvelle variante de ton modèle PDP. Elle n'est pas encore visible, car tes produits sont toujours réglés sur le modèle d'origine.
Créer une nouvelle expérience dans Varify
Crée une nouvelle expérience sur une de tes pages produit
Clique sur l'icône de code en haut à droite
Choisis "Add JavaScript".
Insère le JavaScript suivant
En ligne 3, modifie la valeur de la constante pdpVariationName 'new-pdp' et remplace-le par le nom de ton nouveau template
Enregistre l'expérience
// ─── 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 = '';
});
})();
Configurer et lancer le ciblage d'expériences
L'expérience doit être diffusée sur toutes les pages de produits. Une petite adaptation du Page Targeting est donc nécessaire.
Ouvre le Page Targeting de l'expérience
Ciblez /products/ avec le type de correspondance "Contains".
Si tes pages de détail de produits ne sont pas clairement identifiables par leur URL, tu peux aussi les utiliser au moyen d'un sélecteur CSS unique qui n'apparaît que sur tes PDP. En règle générale, le sélecteur de la "Buybox" convient à cet effet.
Commence l'expérience
