• Shopify - Prueba de precios con Varify.io

    Índice

    Corto y dulce

    Para saber a qué precio sus productos alcanzan el mejor margen de contribución, puede realizar pruebas de precios. Para ello, se añade un filtro de variante adicional para el producto correspondiente que se va a probar. Este filtro se utiliza para establecer el precio alternativo.

    El experimento es invisible para el usuario, ya que el filtro de precios no es visible para él. A continuación, un código JavaScript en la prueba A/B garantiza que en la página de detalles del producto (PDP) se muestre el precio original o el precio que se va a probar, en función de la variante. 

    Para asegurarse de que el nuevo precio también se muestra en las páginas de categoría (páginas de colección) y el filtro de precio no es visible, introduzca las URL de los productos que se van a probar en el código JavaScript proporcionado.

    ¿Por qué probar los precios de Shopify?

    Las pruebas de precios en Shopify te ayudan a averiguar qué precio funciona mejor para un producto, es decir, qué precio conduce a más ventas o a una mayor facturación. Los tests A/B 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. Abra el producto en el backend de Shopify para el que desea probar el precio.
    2. Cree una nueva variante con el "Nombre de la opción" "varify-pricing-test".
    3. Para ello, cree dos "Valores de opción": "Control" y "Variación".

    1. Si el producto tiene otras variantes, como un filtro de color, arrastre y suelte el filtro de variante a la parte superior para que se sitúe por encima de los demás filtros. Esto es importante para que la prueba funcione correctamente.

    1. Establezca el nuevo precio que se probará para cada variante de producto en la variante de precio "varify-pricing-test".

      • Sugerencia: Active "Agrupar por varificar-precio-prueba" para gestionar mejor las variantes.

      • Si tiene diferentes variantes o colores, también debe ajustar aquí el precio de la variante

      • Recuerde también ajustar la cantidad disponible para que el producto esté disponible en la tienda.
        Por ejemplo, si tiene 1.000 unidades del producto en stock, puede establecer 500 unidades para el precio original y 500 unidades para el precio de la nueva variante.

    Paso 2: Identificar los selectores CSS pertinentes

    Ahora busca los selectores CSS para los elementos: 

    • Filtro de precios
    • Ficha de producto en la página Colección
    • Precio en la página Colección.

    Filtro de precios

    • Abra una página de detalles del producto (PDP) en la que haya configurado el filtro de precios y en la que se vaya a realizar el experimento

    • Abra las herramientas de desarrollo (F12 o botón derecho del ratón > "Inspeccionar").

    • Utilice la herramienta de inspección para seleccionar el elemento de filtro de prueba de tarificación variable recién creado, de modo que quede completamente resaltado, lo que le garantizará que ha identificado el selector correcto.

      • En este ejemplo, el primer <div>-en el <variant-selects>-elemento. Dependiendo de la plantilla, la estructura y las etiquetas y clases HTML pueden tener nombres diferentes.

    • Haga clic con el botón derecho del ratón en la posición resaltada del código y seleccione : Copiar → Selector de copia
      Esto copia el selector CSS exacto para el filtro de precios.

    • Lo mejor es guardar el selector copiado en un documento o una nota, ya que pronto volverá a necesitarlo.

    Ficha de producto en la página Colección

    • Abrir una página de recogida.

    • Examine la página (F12 o botón derecho del ratón > "Examinar") y seleccione un elemento de la ficha de producto.

    • Encontrar el elemento padre de la ficha - normalmente el elemento exterior de la ficha de producto es un elemento de lista.

      • Copie de nuevo la clase utilizando "Copiar selector" y guárdela en el mismo documento en el que guardó el selector para el filtro de precios

    Precio en la página Colección

    • Vuelva a abrir la ficha del producto en la página de la colección en las herramientas para desarrolladores.

    • Profundice en la estructura del mapa y busque el elemento "precio

    • Asegúrese de seleccionar realmente el elemento que va a cambiar durante la prueba, es decir, el texto específico o el bloque HTML que muestra el precio.

    • En este caso, la clase del elemento de precio precio__regular. Para su lado se puede llamar de otra manera.

    • Copie este nombre de clase utilizando "Copiar selector" y guárdelo con los otros dos nombres de clase determinados hasta ahora

    Paso 3: Personalizar el código para el experimento

    Cree un nuevo experimento a través del Panel de Control de Varify. Para ello, introduzca la página de inicio de la tienda en el campo de entrada y haga clic en "Crear nuevo experimento". A continuación encontrará el código JavaScript para la prueba de precios. Añádalo a la variante de su experimento utilizando la función "Añadir JS". 

    Para que la prueba de precios también funcione técnicamente en su tienda, es necesario realizar algunos ajustes en el código JavaScript proporcionado. Cambie el JavaScript en su variante de la siguiente manera:

    Línea 1: Pegue el selector CSS copiado para el filtro de precios entre comillas.

    Línea 2: Introduzca la clase del precio, es decir, el elemento que debe modificarse posteriormente.

    Línea 3: Especifique la clase de la ficha de producto para que el código sepa dónde se encuentra el precio en la página de la colección.

    A partir de la línea 7: Añada aquí todas las URL de los productos sobre los que se va a realizar la prueba de precios. (Si realiza una prueba de precios para un solo producto, sólo tiene que añadir aquí una URL y puede eliminar las demás). Asegúrese de mantener el formato correspondiente de las URL ('URL'). Añada una coma después de cada 'URL' si hay más URLs a continuación.

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

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

    				
    					priceElement.textContent = `${newPrice}`;
    				
    			

    Con texto adicional:
    por ejemplo, nuevo precio -> A partir de 25,99 EUR

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

    Código JavaScript para la prueba 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

    1. Guarda el experimento y dale un nombre

    2. Duplique la variante creada en el experimento recién creado y cámbiele el nombre a "Nuevo original".

    3. Haga clic en "Editar" para modificar el "Nuevo original".

    4. Abra la ventana de JavaScript y cambie la variable de la línea 4 de "Variación" a "Controll".

    5. Guarda los cambios.

    6. Establezca la división para la prueba en 50:50 entre "Variación 1" y "Nuevo control". "Original" recibe 0 %.

    7. Personalice la orientación de la página y configúrela como "Contiene" con la URL de su tienda.

    8. Comienza el experimento.

  • Primeros pasos