Shopify - Effectuer un test des frais de livraison avec Varify.io

Dernière mise à jour le 24 mars 20265 min de lecture

Table des matières

• En bref
• Pourquoi tester les frais de livraison dans Shopify ?
• Étape 1 : Créer de nouvelles variantes de produit
• Étape 2 : Créer un nouveau profil d'expédition
• Étape 3 : Configurer le filtre de variante sur la page de détail produit (PDP)
• Étape 3 : Personnaliser le code pour l'expérience
• Étape 4 : Enregistrer la nouvelle expérience

En bref

Pour déterminer à quel niveau de frais de livraison tes produits atteignent le meilleur taux de conversion ou la meilleure marge contributive, tu peux effectuer des tests de frais de livraison dans Shopify. Pour cela, ajoute un filtre de variante supplémentaire aux produits à tester. Attribue un nouveau profil d'expédition avec les frais de livraison à tester aux variantes respectives.

L'expérience reste invisible pour les utilisateurs car le filtre de variante n'est pas affiché dans la boutique. Un code JavaScript dans le test A/B garantit que soit les frais de livraison originaux, soit les frais de livraison de test sont affichés sur la page de détail du produit (PDP), selon la variante.

Pour garantir que les frais de livraison corrects soient également affichés sur les pages de catégorie (pages collection) et que le filtre de variante reste caché, enregistre les URL des produits à tester dans le code JavaScript fourni.

Pourquoi tester les frais de livraison dans Shopify ?

Les tests de frais de livraison dans Shopify t'aident à déterminer quel niveau de frais de livraison fonctionne le mieux - c'est-à-dire quelle variante génère plus de ventes ou un chiffre d'affaires plus élevé. Des tests A/B ciblés te permettent de tester différents frais de livraison en même temps sans affecter 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 de nouvelles variantes de produit

1. Ouvre le produit dans le backend Shopify pour lequel tu veux tester les frais de livraison.
2. Crée une nouvelle variante avec le « Nom d'option » « varify-pricing-test ».
3. Crée deux « Valeurs d'option » pour cela : « Control » et « Variation ».

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

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

• Astuce : Active « Group by varify-pricing-test » pour mieux gérer les variantes.
• Si tu as différentes variantes ou couleurs, tu dois également ajuster le prix de la variante ici
• N'oublie pas non plus d'ajuster la quantité disponible afin que le produit soit disponible dans la boutique.
  Par exemple, si tu as 1 000 unités du produit en stock, tu peux définir 500 unités pour le prix original et 500 unités pour le nouveau prix de variante.

Étape 2 : Créer un nouveau profil d'expédition

Ensuite, nous créons un nouveau profil de frais de livraison dans lequel nous définissons le montant des frais de livraison à tester pour la variante de produit.

• Va dans « Settings/Shipping and delivery »
• Clique sur « Create a custom profile »

• Donne un nom au profil, par exemple « Shipping cost experiment »
• Ajoute les variantes de produit qui doivent recevoir les frais de livraison à tester

• Donne un nom au profil, par exemple « Shipping cost experiment »
• Ajoute les variantes de produit qui doivent recevoir les frais de livraison à tester
• Clique maintenant sur « Add shipping zone » et définis les pays/zones vers lesquels les variantes doivent être expédiées. Tu dois sélectionner ici les mêmes zones vers lesquelles tu expédies généralement
• Clique sur « Add rate » et définis les frais de livraison à tester

Étape 3 : Configurer le filtre de variante sur la page de détail produit (PDP)

Masquer le filtre des variantes

• Ouvre une page de détail produit (PDP) sur laquelle tu as configuré les variantes pour le test des frais de livraison et sur laquelle l'expérience doit être menée
• Ouvre les outils de développement (F12 ou clic droit > « Inspecter »).
• Utilise l'outil d'inspection pour sélectionner l'élément de filtre varify-pricing-test nouvellement créé afin qu'il soit entièrement mis en évidence - cela garantira 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 modèle, la structure ainsi que les balises et classes HTML peuvent avoir des noms différents.

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

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

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

Crée une nouvelle expérience via le tableau de bord Varify. Pour cela, saisis la page d'accueil de la boutique dans le champ de saisie et clique sur « Create new Experiment ». Ci-dessous, tu trouveras le code JavaScript pour le test de prix. Ajoute-le à la variante de ton expérience à l'aide de la fonction « Add JS ».

Pour garantir que l'expérience de frais de livraison fonctionne également techniquement dans ta boutique, quelques ajustements doivent être apportés au code JavaScript fourni. Modifie le JavaScript dans 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 : Spécifie la classe de la tuile produit afin que le code sache où se trouve le prix sur la page collection.

À partir de la ligne 8 : Ajoute ici toutes les URL de produits sur lesquelles l'expérience de frais de livraison doit être menée. (Si tu exécutes l'expérience 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 approprié des URL ('URL'). Ajoute une virgule après chaque 'URL' s'il y a d'autres URL après.

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. Enregistre l'expérience et donne-lui un nom
2. Duplique la variante créée dans l'expérience nouvellement créée et renomme-la en « New Original ».
3. Clique sur « Edit » pour modifier le « New Original ».
4. Ouvre la fenêtre JavaScript et change la variable en ligne 4 de 'Variation' à 'Controll
5. Enregistre les modifications.
6. Définis la répartition du test à 50:50 entre « Variation 1 » et « New Control ». « Original » reçoit 0 %.
7. Personnalise le ciblage de page et définis-le sur « Contains » avec l'URL de ta boutique.
8. Démarre 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.