Shopify - Realizar un test de costes de envío con Varify.io
- En resumen
- ¿Por qué testear los costes de envío en Shopify?
- Paso 1: Crear nuevas variantes de producto
- Paso 2: Crear un nuevo perfil de envío
- Paso 3: Configurar el filtro de variante en la página de detalle del producto (PDP)
- Paso 3: Personalizar el código para el experimento
- Paso 4: Guardar el nuevo experimento
En resumen
Para averiguar con qué costes de envío tus productos logran la mayor conversión o el mejor margen de contribución, puedes realizar tests de costes de envío en Shopify. Para ello, añade un filtro de variante adicional a los productos que se van a testear. Asigna un nuevo perfil de envío con los costes de envío a testear a las variantes correspondientes.
El experimento permanece invisible para los usuarios, ya que el filtro de variante no se muestra en la tienda. Un código JavaScript en el test A/B se encarga de que se muestren en la página de detalle del producto (PDP) los costes de envío originales o los costes de envío de test, según la variante.
Para asegurarte de que los costes de envío correctos también se muestren en las páginas de categoría (páginas de colección) y de que el filtro de variante permanezca oculto, guarda las URLs de los productos a testear en el código JavaScript proporcionado.
¿Por qué testear los costes de envío en Shopify?
Los tests de costes de envío en Shopify te ayudan a averiguar qué nivel de costes de envío funciona mejor, es decir, qué variante genera más ventas o mayor facturación. Los tests A/B dirigidos te permiten testear diferentes costes de envío al mismo tiempo sin afectar a la experiencia de compra. Esto te permite tomar decisiones basadas en datos y optimizar tu tienda para lograr un mayor éxito.
Paso 1: Crear nuevas variantes de producto
- Abre en el backend de Shopify el producto para el que quieres testear los costes de envío.
- Crea una nueva variante con el «Nombre de opción» «varify-pricing-test».
- Crea dos «Valores de opción» para esta: «Control» y «Variation».
- Si el producto tiene otras variantes, como un filtro de color, arrastra el filtro de variante hacia arriba para que quede posicionado por encima de los demás filtros. Esto es importante para que el test funcione correctamente.
- Define el nuevo precio a testear para cada variante de producto en la variante de precio «varify-pricing-test».
- Consejo: activa «Group by varify-pricing-test» para gestionar mejor las variantes.
- Si tienes diferentes variantes o colores, también deberías ajustar aquí el precio de la variante
- Recuerda también ajustar la cantidad disponible para que el producto esté disponible en la tienda.
Por ejemplo, si tienes 1.000 unidades del producto en stock, puedes asignar 500 unidades al precio original y 500 unidades al nuevo precio de la variante.
Paso 2: Crear un nuevo perfil de envío
A continuación, creamos un nuevo perfil de costes de envío en el que definimos el importe de los costes de envío a testear para la variante de producto.
- Ve a «Settings/Shipping and delivery»
- Haz clic en «Create a custom profile»
- Asigna un nombre al perfil, por ejemplo «Shipping cost experiment»
- Añade las variantes de producto que deben recibir los costes de envío a testear
- Asigna un nombre al perfil, por ejemplo «Shipping cost experiment»
- Añade las variantes de producto que deben recibir los costes de envío a testear
- Ahora haz clic en «Add shipping zone» y define los países/zonas a los que se enviarán las variantes. Aquí deberías seleccionar las mismas zonas a las que normalmente envías
- Haz clic en «Add rate» y define los costes de envío a testear
Paso 3: Configurar el filtro de variante en la página de detalle del producto (PDP)
Ocultar filtro de variantes
- Abre una página de detalle de producto (PDP) en la que hayas configurado las variantes para el test de costes de envío y en la que se vaya a realizar el experimento
- Abre las herramientas de desarrollador (F12 o clic derecho > «Inspect»).
- Usa la herramienta de inspección para seleccionar el elemento del filtro varify-pricing-test recién creado, de modo que quede completamente resaltado; esto asegurará que has identificado el selector correcto.
- En este ejemplo, se selecciona el primer elemento <div> dentro del elemento <variant-selects>. Según la plantilla, la estructura y las etiquetas y clases HTML pueden tener nombres diferentes.
- Haz clic derecho en la posición resaltada del código y selecciona: Copy → Copy selector
Esto copia el selector CSS exacto para el filtro de precio.
- Es recomendable guardar el selector copiado en un documento o una nota; lo necesitarás de nuevo pronto.
Paso 3: Personalizar el código para el experimento
Crea un nuevo experimento a través del Varify Dashboard. Para ello, introduce la página de inicio de la tienda en el campo de entrada y haz clic en «Create new Experiment». A continuación encontrarás el código JavaScript para el test de precio. Añádelo a la variante de tu experimento usando la función «Add JS».
Para asegurarte de que el experimento de costes de envío también funcione técnicamente en tu tienda, es necesario realizar algunos ajustes en el código JavaScript proporcionado. Cambia el JavaScript en tu variante de la siguiente manera:
Línea 1: Pega el selector CSS copiado para el filtro de precio entre las comillas.
Línea 2: Introduce la clase del precio, es decir, el elemento que se va a modificar más adelante.
Línea 3: Especifica la clase del tile de producto para que el código sepa dónde está el precio en la página de colección.
A partir de la línea 8: Añade aquí todas las URLs de producto en las que se va a realizar el experimento de costes de envío. (Si estás ejecutando el experimento solo para un producto, solo necesitas añadir una URL aquí y puedes eliminar las demás URLs). Asegúrate de mantener el formato adecuado de las URLs ('URL'). Añade una coma después de cada 'URL' si hay más URLs a continuación.
Código JavaScript para el test de precio
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();
});
Paso 4: Guardar el nuevo experimento
- Guarda el experimento y asígnale un nombre
- Duplica la variante creada en el experimento recién creado y renómbrala a «New Original».
- Haz clic en «Edit» para editar el «New Original».
- Abre la ventana de JavaScript y cambia la variable en la línea 4 de 'Variation' a 'Controll'
- Guarda los cambios.
- Configura la división del test en 50:50 entre «Variation 1» y «New Control». «Original» recibe el 0 %.
- Personaliza el segmentación de página y configúrala como «Contains» con la URL de tu tienda.
- Inicia el experimento.
