• Tester les thèmes Shopify avec Varify.io

    Table des matières

    En bref

    Nutze die Funktion “Shopify Theme Preview”, um mit Varify.io ganz einfach ein neues Shopify Theme gegen dein altes Theme A/B zu testen. Erstelle dabei ein neues Experiment und nutze den bereitgestellten JavaScript Code. Passe diesen mit deiner neuen Theme-ID an und teste das neue Theme, bevor du deinen Shop umstellst.

    Nutze nur dann Theme Tests, wenn du wirklich ein neues Theme testen möchtest. Grundsätzlich empfehlen wir, Änderungen mit dem visuellen Editor von Varify bzw. mit JSS und/oder CSS Änderungen durchzuführen. Wir übernehmen keine Gewährleistung auf die Funktionalität des bereitgestellten Codes und der Funktionalitäten von Shopify. Eine gründliche QA ist bei einem Theme Test zwingend notwendig.

    Pourquoi tester les thèmes Shopify

    Un nouveau thème Shopify devrait être testé A/B avant d'être changé, afin de s'assurer qu'il ne détériore pas les performances de la boutique. Les changements de design peuvent influencer le comportement des clients et les KPI comme le taux de conversion. Le test A/B permet de vérifier, sur la base de données, si le nouveau thème donne de meilleurs résultats.

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

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

    Copie le snippet Varify.io du tableau de bord et colle-le le plus haut possible dans le fichier theme.liquid de ton magasin. Pour cela, va dans le backend Shopify sous "Online Store"-> "Themes" et clique sur "edit code".

    Thèmes Shopify
    Tu peux ensuite insérer le snippet Varify.io comme dans l'exemple suivant. Ne modifie rien dans le snippet, même si Shopify te suggère de le faire - les modifications entraînent des effets de flicker ou le test A/B ne fonctionne plus.

    Teste si l'implémentation a réussi. Crée une nouvelle expérience sur une page de produit de ta boutique via le tableau de bord Varify.io. Si l'éditeur s'ouvre, l'implémentation a réussi.

    É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 de prévisualisation :

    1. aller à Canaux de vente > Boutique en ligne > Thèmes > Bibliothèque de thèmes.

    2. cherche le thème que tu veux tester

    3. clique sur les trois points (Actions)

    4. clique sur "Aperçu" et copie le lien

    Ton lien d'aperçu ressemblera à quelque chose comme ça : https://deinshop.myshopify.com/?preview_theme_id=1234567890

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

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

    Etape 3 : Créer une expérience

    Crée une nouvelle expérience. Pour cela, il suffit de saisir la page d'accueil de ta boutique comme URL d'édition dans le tableau de bord Varify. Clique ensuite sur "Add JS" et ajoute le JavaScript suivant à l'expérience.

    💡Remarque : inscris à la ligne 3 l'ID du thème que tu utilises actuellement et à la ligne 13 l'ID du thème à tester.
    				
    					// 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
            });
          }
        })();
      }
    );
    				
    			

    Dès que le code snippet a été adapté avec les nouveaux ID de thème, tu peux cliquer sur "Finished" et donner un nom approprié à l'expérience. Ouvre ensuite le "Page Targeting" dans l'expérience et modifie le "Match Type" de "Simple Match" à "Contains". Clique ensuite sur "Save Page Targeting".

    Shopify Theme Test Page Targeting

    Sobald du oder auch ein Besucher die Test Variante einmal gesehen hatte, wird dieser auch nachdem das Experiment abgeschlossen ist, weiterhin die Preview Variante sehen. Damit du in der Originalvariante auch das Original Theme wieder sehen kannst, erstelle eine neue Variante mit dem Namen “New Original”. Klicke im visuellen Editor danach auf “Add JS” und füge folgenden JavaScript Code ein und ersetze die data-theme-instance-id mit der Preview Theme ID deines zu testenden Shopify Themes.

    				
    					// 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é

    Nachdem du das JavaScript implementiert und das Experiment gespeichert hast, kannst du deine Shop URL im Page-Targeting des Experiments speichern. Außerdem kannst du nun mit den “Preview”-Links überprüfen, ob die Weiterleitung funktioniert und ob alle Einstellungen korrekt vorgenommen wurden. Suche dafür einfach nach der entsprechenden Theme ID im Code des Shops. Es sollte entweder die Original Theme ID oder die Preview Theme ID in der Testvariante gefunden werden.

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

    Maintenant, démarre l'expérience en cliquant sur "Start Experiment". A 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 affectés à la même variante pendant la durée de l'expérience. Cela signifie que le thème qu'ils ont vu une fois, ils le verront à nouveau pendant l'expérience. Après un certain temps, tu pourras voir quel thème est le plus performant.

    Schritt 6: Zurücksetzen des Preview Modus nach Beenden des Experiments

    Sobald deine User einmal die Preview Theme Variante gesehen haben, werden dieses auch nach Beendigung des Experiments weiterhin sehen. Damit die User nun wieder dein Original Theme sehen, kannst du ein “Clean Up” Experiment starten. Erstelle dafür einfach ein neues Experiment und füge den JavaScript Code der “New Original” Variante (siehe weiter oben) unter “Add JS” ein. Speichere das Experiment unter einem Namen deiner Wahl ab. Setze die Traffic Allocation auf 100% Variante und starte das Experiment.

    Nun wird bei allen vorherigen Testteilnehmern die die Variante gesehen haben, der Preview Modus beendet. Bitte prüfe die Funktionsweise des Codes, bevor du das Experiment startest, analog wie in den Schritten vorher.  

  • Premiers pas