Saltar al contenido principal

Prueba temas de Shopify con Varify.io

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

En resumen​

Usa la función «Shopify Theme Preview» para probar fácilmente un nuevo tema de Shopify frente al anterior mediante una prueba A/B con Varify.io. Para ello, crea un nuevo experimento y usa el código JavaScript proporcionado. Personalízalo con el ID de tu nuevo tema y prueba el nuevo tema antes de cambiar tu tienda.

Utiliza los tests de tema solo si realmente quieres probar un nuevo tema. Por lo general, recomendamos realizar cambios con el editor visual de Varify o con cambios en JSS y/o CSS. No garantizamos la funcionalidad del código proporcionado ni las funcionalidades de Shopify. Un control de calidad exhaustivo es absolutamente necesario para un test de tema.

Por qué probar temas de Shopify​

Un nuevo tema de Shopify debería probarse con A/B testing antes de cambiarlo, para asegurarse de que no perjudique el rendimiento de la tienda. Los cambios de diseño pueden afectar al comportamiento de los clientes y a KPIs como la tasa de conversión. El A/B testing permite comprobar, con respaldo de datos, si el nuevo tema ofrece mejores o peores resultados.

Paso 1: Inserta el snippet de Varify.io en el archivo theme.liquid​

💡Nota: Recomendamos integrar el snippet de Varify a través del archivo themes.liquid para probar temas. El paso 1 solo debe realizarse si el snippet de Varify aún no está instalado en tu sitio.

Copia el snippet de Varify.io desde el dashboard y pégalo lo más arriba posible en el archivo theme.liquid de tu tienda. Para ello, ve a "Online Store" -> "Themes" en el backend de Shopify y haz clic en "edit code"

Shopify „Themes“ con el menú contextual del tema actual abierto y la entrada „Edit code“ resaltada Después puedes insertar el snippet de Varify.io como en el siguiente ejemplo. Por favor, no cambies nada en el snippet, aunque Shopify sugiera cambios - los cambios provocarán efectos de parpadeo o el test A/B dejará de funcionar.

Editor de código de Shopify con theme.liquid abierto; el snippet de Varify se encuentra justo debajo de la etiqueta de apertura „<head>“ Comprueba si la implementación fue exitosa. Crea un nuevo experimento en una página de producto de tu tienda a través del dashboard de Varify.io como prueba. Si se abre el editor, la implementación fue exitosa.

Panel de Varify con la URL de la tienda Shopify introducida junto al botón „Create new Experiment“

Paso 2: Encuentra el ID del tema del nuevo tema que quieres testear​

Necesitamos el ID del tema para indicarle a Shopify qué tema deben ver los participantes del test. Aquí tienes una guía paso a paso sobre cómo encontrar el ID del tema desde el enlace de vista previa:

  1. ve a: Sales Channels > Online Store > Themes > Theme Library.

  2. busca el tema que quieres testear.

  3. haz clic en los tres puntos (Acciones)

  4. Haz clic en „Preview“ y copia el enlace.

Tu enlace de vista previa se verá algo así: https://deinshop.myshopify.com/?preview_theme_id=1234567890

El número al final del enlace (1234567890) es el ID del tema que necesitas.

Ahora haz lo mismo con tu tema actual y copia el ID del tema aquí también.

Paso 3: Crear experimento​

Crea un nuevo experimento. Simplemente introduce la página de inicio de tu tienda como la URL del editor en el panel de Varify. Luego haz clic en "Add JS" y añade el siguiente JavaScript al experimento.

Diálogo del editor de Varify „Add JS“ con el script que cambia el tema; la línea „preview_theme_id“ toma el ID del nuevo tema

💡Nota: Introduce el ID del tema que usas actualmente en la línea 6 y el ID del tema que se va a probar en la línea 17.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (themeElement) => {
    // …then run your redirect logic.
    (function () {
      const url = new URL(window.location.href);
      const params = url.searchParams;
      const shadow = document.querySelector('div#varify-shadow-root');

      // only redirect when the variation-param is missing AND the shadow-root isn't present
      if (!params.has('pb') && !shadow) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // replace so you don't add a new history entry
        window.location.replace(url.toString());
      } else {
        console.log('Redirect skipped:', {
          hasVarifyVariation: params.has('varify-variation-id'),
          varifyShadowRootExists: !!shadow
        });
      }
    })();
  }
);

Una vez que hayas actualizado el fragmento de código con los nuevos IDs de tema, haz clic en „Finished“ y dale al experimento un nombre adecuado. Luego, abre „Page Targeting“ en el experimento y cambia el „Match Type“ de „Simple Match“ a „Contains.“ Después haz clic en „Save Page Targeting.“.

Segmentación de página del «Shopify Theme Test»: la condición de URL «Contains» coincide con el dominio de la tienda

Una vez que tú o un visitante hayáis visto la versión de test, seguiréis viendo la versión de vista previa incluso después de que el experimento haya finalizado. Para que también puedas volver a ver el tema original en la variante original, crea una nueva variante con el nombre "New Original". Luego haz clic en "Add JS" en el editor visual e inserta el siguiente código JavaScript y sustituye data-theme-instance-id por el ID del tema de vista previa del tema de Shopify que quieras testear.

Ejecutando el «Shopify Theme Test» con tres filas: Original al 0 % de tráfico, «Variation 1» y «New Original» al 50 % cada una 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Paso 4: Segmentación y control de calidad​

Una vez que hayas implementado el JavaScript y guardado el experimento, puedes guardar la URL de tu tienda en la segmentación de página del experimento. También puedes usar los enlaces "Preview" para comprobar si la redirección funciona y si todos los ajustes se han realizado correctamente. Para ello, simplemente busca el ID de tema correspondiente en el código de la tienda. En la versión de test debería encontrarse el ID del tema original o el ID del tema de vista previa.

Paso 5: Inicia el experimento​

Ahora inicia el experimento con "Start Experiment". A partir de ahora, el 50% de tus visitantes serán dirigidos al nuevo tema y el 50% seguirá viendo el tema antiguo. Los visitantes permanecen siempre asignados a la misma variante durante la duración del experimento. Esto significa que el tema que han visto una vez, lo volverán a ver durante el experimento. Después de un tiempo, reconocerás qué tema funciona mejor.

Paso 6: Restablecer el modo de vista previa después de finalizar el experimento​

Una vez que tus usuarios hayan visto la variante del tema de vista previa, seguirán viéndola incluso después de que el experimento haya terminado. Puedes iniciar un experimento de "Clean Up" para que los usuarios puedan volver a ver tu tema original. Simplemente crea un nuevo experimento e inserta el código JavaScript de la variante "New Original" (ver arriba) en "Add JS". Guarda el experimento con un nombre de tu elección. Configura la asignación de tráfico al 100% variante e inicia el experimento.

El modo de vista previa ahora ha finalizado para todos los participantes anteriores de la prueba que han visto la variante. Por favor, verifica la funcionalidad del código antes de iniciar el experimento, como en los pasos anteriores.

En esta página