Aller au contenu principal

Shopify - Tester un template de PDP

Dernière mise à jour le 22 avr. 20262 min de lecture
Table des matières

En bref​

Avec Varify, tu peux facilement tester des templates de PDP alternatifs pour ta boutique Shopify. Pour cela, crée d'abord un nouveau template de PDP avec toutes les personnalisations souhaitées. Crée un nouveau test A/B et ajoute le JavaScript de ce guide. Aucune modification des produits ou des paramètres Shopify n'est nécessaire.

Créer un nouveau modèle​

Crée d'abord un nouveau modèle pour ta page produit (PDP). Cela te permet de tester des dispositions alternatives, des widgets d'application ou d'autres éléments.

Comment créer un nouveau modèle en quelques étapes :

  1. Va dans Online Store > Themes > Customize
  2. Clique sur le menu déroulant en haut, qui est défini sur « Home page » par défaut
  3. Sélectionne la zone Products dans le menu déroulant
  4. Clique sur Create Template pour créer ton nouveau modèle de PDP
Éditeur de thème Shopify en trois étapes : ouvre le menu déroulant de la page, sélectionne « Products », puis clique sur « Create template »
  1. Donne un nom au nouveau template, par exemple : new-pdp.
  2. Sous « Based on », sélectionne le template que tu utilises actuellement — il servira de point de départ pour ton nouveau template.
Boîte de dialogue Shopify « Create a template » avec le nom « new-pdp » basé sur « Default product »
  1. Effectue maintenant toutes les modifications souhaitées sur le nouveau template :
  • Teste des widgets d’une app Shopify
  • Crée de nouveaux blocs, éléments ou textes
  • Modifie l’ordre des blocs existants
  • Personnalise le schéma de couleurs
  • et bien plus encore
  1. Enregistre ensuite la nouvelle version de ton template PDP. Elle n’est pas encore visible car tes produits sont toujours configurés sur le template d’origine.

Crée une nouvelle expérience dans Varify​

  1. Crée une nouvelle expérience sur une de tes pages produit
  2. Clique sur le symbole de code en haut à droite
  3. Sélectionne "Add JavaScript"
  4. Insère le JavaScript suivant
  5. À la ligne 5, change la valeur de la constante pdpVariationName 'new-pdp' et remplace-la par le nom de ton nouveau template
  6. Aux lignes 3 et 4, remplace les IDs d’expérience et de variante par les IDs correspondants de l’expérience. (Important : tu dois d’abord enregistrer le test une fois pour que les IDs soient créés. Tu peux ensuite l’enregistrer à nouveau via Edit et remplacer les IDs).
  7. Enregistre l’expérience
(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;
  }
})();

Configurer et démarrer le ciblage de l'expérience​

L'expérience doit être affichée sur toutes les pages produit. Il est donc nécessaire d'apporter un petit ajustement au ciblage de page.

  1. Ouvre le ciblage de page de l'expérience
  2. Définis le ciblage sur /products/ avec le type de correspondance « Contains »
  3. Si tes pages de détail produit ne sont pas clairement identifiables via l'URL, tu peux également utiliser un sélecteur CSS unique qui n'apparaît que sur tes PDP. Le sélecteur « Buybox » convient généralement à cet usage.
  4. Démarre l'expérience
Ciblage de page du « PDP Template test » : la condition d'URL « Contains » correspond à « /products/ »
Sur cette page