La fuente y el tamaño de texto base del widget Olvio se eligen en la página Apariencia. Los mismos ajustes se aplican al widget de tus páginas de producto, a su panel de chat y a Olvio Advisor, disponible en los planes Growth y Scale (consulta ¿Qué es Olvio Advisor?). La página Apariencia está disponible en todos los planes, una vez que has elegido un plan.

La tarjeta contiene el menú Fuente y el control deslizante Tamaño de fuente base.

El menú Fuente ofrece estas opciones:

Para usar una fuente que no está en la lista, selecciona Personalizada al final del menú y escribe la fuente en el campo font-family CSS que aparece, por ejemplo 'Brandon Grotesque', sans-serif. Termina el valor con una familia genérica como sans-serif o serif, para que el navegador tenga una fuente de reserva. El campo admite hasta 200 caracteres y empieza con el valor CSS de la fuente que tenías seleccionada (vacío si tenías Default (sistema)). Si lo dejas vacío, el widget usa Default (sistema).

Olvio no carga ningún archivo de fuente por ti, tanto si eliges una fuente de la lista como si escribes la tuya, así que la fuente tiene que cargarla tu tema de Shopify o estar instalada en el dispositivo del comprador. De lo contrario, el navegador usa la siguiente fuente del valor, como una fuente genérica sans serif o serif, y el widget se ve distinto de lo que elegiste. El CSS personalizado tampoco puede cargar una fuente desde una dirección web completa: al guardar, Olvio elimina las reglas @import y cualquier dirección que empiece por http://, https:// o // dentro de url(), incluso si apunta a tu propia tienda. Para saber qué puede cambiar el CSS personalizado, consulta Añadir CSS personalizado al widget.

Para que el widget coincida con el texto de tu tienda:

Mueve el control deslizante Tamaño de fuente base entre 12 y 20 px, en pasos de 1 px. Su etiqueta muestra el valor actual, y las tiendas nuevas empiezan en 14 px. Todo el texto del widget se escala a partir de este valor, así que la etiqueta, el título, las preguntas sugeridas y los mensajes mantienen sus proporciones.

Una excepción: en pantallas táctiles, como teléfonos y tabletas, el texto que los compradores escriben en el campo de pregunta siempre mide 16 px. Así se evita que el navegador haga zoom cuando un comprador toca el campo.

La Vista previa en vivo, junto a los ajustes (debajo en pantallas más pequeñas), se actualiza en cuanto cambias la fuente o el tamaño. Usa los botones Página de producto y Panel de chat que hay encima para cambiar entre las dos vistas.

La vista previa usa las fuentes disponibles en tu navegador, no las que carga tu tema, así que una fuente puede verse distinta en la vista previa y en tu tienda online. Por ejemplo, Inter siempre se ve correctamente en la vista previa porque el admin de Olvio la carga, aunque tu tema no cargue Inter. Además, el título de la vista previa es un poco más pequeño que en tu tienda online.

En cuanto cambias un ajuste, aparece la barra de guardado. Haz clic en Guardar y Cambios guardados lo confirma. No puedes guardar mientras un campo de color muestre Formato esperado: #rrggbb, así que corrige primero ese código. Descartar vuelve a tus últimos ajustes guardados. Recarga una página de producto en tu tienda online para ver el resultado. Si no cambia, consulta Mis cambios de Apariencia no se ven en la tienda online.

El bloque Olvio — Product page del editor de temas de Shopify tiene una sección Typography override. Si marcas Use custom font size for this block, ese bloque usa su propio tamaño de fuente en lugar del definido en Apariencia. Este cambio se aplica a todos los productos que usan esta plantilla de producto.

Este cambio también se aplica al panel de chat que se abre desde ese bloque. De esta forma solo puedes cambiar el tamaño, no la fuente. La Vista previa en vivo de Olvio no muestra este cambio, así que si un tamaño que definiste en Apariencia no aparece en una página de producto, comprueba si esta casilla está marcada. Para encontrar el bloque, consulta Añade el widget Olvio a tus páginas de producto.