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 3, cambie el valor de la constante pdpVariationName 'new-pdp' y sustitúyalo por el nombre de su nueva plantilla
Guardar el experimento
// ─── CONFIG ───
// Just set this to match your Shopify alternate PDP template name:
const pdpVariationName = 'new-pdp';
(function () {
const href = window.location.href;
const forbiddenRegex = /[?&#](?:varify-variation-id|varify-variation-name|varify-editor)=/;
// ─── 0. Bail out if any forbidden param is present ───
if (forbiddenRegex.test(href)) {
return;
}
// ─── 1. Hide everything until we’ve loaded the variation ───
document.documentElement.style.visibility = 'hidden';
const url = new URL(href);
const params = new URLSearchParams(url.search);
// ─── 2. Merge existing params (e.g. variant=…) & add view ───
params.set('view', pdpVariationName);
// ─── 3. Fetch the variation template HTML ───
fetch(`${url.pathname}?${params.toString()}`, { credentials: 'same-origin' })
.then(res => res.text())
.then(html => {
// ─── 4. Parse & swap head/body ───
const doc = new DOMParser().parseFromString(html, 'text/html');
document.head.replaceWith(doc.head);
document.body.replaceWith(doc.body);
// ─── 5. Remove only the `view` param, keep all others ───
params.delete('view');
const cleanQS = params.toString();
const cleanURL = url.pathname + (cleanQS ? `?${cleanQS}` : '') + url.hash;
history.replaceState(null, '', cleanURL);
// ─── 6. Un-hide the page ───
document.documentElement.style.visibility = '';
})
.catch(() => {
// On error, just show the default template
document.documentElement.style.visibility = '';
});
})();
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
