Aller au contenu principal

Tester des thèmes Shopify avec Varify.io

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

En bref​

Utilise la fonctionnalité « Shopify Theme Preview » pour tester facilement en A/B un nouveau thème Shopify par rapport à ton ancien thème avec Varify.io. Pour cela, crée une nouvelle expérience et utilise le code JavaScript fourni. Personnalise-le avec l'ID de ton nouveau thème et teste le nouveau thème avant de basculer ta boutique.

N'utilise des tests de thème que si tu souhaites vraiment tester un nouveau thème. Nous recommandons généralement d'effectuer les modifications avec l'éditeur visuel Varify ou avec des modifications JSS et/ou CSS. Nous ne garantissons pas le bon fonctionnement du code fourni ni les fonctionnalités de Shopify. Un contrôle qualité approfondi est absolument nécessaire pour un test de thème.

Pourquoi tester les thèmes Shopify​

Un nouveau thème Shopify doit faire l'objet d'un test A/B avant sa mise en place afin de s'assurer qu'il ne dégrade pas la performance de la boutique. Les changements de design peuvent affecter le comportement des clients et des KPI tels que le taux de conversion. Le test A/B permet une vérification basée sur les données pour déterminer si le nouveau thème donne de meilleurs ou de moins bons résultats.

Étape 1 : Insérer le snippet Varify.io dans le fichier theme.liquid​

💡Remarque : nous recommandons d'intégrer le snippet Varify via le fichier themes.liquid pour tester des thèmes. L'étape 1 ne doit être effectuée que si le snippet Varify n'est pas encore installé sur ton site.

Copie l'extrait Varify.io depuis le tableau de bord et colle-le le plus haut possible dans le fichier theme.liquid de ta boutique. Pour ce faire, va dans « Boutique en ligne » -> « Thèmes » dans le back-office Shopify et clique sur « Modifier le code »

Shopify « Thèmes » avec le menu contextuel du thème actuel ouvert et l'entrée « Modifier le code » mise en évidence Tu peux ensuite insérer le snippet Varify.io comme dans l'exemple suivant. Merci de ne rien modifier dans le snippet, même si Shopify propose des modifications - les modifications provoqueront des effets de flicker ou le test A/B ne fonctionnera plus.

Éditeur de code Shopify avec theme.liquid ouvert ; l'extrait Varify se trouve directement sous la balise d'ouverture « <head> » Teste si l'implémentation a réussi. Crée une nouvelle expérience sur une page produit de ta boutique via le tableau de bord Varify.io à titre de test. Si l'éditeur s'ouvre, l'implémentation a réussi.

Tableau de bord Varify avec l'URL de la boutique Shopify saisie à côté du bouton « Create new Experiment »

Étape 2 : Trouver l'ID du nouveau thème que tu veux tester​

Nous avons besoin de l'ID du thème pour indiquer à Shopify quel thème les participants au test doivent voir. Voici un guide étape par étape pour trouver l'ID du thème à partir du lien d'aperçu :

  1. va dans : Sales Channels > Online Store > Themes > Theme Library.

  2. recherche le thème que tu veux tester.

  3. Cliquez sur les trois points (Actions)

  4. Cliquez sur « Preview » et copiez le lien.

Ton lien de prévisualisation ressemblera à ceci : https://deinshop.myshopify.com/?preview_theme_id=1234567890

Le nombre à la fin du lien (1234567890) est l'ID du thème dont tu as besoin.

Fais maintenant la même chose pour ton thème actuel et copie l'ID du thème ici aussi.

Étape 3 : Créer l'expérience​

Crée une nouvelle expérience. Il te suffit d'indiquer la page d'accueil de ta boutique comme URL de l'éditeur dans le dashboard Varify. Clique ensuite sur « Add JS » et ajoute le JavaScript suivant à l'expérience.

Boîte de dialogue de l'éditeur Varify « Add JS » avec le script qui change de thème ; la ligne « preview_theme_id » prend l'ID du nouveau thème

💡Remarque : indique l'ID du thème actuellement utilisé à la ligne 6, et l'ID du thème à tester à la ligne 17.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (themeElement) => {
    // …then run your redirect logic.
    (function () {
      const url = new URL(window.location.href);
      const params = url.searchParams;
      const shadow = document.querySelector('div#varify-shadow-root');

      // only redirect when the variation-param is missing AND the shadow-root isn't present
      if (!params.has('pb') && !shadow) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // replace so you don't add a new history entry
        window.location.replace(url.toString());
      } else {
        console.log('Redirect skipped:', {
          hasVarifyVariation: params.has('varify-variation-id'),
          varifyShadowRootExists: !!shadow
        });
      }
    })();
  }
);

Une fois que tu as mis à jour l'extrait de code avec les nouveaux ID de thème, clique sur « Finished » et donne un nom approprié à l'expérience. Ouvre ensuite « Page Targeting » dans l'expérience et change le « Match Type » de « Simple Match » à « Contains ». Clique ensuite sur « Save Page Targeting ».

Ciblage de page du « Shopify Theme Test » : la condition d'URL « Contains » correspond au domaine de la boutique

Une fois que toi ou un visiteur avez vu la version de test, vous continuerez à voir la version preview même après la fin de l'expérience. Pour que tu puisses aussi revoir le thème original dans la variante originale, crée une nouvelle variante nommée « New Original ». Clique ensuite sur « Add JS » dans l'éditeur visuel et insère le code JavaScript suivant, en remplaçant data-theme-instance-id par l'ID du thème preview de Shopify que tu souhaites tester.

« Shopify Theme Test » en cours d'exécution avec trois lignes : Original à 0 % de trafic, « Variation 1 » et « New Original » à 50 % chacune 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Étape 4 : Ciblage et assurance qualité​

Une fois le JavaScript implémenté et l'expérience enregistrée, tu peux enregistrer l'URL de ta boutique dans le ciblage de page de l'expérience. Tu peux aussi utiliser les liens « Preview » pour vérifier si la redirection fonctionne et si tous les paramètres ont été correctement définis. Pour cela, recherche simplement l'ID du thème correspondant dans le code de la boutique. Soit l'ID du thème original, soit l'ID du thème preview devrait se trouver dans la version de test.

Étape 5 : Démarrer l'expérience​

Démarre maintenant l'expérience avec « Start Experiment ». À partir de maintenant, 50 % de tes visiteurs seront dirigés vers le nouveau thème et 50 % continueront à voir l'ancien thème. Les visiteurs restent toujours assignés à la même variante pendant toute la durée de l'expérience. Cela signifie que le thème qu'ils ont vu une fois, ils le reverront pendant l'expérience. Après un certain temps, tu identifieras quel thème est le plus performant.

Étape 6 : Réinitialiser le mode aperçu après la fin de l'expérience​

Une fois que tes utilisateurs ont vu la variante du thème en aperçu, ils continueront à la voir même après la fin de l'expérience. Tu peux démarrer une expérience de « Clean Up » afin que les utilisateurs puissent revoir ton thème d'origine. Il te suffit de créer une nouvelle expérience et d'insérer le code JavaScript de la variante « New Original » (voir ci-dessus) sous « Add JS ». Enregistre l'expérience sous un nom de ton choix. Règle la répartition du trafic sur 100 % variante et démarre l'expérience.

Le mode aperçu est maintenant terminé pour tous les participants précédents au test qui ont vu la variante. Vérifie le bon fonctionnement du code avant de démarrer l'expérience, comme lors des étapes précédentes.

Sur cette page