Añadir CSS personalizado al widget

Si los ajustes integrados de la página Apariencia no te dan el aspecto que buscas, puedes añadir tu propio CSS para cambiar cómo se ve el widget de Olvio en tu tienda online. El CSS personalizado está disponible en todos los planes.

Para los colores, las fuentes y el radio de las esquinas, empieza por los ajustes integrados: consulta Personalizar los colores del widget, Personalizar la fuente y el tamaño de fuente del widget y Personalizar el radio de las esquinas del widget.

Tu CSS se aplica a toda la página

El widget no está aislado del resto de la página de tu tienda online. Olvio añade tu CSS a la página como una hoja de estilos normal, así que una regla puede cambiar cualquier elemento de la página, no solo el widget.

Olvio lo añade en las páginas de producto que muestran el bloque de Olvio y, si usas Olvio Advisor (planes Growth y Scale), en las demás páginas de tu tienda donde se carga la incrustación de aplicación Olvio Advisor.

Incluye una clase de Olvio en cada selector, por ejemplo .olvio-panel. Un selector suelto como p o button cambia el estilo de todos los párrafos o botones de esas páginas.

Añadir tu CSS

En el admin de Olvio, abre Apariencia.
Haz clic en la pestaña Avanzado.
En la tarjeta CSS personalizado, pega o escribe tu CSS. El campo admite hasta 5.000 caracteres y muestra un contador de caracteres.
Haz clic en Guardar en la barra de guardado.

El mensaje Cambios guardados confirma que se ha guardado. Después, el campo muestra tu CSS tal como Olvio lo guardó, para que puedas ver si se eliminó algo (consulta Lo que Olvio elimina al guardar más abajo).

La Vista previa en vivo de la página Apariencia no muestra el CSS personalizado: El CSS personalizado solo se aplica en el widget en vivo. Para ver tus cambios, recarga una página de producto de tu tienda online.

Hacer que tus reglas prevalezcan sobre los estilos de Olvio

Los estilos propios del widget de Olvio usan !important en muchas propiedades para que tu tema no pueda romper el widget. Añade !important a cada propiedad que sobrescribas: donde el estilo de Olvio lo usa, una regla sin él pierde frente al valor por defecto de Olvio.

Para ayudar a que tus reglas prevalezcan, Olvio añade html delante de cada selector al aplicar tu CSS: .olvio-panel se aplica como html .olvio-panel.

Los selectores dentro de reglas-at como @media no reciben este prefijo. Añádeles tú html al principio, por ejemplo @media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.

Fuera de las reglas-at, no empieces tú un selector con html o :root: con el prefijo que añade Olvio, la regla no coincidiría con nada. Evita también las comas dentro de :has() y dentro de valores de atributo entre comillas: Olvio también añade el prefijo ahí, y esa parte del selector deja de coincidir.

Selectores útiles

La tarjeta CSS personalizado sugiere estos selectores:

.olvio-label: el Nombre del experto, el texto pequeño en mayúsculas encima del título en la página de producto.
.olvio-title: la Pregunta gancho, el título en la página de producto.
.olvio-suggestion-btn: los botones de preguntas sugeridas en la página de producto y, en las conversaciones de Olvio Advisor, los botones de respuesta encima del campo de pregunta y los botones Continuar y Empezar de nuevo, que ofrecen retomar una conversación anterior. Para dar estilo a uno solo de estos lugares, pon .olvio-suggestions (página de producto) o .olvio-panel-chips-row (Olvio Advisor) delante de la clase, por ejemplo .olvio-panel-chips-row .olvio-suggestion-btn.
.olvio-input-row: el campo de pregunta, en la página de producto y en el panel de chat.
.olvio-panel: el panel de chat.
.olvio-msg-user: los mensajes del comprador en el panel de chat.
.olvio-msg-assistant: las respuestas de Olvio en el panel de chat.
.olvio-atc-btn: el botón de añadir al carrito del producto que se está viendo, encima del campo de pregunta en el panel de chat. Los botones de añadir al carrito de las tarjetas de producto del chat usan .olvio-card-atc.

Para encontrar la clase de otro elemento, haz clic derecho sobre él en tu tienda online y usa la herramienta Inspeccionar de tu navegador.

Ejemplos

Sombra en el panel de chat: .olvio-panel { box-shadow: -12px 0 40px rgba(0,0,0,0.15) !important; }
Título más pequeño en la página de producto: .olvio-title { font-size: 1.25em !important; }
Color al pasar el cursor por las preguntas sugeridas y los botones de respuesta de Advisor: .olvio-suggestion-btn:hover { background: #faf5ff !important; }
Ocultar el nombre del experto: .olvio-label { display: none !important; }

Lo que Olvio elimina al guardar

Olvio revisa tu CSS al guardar y elimina, entre otras cosas:

Las reglas @import.
Los comentarios CSS (/* … */).
Los fragmentos HTML como <script, </style, .
Las direcciones completas dentro de url(), image-set(), image(), src() y cross-fade(): un valor que empieza por http://, https://, //, javascript: o vbscript: se sustituye por un url() vacío, incluso cuando apunta a tu propia tienda. De esta forma no puedes cargar imágenes ni fuentes desde una dirección web completa. Las URI data: y las rutas relativas, como una ruta que empieza por una sola /, se conservan.
La propiedad behavior y expression(), que solo usaban versiones antiguas de Internet Explorer. Evita scroll-behavior y overscroll-behavior en el CSS personalizado: al guardar, Olvio elimina parte de estas declaraciones, y el CSS que va detrás puede dejar de funcionar.
Cualquier regla cuyo selector apunte a la línea del pie del panel de chat (.olvio-panel-footer, .olvio-brand-mention) o a la zona inferior del panel que la contiene (.olvio-panel-input), también dentro de @media y de reglas anidadas. Se elimina la regla entera, aunque incluya también otros selectores. Una regla-at como @scope que nombre una de estas clases se elimina con todo su contenido. Para dar estilo al campo de pregunta, usa .olvio-input-row.
Todo lo que supere los 5.000 caracteres.

Dentro de una cadena entre comillas, evita las secuencias de escape con barra invertida como \", \\ y \A: rompen la cadena al guardar. Cuando puedas, escribe directamente el propio carácter, y pon entre comillas simples una cadena que contenga ".

La línea "Con tecnología de Olvio" se mantiene en todos los planes

En la parte inferior del panel de chat aparece una línea que, en español, dice Estás hablando con una IA • Con tecnología de Olvio, con un enlace a Olvio en la Shopify App Store. Olvio no ofrece ninguna forma de ocultar esta línea, en ningún plan.

Olvio elimina las reglas que nombran las clases de esta línea. En tu tienda online, el widget además impone los estilos de visualización y visibilidad propios de la línea y la vuelve a colocar si algo la elimina.

Probar y deshacer tus cambios

Después de guardar, recarga una página de producto de tu tienda online y haz clic en una pregunta sugerida (o escribe una pregunta) para abrir el panel de chat. Comprueba que los mensajes se leen bien y que nada se superpone. Comprueba también la página en una ventana estrecha, del tamaño de un teléfono.

Para cancelar los cambios que no has guardado, haz clic en Descartar en la barra de guardado. Para quitar el CSS personalizado que ya guardaste, vacía el campo y haz clic en Guardar: el widget vuelve a su aspecto por defecto la próxima vez que se cargue una página de tu tienda online.

Si tus cambios siguen sin aparecer, consulta Mis cambios de Apariencia no se ven en la tienda online.