Probador virtual en tu sitio web

Lleva el probador de Previaly a la página de producto de tu tienda en línea. Pegas un fragmento de código una sola vez; a partir de ahí, cada armazón que exista en los dos lados recibe el botón Probar ahora (o un ícono sobre la foto) y abre el probador encima de tu sitio, con la cámara, igual que en tu vitrina de Previaly.

Antes de empezar: el código del modelo

Tu sitio reconoce el armazón por el código del modelo. En cada armazón, en el panel de Previaly, usa como código del modelo el mismo SKU (código) que tiene el producto en tu tienda en línea. Las mayúsculas y los espacios no importan: rb-3025 y RB-3025 son el mismo código.

Si el código no es igual en los dos lados, el botón simplemente no aparece en ese producto, y nada más cambia en tu sitio.

El fragmento

Cópialo en el panel de Previaly (en portugués), en Configurações → Provador no seu site. Tiene este formato, con la dirección de tu óptica en lugar de mi-optica:

<script src="https://previaly.com/provador.js" data-loja="mi-optica" async></script>

Ahí también eliges si prefieres el botón antes de Comprar o el ícono sobre la foto del producto. La elección vale para todos los productos y puedes cambiarla cuando quieras, sin tocar el sitio.

El botón sigue el idioma de tu sitio: en una página con <html lang="es"> dice Probar ahora; con lang="en", Try on now.

Dónde pegarlo en cada plataforma

Shopify

1. En el panel de Shopify, abre Tienda online → Temas y, en el tema actual, haz clic en Personalizar.
2. En la página de producto, agrega un bloque Liquid personalizado y pega el fragmento. Guarda.
3. Otra opción: … → Editar código, abre theme.liquid y pega el fragmento justo antes de </body>.

Tiendanube

1. En el administrador, abre Configuración → Códigos externos.
2. Pega el fragmento en el campo de códigos y guarda.

No necesitas editar el tema ni entrar por FTP.

WooCommerce (WordPress)

1. Instala un plugin de fragmentos de código, como WPCode, y crea un fragmento de pie de página (footer) para las páginas de producto, o pega el fragmento en el footer.php de tu tema hijo, antes de </body>.
2. Guarda y abre una página de producto para comprobarlo.

Cualquier otro sitio

Pega el fragmento antes de </body> en todas las páginas de producto. Si tu sitio no muestra el SKU en la página, puedes indicar el armazón directamente: agrega data-sku="CODIGO" al fragmento de esa página, o data-armacao="ID" con el identificador del armazón (los 12 caracteres al final de su dirección en Previaly).

Cómo comprobarlo

Abre la página de un producto cuyo código exista en los dos lados. El botón Probar ahora aparece antes de Comprar, con su misma altura (o el ícono, sobre la foto). Al tocarlo, el probador se abre encima del sitio y pide la cámara. Al cerrarlo, vuelves a tu sitio sin recargar.

Preguntas frecuentes

¿Esto puede romper mi sitio? El fragmento solo agrega un botón y una ventana encima; no cambia formularios, el carrito ni el checkout. Cuando no reconoce la página o el código, no hace nada.

El probador no se abrió dentro de Instagram. El navegador interno de Instagram y Facebook no permite la cámara dentro de otra página. En esos casos, el probador se abre en una pestaña nueva, en tu vitrina de Previaly.

¿Puedo desactivar la medición de DNP y altura? Sí, en Configurações → Provador. La elección vale en tu vitrina de Previaly y en tu sitio.

Quiero otro selector para el botón Comprar. Agrega data-botao-comprar=".mi-clase" al fragmento; para el ícono, data-foto=".mi-galeria". Esto es para quien edita el tema; en la mayoría de los casos no hace falta.