Shopify - Prueba precios con Varify.io

Última actualización el 22 abr 20265 min de lectura

Índice de contenidos

• En resumen
• ¿Por qué probar precios en Shopify?
• Paso 1: Crear filtros y ajustar precios
• Paso 2: Identifica los selectores CSS relevantes
• Paso 3: Personalizar el código para el experimento
• Paso 4: Guarda el nuevo experimento

En resumen

Para averiguar a qué precio tus productos logran el mejor margen de contribución, puedes realizar pruebas de precios. Se añade un filtro de variantes adicional para el producto correspondiente que se va a probar. Utilizas este filtro para establecer el precio alternativo.

El experimento es invisible para el usuario, ya que el filtro de precio no es visible para el usuario. Un código JavaScript en el test A/B se encarga entonces de que se muestre el precio original o el precio a probar en la página de detalle del producto (PDP), según la variante.

Para garantizar que el nuevo precio también se muestre en las páginas de categoría (páginas de colección) y que el filtro de precio no sea visible, introduce las URLs de los productos a probar en el código JavaScript proporcionado.

¿Por qué probar precios en Shopify?

Los tests de precios en Shopify te ayudan a averiguar qué precio funciona mejor para un producto, es decir, qué precio genera más ventas o mayor facturación. Los tests A/B dirigidos te permiten probar diferentes variantes de precio simultáneamente sin interrumpir la experiencia de compra. Esto te permite tomar decisiones basadas en datos y optimizar tu tienda para un mayor éxito.

Paso 1: Crear filtros y ajustar precios

1. Abre el producto en el backend de Shopify para el que quieres probar el precio.
2. Crea una nueva variante con el "Option name" "varify-pricing-test".
3. Crea dos "Option values" para esto: "Control" y "Variation".

1. Si el producto tiene otras variantes, como un filtro de color, arrastra y suelta el filtro de variante hacia arriba para que quede posicionado por encima de los demás filtros. Esto es importante para que la prueba funcione correctamente.

1. Establece el nuevo precio que se va a probar 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 variantes o colores diferentes, también debes 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 establecer 500 unidades para el precio original y 500 unidades para el nuevo precio de variante.

Paso 2: Identifica los selectores CSS relevantes

Ahora busca los selectores CSS para los elementos:

• Filtro de precio
• Tarjeta de producto en la página de Collection
• Precio en la página de Collection.

Filtro de precio

• Abre una página de detalle de producto (PDP) en la que hayas configurado el filtro de precio y en la que se vaya a realizar el experimento
• Abre las herramientas de desarrollador (F12 o clic derecho > "Inspeccionar").
• 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 garantizará 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 distintos.

• Haz clic derecho en la posición resaltada del código y luego selecciona: Copy → Copy selector
  Esto copia el selector CSS exacto del filtro de precio.

• Lo mejor es guardar el selector copiado en un documento o una nota; lo necesitarás de nuevo pronto.

Tarjeta de producto en la página de colección

• Abre una página de colección.
• Examina la página (F12 o clic derecho > "Examinar") y selecciona un elemento de tarjeta de producto.
• Encuentra el elemento padre de la tarjeta - normalmente el elemento externo de la tarjeta de producto es un elemento de lista.
  • Copia la clase de nuevo usando "Copy selector" y guárdala en el mismo documento en el que guardaste el selector para el filtro de precio

Precio en la página de colección

• Vuelve a abrir el tile del producto en la página de colección en las herramientas de desarrollador.
• Profundiza en la estructura del mapa y busca el elemento "Price"
• Asegúrate de seleccionar realmente el elemento que debe cambiar durante el test, es decir, el texto específico o el bloque HTML que muestra el precio.

• En este caso, la clase del elemento de precio price__regular. Puede ser diferente en tu sitio.
• Copia este nombre de clase usando "Copy selector" y guárdalo junto con los otros dos nombres de clase determinados hasta ahora

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 garantizar que el test de precio 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 debe cambiar más adelante.

Línea 3: Especifica la clase del tile del producto para que el código sepa dónde está el precio en la página de la colección.

A partir de la línea 7: Añade aquí todas las URLs de producto en las que se debe realizar el test de precio. (Si estás realizando un test de precio para un solo producto, solo necesitas añadir una URL aquí y puedes eliminar las demás URLs). Asegúrate de mantener el formato correspondiente de las URLs ('URL'). Añade una coma después de cada 'URL' si le siguen más URLs.

💡 Nota: El precio en las páginas de colección se reemplaza completamente mediante el código. Si al precio se le añaden símbolos de moneda adicionales o palabras como "ab", puedes ajustarlos directamente en el código (línea 81)

Sin texto adicional:
p. ej. nuevo precio -> 25,99

priceElement.textContent = `${newPrice}`;

Con texto adicional:
p. ej. nuevo precio -> Desde 25,99 EUR

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

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: Guarda el nuevo experimento

1. Guarda el experimento y dale un nombre
2. Duplica la variante creada en el experimento recién creado y renómbrala como "New Original".
3. Haz clic en "Edit" para editar el "New Original".
4. Abre la ventana de JavaScript y cambia la variable en la línea 4 de 'Variation' a 'Controll
5. Guarda los cambios.
6. Configura el split del test a 50:50 entre "Variation 1" y "New Control". "Original" recibe 0 %.
7. Personaliza el targeting de página y configúralo a "Contains" con la URL de tu tienda.
8. Inicia el experimento.

Aviso: Varify no asume ninguna responsabilidad por la funcionalidad del código y la información.
Es responsabilidad del usuario probar el código exhaustivamente e implementarlo correctamente.