• Prueba los temas de Shopify con Varify.io

    Índice

    Corto y dulce

    Utiliza la función "Shopify Theme Preview" para probar fácilmente un nuevo tema de Shopify con Varify.io. Crea un nuevo experimento y utiliza el código JavaScript proporcionado. Personalízalo con el ID de tu nuevo tema y pruébalo antes de convertir tu tienda.

    Por qué probar los temas de Shopify

    Un nuevo tema de Shopify debe ser probado A/B antes de cambiar para asegurarse de que no degrada el rendimiento de la tienda. Los cambios en el diseño pueden influir en el comportamiento del cliente y en KPIs como la tasa de conversión. Las pruebas A/B permiten comprobar con datos si el nuevo tema ofrece mejores resultados.

    Paso 1: Inserte el fragmento Varify.io en el archivo theme.liquid

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

    Copia el fragmento de Varify.io del panel de control y pégalo lo más arriba posible en el archivo theme.liquid de tu tienda. Para ello, ve a "Tienda online"-> "Temas" en el backend de Shopify y haz clic en "editar código".

    Temas Shopify
    A continuación, puede insertar el fragmento Varify.io como en el siguiente ejemplo. Por favor, no cambie nada en el fragmento, incluso si Shopify hace sugerencias de cambios - los cambios pueden dar lugar a efectos de parpadeo o la prueba A / B ya no funciona.

    Pruebe si la aplicación se ha realizado correctamente. Utilice el tablero Varify.io para crear un nuevo experimento en una página de producto de su tienda como una prueba. Si el editor se abre, la implementación fue exitosa.

    Paso 2: Busque el ID del nuevo tema que desea probar

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

    1. ir a: Canales de ventas > Tienda en línea > Temas > Biblioteca de temas.

    2. busque el tema que desea probar.

    3. haga clic en los tres puntos (Acciones)

    4. Haga clic en "Vista previa" y copie el enlace.

    Su enlace de previsualización tendrá este aspecto: https://deinshop.myshopify.com/?preview_theme_id=1234567890

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

    Ahora haga lo mismo para su tema actual y copie el ID del tema aquí también.

    Paso 3: Crear experimento

    Cree un nuevo experimento. Para ello, simplemente introduzca la página de inicio de su tienda como la URL del editor en el panel de control de Varify. A continuación, haga clic en "Añadir JS" y añada el siguiente JavaScript al experimento.

    💡Nota: Introduzca el ID del tema que utiliza actualmente en la línea 3 y el ID del tema que desea probar en la línea 13.
    				
    					// Wait until the theme instance is present on the page…
    window.varify.helpers.waitFor(
      '[data-theme-instance-id="143807480072"]',
      (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) {
            params.set('preview_theme_id', '178703466760');
            params.set('pb', '0');   // hide the preview bar
    
            // 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
            });
          }
        })();
      }
    );
    
    				
    			

    En cuanto el fragmento de código se haya personalizado con los nuevos ID de tema, puede hacer clic en "Finalizado" y dar un nombre adecuado al experimento. A continuación, abra "Segmentación de páginas" en el experimento y cambie el "Tipo de coincidencia" de "Coincidencia simple" a "Contiene". A continuación, haga clic en "Guardar orientación de página".

    Página de prueba de temas de Shopify

    Etapa 4: Selección de objetivos y garantía de calidad

    Una vez que haya implementado el JavaScript y el CSS y haya guardado el experimento, puede guardar la URL de su tienda en la página de destino del experimento. También puede utilizar los enlaces "Vista previa" para comprobar si la redirección funciona y si todos los ajustes se han realizado correctamente.

    Paso 5: Iniciar el experimento

    Ahora inicia el experimento con "Iniciar experimento". A partir de ahora, 50% de tus visitantes serán dirigidos al nuevo tema y 50% seguirán viendo el tema antiguo. Los visitantes permanecerán asignados siempre a la misma variante mientras dure el experimento. Esto significa que el tema que han visto una vez, lo volverán a ver durante el experimento. Al cabo de un tiempo, reconocerá qué tema funciona mejor.

  • Primeros pasos