Shopify - Plantilla PDP de prueba
Índice
Corto y dulce
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 una nueva prueba A/B y añade el JavaScript de esta guía. No es necesario realizar cambios en los productos o en la configuración de Shopify.
Crear nueva plantilla
En primer lugar, cree una nueva plantilla para su página de detalles del producto (PDP). Esto le permitirá probar diseños alternativos, widgets de aplicaciones u otros elementos.
Cómo crear una nueva plantilla en pocos pasos:
- Vaya a Tienda en línea > Temas > Personalizar
- Haga clic en el menú desplegable de la parte superior, que por defecto está configurado como "Página de inicio".
- Seleccione el área Productos en el desplegable
- Haga clic en Crear plantilla para crear su nueva plantilla PDP
Dé un nombre a la nueva plantilla, por ejemplo: new-pdp.
En "Basado en", seleccione la plantilla actualmente en uso: servirá como punto de partida para su nueva plantilla.
- Ahora realice todos los cambios deseados en la nueva plantilla:
- Probar los widgets de una aplicación Shopify
- Crear nuevos bloques, elementos o textos
- Cambiar el orden de los bloques existentes
- Personalizar la combinación de colores
- y mucho más
- A continuación, guarde la nueva versión de su plantilla PDP. Aún no es visible, ya que sus productos siguen configurados con la plantilla original.
Crear un nuevo experimento en Varify
Cree un nuevo experimento en una de sus páginas de productos
Haga clic en el símbolo del código arriba a la derecha
Seleccione "Añadir JavaScript".
Inserte el siguiente JavaScript
En la línea 5, cambie el valor de la constante pdpVariationName 'new-pdp' y sustitúyalo por el nombre de su nueva plantilla
En las líneas 3 y 4, cambie los ID del experimento y de la variante por los ID del experimento correspondientes. (Importante: Debe guardar la prueba una vez antes para que se creen los ID. A continuación, puede guardarla mediante Editar abrir de nuevo y sustituir los ID).
Guardar 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;
}
})();
Configurar e iniciar la orientación de los experimentos
El experimento debe mostrarse en todas las páginas de productos. Por lo tanto, es necesario un pequeño ajuste en la orientación de la página.
Abrir la página de orientación del experimento
Establecer la orientación a /products/ con el tipo de coincidencia "Contiene"
Si sus páginas de detalles del producto no son claramente identificables a través de la URL, también puede utilizar un selector CSS único que sólo aparezca en sus PDP. El selector "Buybox" suele ser adecuado para esto.
Iniciar el experimento
