Shopify - Esegui un test sui costi di spedizione con Varify.io
In breve
Per scoprire con quali costi di spedizione i tuoi prodotti ottengono la conversione più alta o il miglior margine di contribuzione, puoi eseguire test sui costi di spedizione in Shopify. Per farlo, aggiungi un filtro varianti aggiuntivo ai prodotti da testare. Assegna un nuovo profilo di spedizione con i costi di spedizione da testare alle rispettive varianti.
L'esperimento rimane invisibile agli utenti poiché il filtro varianti non viene visualizzato nello store. Un codice JavaScript nell'A/B test assicura che vengano mostrati i costi di spedizione originali oppure i costi di spedizione di test sulla pagina di dettaglio prodotto (PDP), a seconda della variante.
Per assicurarti che i costi di spedizione corretti vengano visualizzati anche nelle pagine di categoria (collection pages) e che il filtro varianti rimanga nascosto, memorizza gli URL dei prodotti da testare nel codice JavaScript fornito.
Perché testare i costi di spedizione in Shopify?
I test sui costi di spedizione in Shopify ti aiutano a scoprire quale livello di costi di spedizione funziona meglio, ovvero quale variante porta a più vendite o a un fatturato più alto. Gli A/B test mirati ti permettono di testare contemporaneamente diversi costi di spedizione senza influire sull'esperienza di acquisto. Questo ti consente di prendere decisioni basate sui dati e di ottimizzare il tuo store per ottenere maggiore successo.
Fase 1: Crea nuove varianti di prodotto
- Apri nel backend di Shopify il prodotto per cui vuoi testare i costi di spedizione.
- Crea una nuova variante con il "Nome opzione" "varify-pricing-test".
- Crea due "Valori opzione" per questa: "Control" e "Variation".
- Se il prodotto ha altre varianti, come un filtro colore, trascina il filtro varianti in alto in modo che sia posizionato sopra gli altri filtri. Questo è importante affinché il test funzioni correttamente.
- Imposta il nuovo prezzo da testare per ogni variante di prodotto nella variante di prezzo "varify-pricing-test".
- Suggerimento: attiva "Group by varify-pricing-test" per gestire meglio le varianti.
- Se hai varianti o colori diversi, dovresti adeguare anche il prezzo della variante qui
- Ricordati inoltre di adeguare la quantità disponibile affinché il prodotto sia disponibile nello store.
Ad esempio, se hai 1.000 unità del prodotto in magazzino, puoi impostare 500 unità per il prezzo originale e 500 unità per il nuovo prezzo variante.
Fase 2: Crea un nuovo profilo di spedizione
Successivamente, creiamo un nuovo profilo dei costi di spedizione in cui definiamo l'importo dei costi di spedizione da testare per la variante di prodotto.
- Vai su "Settings/Shipping and delivery"
- Clicca su "Create a custom profile"
- Dai un nome al profilo, ad esempio "Shipping cost experiment"
- Aggiungi le varianti di prodotto che devono ricevere i costi di spedizione da testare
- Dai un nome al profilo, ad esempio "Shipping cost experiment"
- Aggiungi le varianti di prodotto che devono ricevere i costi di spedizione da testare
- Ora clicca su "Add shipping zone" e definisci i paesi/le zone a cui le varianti devono essere spedite. Qui dovresti selezionare le stesse zone in cui spedisci solitamente
- Clicca su "Add rate" e definisci i costi di spedizione da testare
Fase 3: Configura il filtro varianti sulla pagina di dettaglio prodotto (PDP)
Nascondi filtro varianti
- Apri una pagina di dettaglio prodotto (PDP) su cui hai impostato le varianti per il test sui costi di spedizione e su cui deve essere eseguito l'esperimento
- Apri gli strumenti per sviluppatori (F12 o clic destro > "Ispeziona").
- Usa lo strumento di ispezione per selezionare l'elemento filtro varify-pricing-test appena creato in modo che sia completamente evidenziato - questo assicurerà che tu abbia identificato il selettore corretto.
- In questo esempio, viene selezionato il primo elemento <div> all'interno dell'elemento <variant-selects>. A seconda del template, la struttura, i tag HTML e le classi possono avere nomi diversi.
- Fai clic destro nella posizione evidenziata nel codice e seleziona: Copy → Copy selector
Questo copia il selettore CSS esatto per il filtro prezzo.
- È meglio salvare il selettore copiato in un documento o in una nota - ti servirà di nuovo a breve.
Fase 3: Personalizza il codice per l'esperimento
Crea un nuovo esperimento tramite il Varify Dashboard. Per farlo, inserisci la pagina iniziale dello store nel campo di input e clicca su "Create new Experiment". Di seguito trovi il codice JavaScript per il test del prezzo. Aggiungilo alla variante del tuo esperimento usando la funzione "Add JS".
Per assicurarti che l'esperimento sui costi di spedizione funzioni anche tecnicamente nel tuo store, è necessario apportare alcune modifiche al codice JavaScript fornito. Modifica il JavaScript nella tua variante come segue:
Riga 1: Incolla il selettore CSS copiato per il filtro prezzo tra le virgolette.
Riga 2: Inserisci la classe del prezzo - cioè l'elemento che dovrà cambiare in seguito.
Riga 3: Specifica la classe della tile del prodotto in modo che il codice sappia dove si trova il prezzo nella pagina di collection.
Dalla riga 8: Aggiungi qui tutti gli URL dei prodotti su cui deve essere eseguito l'esperimento sui costi di spedizione. (Se stai eseguendo l'esperimento solo per un prodotto, devi aggiungere qui solo un URL e puoi eliminare gli altri URL). Assicurati di mantenere il formato appropriato degli URL ('URL'). Aggiungi una virgola dopo ogni 'URL' se seguono altri URL.
Codice JavaScript per il test del prezzo
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();
});
Fase 4: Salva il nuovo esperimento
- Salva l'esperimento e dagli un nome
- Duplica la variante creata nell'esperimento appena creato e rinominala "New Original".
- Clicca su "Edit" per modificare il "New Original".
- Apri la finestra JavaScript e cambia la variabile alla riga 4 da 'Variation' a 'Controll
- Salva le modifiche.
- Imposta la suddivisione del test al 50:50 tra "Variation 1" e "New Control". "Original" ottiene 0 %.
- Personalizza il targeting della pagina e impostalo su "Contains" con l'URL del tuo store.
- Avvia l'esperimento.
