• Shopify - Tester les prix avec Varify.io

    Table des matières

    En bref

    Pour savoir à quel prix tes produits génèrent la meilleure marge bénéficiaire, tu peux effectuer des tests de prix. Pour ce faire, un filtre de variante supplémentaire est ajouté pour le produit à tester. Ce filtre te permet de définir le prix alternatif.

    L'expérience est invisible pour l'utilisateur, car le filtre de prix n'est pas visible pour l'utilisateur. Un code JavaScript dans le test A/B veille ensuite à ce que la page de détail du produit (PDP) affiche soit le prix original, soit le prix à tester, selon la variante. 

    Pour que le nouveau prix soit également affiché sur les pages de catégories (Collection Pages) et que le filtre de prix ne soit pas visible, tu enregistres les URL des produits à tester dans le code JavaScript mis à disposition.

    Pourquoi tester les prix Shopify ?

    Les tests de tarification sur Shopify t'aident à déterminer quel prix fonctionne le mieux pour un produit - c'est-à-dire quel prix entraîne plus de ventes ou un chiffre d'affaires plus élevé. Grâce à des tests A/B ciblés, tu peux tester simultanément différentes variantes de prix sans perturber l'expérience d'achat. Tu peux ainsi prendre des décisions basées sur des données et optimiser concrètement ta boutique pour plus de succès.

    Étape 1 : Créer un filtre et adapter les prix

    1. Ouvre le produit dans le backend Shopify pour lequel tu souhaites tester le prix.
    2. Crée une nouvelle variante avec le "nom d'option" "varify-pricing-test".
    3. Crée pour cela deux "options values" : "Control" et "Variation".

    1. Si le produit a d'autres variantes, comme un filtre de couleur, fais glisser le filtre de variante vers le haut, de sorte qu'il soit positionné au-dessus des autres filtres. C'est important pour que le test fonctionne correctement.

    1. Définis pour chaque variante de produit dans la variante de prix "varify-pricing-test" le nouveau prix à tester.

      • Conseil : active "Group by varify-pricing-test" pour mieux gérer les variantes.

      • Si tu as différentes variantes ou couleurs, tu dois également adapter le prix des variantes ici.

      • Pense aussi à adapter le nombre de pièces disponibles pour que le produit soit disponible dans la boutique.
        Par exemple, si tu as 1.000 pièces du produit en stock, tu peux en mettre 500 au prix d'origine et 500 au nouveau prix de la variante.

    Étape 2 : Identifier les sélecteurs CSS pertinents

    Trouve maintenant les sélecteurs CSS pour les éléments : 

    • Filtre de prix
    • Fiche produit sur la page Collection
    • Prix sur la page Collection.

    Filtre de prix

    • Ouvre une page de détail de produit (PDP) sur laquelle tu as configuré le filtre de prix et sur laquelle l'expérience doit être exécutée.

    • Ouvre les outils de développement (F12 ou clic droit > "Inspect").

    • Utilise l'outil d'inspection et sélectionne l'élément de filtre varify-pricing-test nouvellement créé de manière à ce qu'il soit entièrement mis en évidence - tu t'assures ainsi d'avoir identifié le bon sélecteur.

      • Dans cet exemple, le premier <div>-dans l'élément <variant-selects>-est sélectionné. Selon le modèle, la structure et les balises HTML et les classes peuvent être nommées différemment.

    • Fais un clic droit à l'endroit mis en évidence dans le code, puis sélectionne : Copy → Sélecteur de copie
      Tu copies ainsi le sélecteur CSS exact pour le filtre de prix.

    • Il est préférable de sauvegarder le sélecteur copié dans un document ou une note - tu en auras besoin tout de suite.

    Fiche produit sur la page Collection

    • Ouvre une page de collection.

    • Examine la page (F12 ou clic droit > "Examiner") et sélectionne un élément de la fiche produit.

    • Cherche l'élément parent de la carte - le plus souvent, l'élément extérieur de la fiche produit est un élément Listen.

      • Recopie la classe en utilisant "Copy selector" et enregistre-la dans le même document que celui dans lequel tu as enregistré le sélecteur pour le filtre de prix.

    Prix sur la page Collection

    • Ouvre à nouveau la tuile de produit dans la page Collection dans les outils de développement.

    • Va plus loin dans la structure de la carte et cherche l'élément "prix".

    • Veille à sélectionner réellement l'élément qui doit changer lors du test - c'est-à-dire le texte concret ou le bloc HTML qui affiche le prix.

    • Dans ce cas, la classe de l'élément de prix price__regular. Pour ton site, le nom peut être différent.

    • Copier également ce nom de classe avec "Copy selector" et le sauvegarder avec les deux autres noms de classe trouvés jusqu'à présent.

    Étape 3 : Adapter le code à l'expérience

    Crée une nouvelle expérience via le tableau de bord Varify. Pour cela, entre la page d'accueil du magasin dans le champ de saisie et clique sur "Create new Experiment". Tu trouveras ci-dessous le code JavaScript pour le test de prix. Ajoute-le à la variante de ton expérience via la fonction "Add JS". 

    Pour que le test de prix fonctionne techniquement dans ta boutique, il faut encore effectuer quelques adaptations dans le code JavaScript mis à disposition. Modifie le JavaScript dans ta variante comme suit :

    Ligne 1 : insère entre guillemets le sélecteur CSS copié pour le filtre de prix.

    Ligne 2 : Inscris la classe du prix - c'est-à-dire l'élément qui doit être modifié ultérieurement.

    Ligne 3 : indiquez la classe de la tuile produit pour que le code sache où se trouve le prix sur la page de collection.

    À partir de la ligne 7 : ajoute ici toutes les URL de produits sur lesquels le test de prix doit être effectué. (Si tu effectues un test de prix pour un seul produit, tu ne dois ajouter ici qu'une seule URL et tu peux supprimer les autres URL). Veille à conserver le format correspondant des URL ('URL'). Ajoute une virgule après chaque 'URL' si d'autres URL suivent.

    💡 Remarque : Le prix sur les Collection Pages est entièrement remplacé par le code. Si des signes monétaires ou des mots comme "à partir de" sont ajoutés au prix, tu peux les adapter directement dans le code (ligne 81).

    Sans texte supplémentaire :
    par ex. nouveau prix -> 25,99

    				
    					priceElement.textContent = `${newPrice}`;
    				
    			

    Avec texte supplémentaire :
    p.ex. nouveau prix -> From 25,99 EUR

    				
    					priceElement.textContent = `From ${newPrice} EUR`;
    				
    			

    Code JavaScript pour le test de prix

    				
    					const varifyPriceFilterSelector = '#variant-selects-template--25418368778580__main > div:nth-child(1)';
    const priceClass = 'price__regular';
    const cardClass = 'grid__item';
    const desiredVariantOption = 'Variation'; // Variation or Control
    
    // Only URLs – variant IDs no longer required
    const productURLs = [
        'https://demo-shop.com/products/article1',
        'https://demo-shop.com/products/article2',
        'https://demo-shop.com/products/article3'
    ];
    
    const updatedHandles = new Set();
    
    function hidePriceFilterOnMatchingProductPages() {
        const currentURL = window.location.href;
        const matchesProductPage = productURLs.some(url => currentURL.includes(url));
    
        if (matchesProductPage && varifyPriceFilterSelector) {
            const style = document.createElement('style');
            style.textContent = `
          ${varifyPriceFilterSelector} {
            display: none !important;
          }
        `;
            document.head.appendChild(style);
            console.log('Hiding price filter on matching product page:', varifyPriceFilterSelector);
        }
    }
    
    hidePriceFilterOnMatchingProductPages();
    
    function formatPrice(priceInCents) {
        return (priceInCents / 100).toFixed(2);
    }
    
    function extractHandleFromHref(href) {
        const match = href.match(/\/products\/([^/?#]+)/);
        return match ? match[1] : null;
    }
    
    function extractHandlesFromURLs(urls) {
        return urls.map(extractHandleFromHref).filter(Boolean);
    }
    
    function updateProducts(retryCount = 0) {
        const productCards = document.querySelectorAll(`.${cardClass}`);
        const allowedHandles = extractHandlesFromURLs(productURLs);
    
        if (productCards.length === 0 && retryCount < 5) {
            console.warn(`No product cards found – retrying (${retryCount + 1}/5)`);
            setTimeout(() => updateProducts(retryCount + 1), 300);
            return;
        }
    
        allowedHandles.forEach((handle) => {
            if (updatedHandles.has(handle)) return;
    
            fetch(`/products/${handle}.js`)
                .then(response => response.json())
                .then(product => {
                    const targetVariant = product.variants.find(v => v.option1 === desiredVariantOption);
                    if (!targetVariant) {
                        console.warn(`No variant found with option1 === '${desiredVariantOption}' for "${handle}"`);
                        return;
                    }
    
                    let updated = false;
    
                    productCards.forEach(card => {
                        const link = card.querySelector('a[href*="/products/"]');
                        if (!link) return;
    
                        const href = link.getAttribute('href');
                        const linkHandle = extractHandleFromHref(href);
    
                        if (linkHandle === handle) {
                            const priceElement = card.querySelector(`.${priceClass}`);
                            if (priceElement) {
                                const oldPrice = priceElement.textContent.trim();
                                const newPrice = formatPrice(targetVariant.price);
                                priceElement.textContent = `${newPrice}`;
    
                                console.log(`"${product.title}" – Price updated: ${oldPrice} → €${newPrice}`);
                            }
    
                            const imageElement = card.querySelector('.product-card-image img');
                            if (imageElement && targetVariant.featured_image) {
                                imageElement.src = targetVariant.featured_image.src;
                                console.log(`Image updated for "${product.title}".`);
                            }
    
                            // Update link with ?variant=...
                            const url = new URL(link.href, window.location.origin);
                            url.searchParams.set('variant', targetVariant.id);
                            link.href = url.toString();
    
                            updated = true;
                        }
                    });
    
                    if (updated) {
                        updatedHandles.add(handle);
                    }
                })
                .catch(error => {
                    console.error(`Error loading product "${handle}":`, error);
                });
        });
    }
    
    // Optional: Set filter selection on the PDP
    function setPriceFilter() {
        const selectElement = document.querySelector(`${varifyPriceFilterSelector} select`);
        if (selectElement) {
            selectElement.value = desiredVariantOption;
            selectElement.dispatchEvent(new Event('input', { bubbles: true }));
            selectElement.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }
    
    // Initial call after DOM ready
    window.varify.helpers.onDomLoaded(() => {
        setPriceFilter();
        updateProducts();
    });
    
    // Optional: Repeat on DOM changes
    window.varify.helpers.onDomChanged(() => {
        updateProducts();
    });
    				
    			

    Etape 4 : Enregistrer la nouvelle expérience

    1. Enregistre l'expérience et donne-lui un nom

    2. Duplique la variante créée dans la nouvelle expérience créée et renomme-la "New Original".

    3. Clique sur "Edit" pour modifier le "New Original".

    4. Ouvre la fenêtre JavaScript et change la variable de 'Variation' en 'Controll' à la ligne 4.

    5. Enregistre les modifications.

    6. Règle la répartition pour le test à 50:50 entre "Variation 1" et "New Control". "Original" reçoit 0 %.

    7. Adapte le ciblage de la page et mets-le sur "Contains" avec l'URL de ta boutique.

    8. Commence l'expérience.

  • Premiers pas