Shopify - Tester les prix avec Varify.io

Dernière mise à jour le 22 avr. 20265 min de lecture

Table des matières

• En bref
• Pourquoi tester les prix Shopify ?
• Étape 1 : Créer des filtres et ajuster les prix
• Étape 2 : Identifier les sélecteurs CSS pertinents
• Étape 3 : Personnaliser le code pour l'expérimentation
• Étape 4 : Enregistrer la nouvelle expérience

En bref

Pour découvrir à quel prix tes produits atteignent la meilleure marge de contribution, tu peux effectuer des tests de prix. Un filtre de variante supplémentaire est ajouté pour le produit correspondant à tester. Tu utilises ce filtre pour 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 garantit ensuite que soit le prix original, soit le prix à tester s'affiche sur la page de détail du produit (PDP), selon la variante.

Pour garantir que le nouveau prix s'affiche également sur les pages de catégories (pages de collection) et que le filtre de prix ne soit pas visible, saisis les URL des produits à tester dans le code JavaScript fourni.

Pourquoi tester les prix Shopify ?

Les tests de prix sur Shopify t'aident à déterminer quel prix fonctionne le mieux pour un produit, c'est-à-dire quel prix génère plus de ventes ou un chiffre d'affaires plus élevé. Les tests A/B ciblés te permettent de tester simultanément différentes variantes de prix sans perturber l'expérience d'achat. Cela te permet de prendre des décisions basées sur les données et d'optimiser ta boutique pour plus de succès.

Étape 1 : Créer des filtres et ajuster les prix

1. Ouvre le produit dans le backend Shopify pour lequel tu veux tester le prix.
2. Crée une nouvelle variante avec le « nom d'option » « varify-pricing-test ».
3. Crée deux « valeurs d'option » pour celle-ci : « 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 afin qu'il soit positionné au-dessus des autres filtres. Cela est important pour que le test fonctionne correctement.

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

• Astuce : Activez « Group by varify-pricing-test » pour mieux gérer les variantes.
• Si vous avez différentes variantes ou couleurs, vous devez également ajuster le prix de la variante ici
• Pensez également à ajuster la quantité disponible afin que le produit soit disponible dans la boutique.
  Par exemple, si vous avez 1 000 unités du produit en stock, vous pouvez définir 500 unités pour le prix d'origine et 500 unités pour le nouveau prix de variante.

Étape 2 : Identifier les sélecteurs CSS pertinents

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

• Price filter
• Product card sur la page Collection
• Price sur la page Collection.

Filtre de prix

• Ouvre une page de détail produit (PDP) sur laquelle tu as configuré le filtre de prix et sur laquelle l'expérimentation doit être réalisée
• Ouvre les outils de développement (F12 ou clic droit > « Inspecter »).
• Utilise l'outil d'inspection pour sélectionner l'élément filtre varify-pricing-test nouvellement créé afin qu'il soit entièrement mis en surbrillance - cela permet de s'assurer que tu as identifié le bon sélecteur.
  • Dans cet exemple, le premier élément <div> dans l'élément <variant-selects> est sélectionné. Selon le template, la structure ainsi que les balises et classes HTML peuvent porter des noms différents.

• Fais un clic droit à l'endroit mis en surbrillance dans le code, puis sélectionne : Copy → Copy selector
  Cela copie le sélecteur CSS exact du filtre de prix.

• Il est préférable d'enregistrer le sélecteur copié dans un document ou une note - tu en auras à nouveau besoin bientôt.

Carte 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 carte produit.
• Trouve l'élément parent de la carte - généralement l'élément externe de la carte produit est un élément de liste.
  • Copie à nouveau la classe en utilisant "Copy selector" et enregistre-la dans le même document dans lequel tu as enregistré le sélecteur pour le filtre de prix

Prix sur la page Collection

• Ouvre à nouveau la fiche produit dans la page de collection dans les outils de développement.
• Va plus profondément dans la structure de la carte et recherche l'élément « Price »
• Assure-toi de bien sélectionner l'élément qui doit changer pendant le test - c'est-à-dire le bloc de texte ou HTML spécifique qui affiche le prix.

• Dans ce cas, la classe de l'élément de prix price__regular. Elle peut être différente sur ton site.
• Copie ce nom de classe en utilisant « Copy selector » et enregistre-le avec les deux autres noms de classe déterminés jusqu'à présent

Étape 3 : Personnaliser le code pour l'expérimentation

Crée une nouvelle expérimentation via le Varify Dashboard. Pour cela, saisis la page d'accueil de la boutique 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érimentation en utilisant la fonction « Add JS ».

Pour que le test de prix fonctionne aussi techniquement dans ta boutique, quelques ajustements doivent être apportés au code JavaScript fourni. Modifie le JavaScript de ta variante comme suit :

Ligne 1 : Colle le sélecteur CSS copié pour le filtre de prix entre les guillemets.

Ligne 2 : Indique la classe du prix - c'est-à-dire l'élément qui doit changer par la suite.

Ligne 3 : Précise la classe de la tuile produit afin 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 lesquelles le test de prix doit être effectué. (Si tu effectues un test de prix pour un seul produit, tu n'as besoin d'ajouter qu'une seule URL ici et tu peux supprimer les autres URL). Assure-toi de conserver le format correspondant des URL ('URL'). Ajoute une virgule après chaque 'URL' si d'autres URL suivent.

💡 Remarque : le prix sur les pages de collection est entièrement remplacé par le code. Si des symboles de devise ou des mots supplémentaires comme « ab » sont ajoutés au prix, tu peux les modifier directement dans le code (ligne 81)

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

priceElement.textContent = `${newPrice}`;

Avec texte supplémentaire :
ex. nouveau prix -> À partir de 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();
});

Étape 4 : Enregistrer la nouvelle expérience

1. Enregistrez l'expérience et donnez-lui un nom
2. Dupliquez la variante créée dans l'expérience nouvellement créée et renommez-la « New Original ».
3. Cliquez sur « Edit » pour modifier « New Original ».
4. Ouvrez la fenêtre JavaScript et changez la variable à la ligne 4 de 'Variation' à 'Controll'
5. Enregistrez les modifications.
6. Définissez la répartition du test sur 50:50 entre « Variation 1 » et « New Control ». « Original » reçoit 0 %.
7. Personnalisez le ciblage de page et définissez-le sur « Contains » avec l'URL de votre boutique.
8. Démarrez l'expérience.

Remarque : Varify décline toute responsabilité quant au fonctionnement du code et des informations.
Il est de la responsabilité de l'utilisateur de tester le code minutieusement et de l'implémenter correctement.