Saltar al contenido principal

Shopify - Probar plantilla PDP

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

En resumen​

Con Varify, puedes probar fácilmente plantillas PDP alternativas para tu tienda Shopify. Para ello, primero crea una nueva plantilla PDP con todas las personalizaciones deseadas. Crea un nuevo test A/B y añade el JavaScript de esta guía. No es necesario realizar cambios en los productos ni en la configuración de Shopify.

Crear nueva plantilla​

Primero crea una nueva plantilla para tu página de detalle del producto (PDP). Esto te permite probar disposiciones alternativas, widgets de apps u otros elementos.

Cómo crear una nueva plantilla en solo unos pasos:

  1. Ve a Online Store > Themes > Customize
  2. Haz clic en el menú desplegable de la parte superior, que está configurado en «Home page» por defecto
  3. Selecciona el área Products en el desplegable
  4. Haz clic en Create Template para crear tu nueva plantilla PDP
Editor de temas de Shopify en tres pasos: abre el menú desplegable de la página, selecciona «Products», luego haz clic en «Create template»
  1. Dale un nombre a la nueva plantilla, por ejemplo: new-pdp.
  2. En «Based on», selecciona la plantilla que estás usando actualmente: servirá como punto de partida para tu nueva plantilla.
Cuadro de diálogo de Shopify «Create a template» con el nombre «new-pdp» basado en «Default product»
  1. Ahora realiza todos los cambios deseados en la nueva plantilla:
  • Prueba widgets de una app de Shopify
  • Crea nuevos bloques, elementos o textos
  • Cambia el orden de los bloques existentes
  • Personaliza el esquema de colores
  • y mucho más
  1. Luego guarda la nueva versión de tu plantilla PDP. Todavía no es visible, ya que tus productos siguen configurados con la plantilla original.

Crea un nuevo experimento en Varify​

  1. Crea un nuevo experimento en una de tus páginas de producto
  2. Haz clic en el símbolo de código en la parte superior derecha
  3. Selecciona "Add JavaScript"
  4. Inserta el siguiente JavaScript
  5. En la línea 5, cambia el valor de la constante pdpVariationName 'new-pdp' y reemplázalo con el nombre de tu nueva plantilla
  6. En las líneas 3 y 4, cambia los IDs de experimento y variante por los IDs correspondientes del experimento. (Importante: debes guardar la prueba una vez de antemano para que los IDs se generen siquiera. Luego puedes guardarla nuevamente mediante Edit y reemplazar los IDs).
  7. Guarda el experimento
(function () {
  // ─── CONFIG ───
  const experimentId = 32898;
  const variationId = 49279;
  const viewValue = 'new-pdp'; //"view"-value (z.B. Template-Name)

  // ─── HELPERS ───
  if (window.varify.helpers.isInEditor()) {
    return
  }

  // ─── LOGIC ───
  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');

  const needsView = params.get('view') !== String(viewValue);
  const needsVa = params.get('va-red') !== paramAsBase64;

  if (needsView || needsVa) {
    params.set('view', String(viewValue));
    params.set('va-red', paramAsBase64);

    const newUrl =
      `${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;

    window.location.href = newUrl;
  }
})();

Configura e inicia el targeting del experimento​

El experimento debe mostrarse en todas las páginas de producto. Por lo tanto, es necesario un pequeño ajuste en el targeting de páginas.

  1. Abre el targeting de páginas del experimento
  2. Configura el targeting a /products/ con el tipo de coincidencia "Contains"
  3. Si tus páginas de detalle de producto no son claramente identificables a través de la URL, también puedes usar un selector CSS único que solo aparezca en tus PDPs. El selector "Buybox" suele ser adecuado para esto.
  4. Inicia el experimento
Targeting de páginas del «PDP Template test»: la condición de URL «Contains» coincide con «/products/»
En esta página