Añade el widget Olvio a tus páginas de producto
El widget Olvio es un bloque que añades a tu plantilla de producto en el editor de temas de Shopify. En tus páginas de producto muestra tu Nombre del experto, tu Pregunta gancho, preguntas sugeridas y un campo de pregunta, y el panel de chat se abre cuando un cliente envía una pregunta. No necesitas editar el código del tema.
Antes de empezar
Tu tema debe ser un tema Online Store 2.0. Si Olvio detecta un tema Online Store 1.0 más antiguo, el Panel muestra el aviso Tu tema no es compatible con el widget de Olvio. Consulta Online Store 1.0 no compatible — qué hacer.
El widget solo aparece en tu escaparate mientras estás suscrito a un plan, incluso durante tu prueba gratuita.
Conecta tu clave API de Anthropic. Sin clave, el bloque sigue mostrando su Nombre del experto, su Pregunta gancho y el campo de pregunta, pero no las preguntas sugeridas, y al enviar un mensaje aparece un mensaje de error (en español: Lo sentimos, ha ocurrido un error. Inténtalo de nuevo.). Consulta Conectar tu clave API de Anthropic (Claude).
Añadir el bloque desde la guía de configuración
Abre Olvio desde el panel de control de Shopify. En la página Panel, busca la tarjeta Prepara Olvio para tu primer cliente.
En el paso Añade el bloque Olvio a tu página de producto, haz clic en Abrir editor de temas. El editor de temas de Shopify se abre en una nueva pestaña en una plantilla de producto, con el bloque Olvio añadido en una nueva sección Apps para que puedas previsualizarlo.
Arrastra la sección hasta el lugar de la página donde quieres que aparezca el widget.
Haz clic en Guardar para añadirlo a tu tema. El bloque solo aparece en tu escaparate si ese tema es tu tema publicado.
La tarjeta desaparece cuando se completan todos los pasos. Si hiciste clic en Ocultar en la tarjeta, no vuelve a aparecer, así que añade el bloque manualmente como se describe a continuación. Consulta Tu guía de configuración: prepara Olvio para tu primer cliente.
Añadir el bloque manualmente
Desde el panel de control de Shopify, ve a Tienda online.
Busca tu tema publicado y haz clic en Editar tema. Si añades el bloque a otro tema, solo aparece en tu escaparate cuando ese tema se publica.
Abre el menú de páginas en la parte superior del editor (muestra Página de inicio) y selecciona la plantilla de producto que quieres editar.
En la barra lateral, haz clic en Agregar sección, o en Agregar bloque dentro de la sección donde quieres el widget.
En el menú desplegable, en la sección Apps, selecciona Olvio — Product page.
Arrastra el bloque a su posición si es necesario y haz clic en Guardar.
El bloque Olvio solo está disponible en las plantillas de producto. Los cambios en una plantilla se aplican a todos los productos que la usan, así que si algunos de tus productos usan otra plantilla de producto (elegida en el ajuste Plantilla del tema del producto), añade el bloque también a esa plantilla.
Si el bloque no aparece en la lista, consulta No encuentro el bloque Olvio en el editor de temas.
Cambiar los colores o el tamaño de fuente de una plantilla (opcional)
De forma predeterminada, el widget usa los colores y el tamaño de fuente definidos en la página Apariencia de Olvio. Para cambiarlos solo en una plantilla, selecciona el bloque Olvio en el editor de temas y usa sus ajustes:
Use custom colors for this block: si la casilla está marcada, el widget usa los colores Accent, Accent foreground, Background, Surface, Border, Text y Muted text definidos en el bloque.
Use custom font size for this block: si la casilla está marcada, el widget usa el Base font size del bloque, de 12 a 20 px (14 px de forma predeterminada).
Estos cambios se aplican a todos los productos que usan la plantilla, y también al panel de chat que se abre desde el widget. La fuente, el radio de las esquinas, el avatar y el CSS personalizado siempre vienen de la página Apariencia. Consulta Personalizar los colores del widget.
Comprobar que el widget está activo
Abre una página de producto en tu escaparate: el widget aparece donde colocaste el bloque. La primera vez que el widget se carga en un producto activo que Olvio ya ha importado, la guía de configuración marca este paso como completado (si aún quedan otros pasos pendientes, su botón cambia a Ver conversaciones). Este paso también puede marcarse mientras previsualizas el bloque en el editor de temas, así que comprueba una página de producto en tu escaparate real para confirmar que el bloque está guardado: una vista previa por sí sola no lo publica. Para probar una conversación completa, consulta Prueba Olvio en tu tienda online.
Si marcaste Ocultar el widget en los idiomas que Olvio no cubre en la tarjeta Idiomas de la pestaña Avanzado de Apariencia, el widget no aparece cuando un cliente navega por tu tienda en un idioma que el widget no cubre. Si la casilla está desmarcada, el widget se muestra igualmente en esas páginas: sus preguntas sugeridas están en tu idioma principal y el chat empieza en ese idioma. En una página en un idioma que Olvio no admite, las preguntas sugeridas están, en cambio, en inglés, y el chat empieza en inglés, si tu widget ofrece inglés. Debajo de la casilla, Olvio enumera los idiomas que publica tu tienda y que el widget no cubre. Si el widget cubre todos los idiomas que publica tu tienda, la casilla aparece atenuada. El editor de temas siempre muestra el bloque, sea cual sea el idioma de la vista previa. Consulta Multilingüe: elegir qué idiomas cubre tu widget.
Si el widget sigue sin aparecer, consulta El widget no aparece en mi escaparate.
Usar Olvio Advisor (Growth y Scale)
El bloque de página de producto es independiente de Olvio Advisor. Si tu tienda tiene el plan Growth o Scale y usas enlaces de Advisor, activa también la incrustación de aplicación Olvio Advisor en tu tema publicado: en el editor de temas, haz clic en el icono Incrustaciones de aplicación, activa Olvio Advisor y haz clic en Guardar. Los enlaces de Advisor necesitan esta incrustación: una vez activada, un enlace abre Advisor en cualquier página de tu tienda, excepto en los idiomas ocultos por Ocultar el widget en los idiomas que Olvio no cubre. Consulta Activa Olvio Advisor y añade enlaces del Advisor a tu tienda.
