Personalizar el radio de las esquinas del widget
El radio de las esquinas define cuánto se redondean las esquinas del widget: desde esquinas rectas a 0 px hasta un círculo para el avatar y una forma de píldora para el botón de añadir al carrito y el campo de entrada. Olvio te ofrece cinco controles deslizantes independientes para que adaptes cada parte del widget a tu tema. Están disponibles en todos los planes.
Los mismos valores se aplican al widget de tus páginas de producto, al panel de chat y a las conversaciones de Olvio Advisor (planes Growth y Scale).
Encontrar los controles de radio de las esquinas
En el admin de Olvio, abre Apariencia.
En la pestaña Página de producto, la tarjeta Sugerencias tiene un control deslizante Radio de las esquinas.
En la pestaña Panel de chat, la tarjeta Avatar tiene un control deslizante Radio de las esquinas, y la tarjeta Forma tiene los controles Burbuja de conversación, Botón de añadir al carrito y Campo de entrada.
Pestaña | Tarjeta | Control deslizante | Rango | Valor predeterminado |
Página de producto | Sugerencias | Radio de las esquinas | 0 a 24 px | 12 px |
Panel de chat | Avatar | Radio de las esquinas | 0 a 16 px | 16 px (círculo) |
Panel de chat | Forma | Burbuja de conversación | 0 a 24 px | 12 px |
Panel de chat | Forma | Botón de añadir al carrito | 0 a 32 px | 32 px (píldora) |
Panel de chat | Forma | Campo de entrada | 0 a 32 px | 32 px (píldora) |
La etiqueta de cada control muestra su valor actual, por ejemplo Burbuja de conversación — 12 px. El control del avatar añade (círculo) a 16 px, y los controles Botón de añadir al carrito y Campo de entrada añaden (píldora) a partir de 28 px.
Qué cambia cada control en tu escaparate
Radio de las esquinas de Sugerencias: las preguntas sugeridas del widget Olvio en la página de producto.
Radio de las esquinas de Avatar: el avatar que aparece junto a cada respuesta de la IA en el panel de chat. A 16 px, el avatar es un círculo.
Burbuja de conversación: los mensajes del comprador, las respuestas de la IA y el indicador de escritura. También redondea la imagen del producto en la parte superior del panel de chat, las imágenes de las tarjetas de producto en el chat y las etiquetas de descuento y de agotado de esas tarjetas. Sea cual sea el valor del control, la esquina inferior de cada mensaje del lado del remitente mantiene un radio de 4 px.
Botón de añadir al carrito: el botón de añadir al carrito situado encima del campo de entrada en el panel de chat de tus páginas de producto, y los botones de añadir al carrito de las tarjetas de producto en el chat cuando Activar añadir al carrito en el chat está activado. Consulta Mostrar tarjetas de producto y permitir añadir al carrito desde el chat.
Campo de entrada: el campo de pregunta de la página de producto y de la parte inferior del panel de chat, los menús de variantes de las tarjetas de producto (cuando Activar añadir al carrito en el chat está activado) y los botones de respuesta que aparecen encima del campo de entrada en las conversaciones de Olvio Advisor.
El botón de enviar y el botón de cerrar son redondos y no tienen control deslizante.
Previsualizar los cambios
La Vista previa en vivo se actualiza mientras arrastras un control. Al abrir la pestaña Página de producto se muestra la vista previa de la página de producto, con las sugerencias y el campo de entrada. Al abrir la pestaña Panel de chat se muestra la vista previa del panel de chat, con el avatar, las burbujas de mensaje, el botón de añadir al carrito y el campo de entrada. También puedes cambiar entre las dos con los botones Página de producto y Panel de chat situados encima de la vista previa.
La vista previa no muestra las tarjetas de producto, los botones de respuesta de Advisor ni tu CSS personalizado, y el marcador de posición de la miniatura del producto en la parte superior de la vista previa del panel de chat no sigue el control Burbuja de conversación (la imagen del producto en tu escaparate sí lo sigue). El avatar junto a las respuestas en la vista previa sigue el control Avatar, pero el avatar más grande de la tarjeta Avatar siempre se muestra como un círculo. Revisa tu escaparate después de guardar.
Guardar y comprobar tu escaparate
Al mover un control, aparece una barra de guardado. Haz clic en Guardar, o en Descartar para volver a los últimos valores guardados.
Espera al mensaje Cambios guardados. Si en su lugar aparece un mensaje de error, como Too many requests, tus cambios no se han guardado: la barra de guardado sigue abierta, así que espera un momento y vuelve a hacer clic en Guardar.
Abre o recarga una página de producto de tu escaparate para ver las nuevas esquinas. El avatar, la Burbuja de conversación y el Botón de añadir al carrito solo aparecen en el panel de chat. Haz una pregunta en el widget para abrirlo y comprobarlos.
Si no puedes hacer clic en Guardar, busca en la pestaña Estilo un campo de color que muestre Formato esperado: #rrggbb y corrígelo primero.
No hay ningún botón para restablecer. Para volver a los valores predeterminados, mueve cada control al valor predeterminado de la tabla anterior y guarda.
Si tu escaparate sigue mostrando las formas anteriores, consulta Mis cambios de Apariencia no se ven en la tienda online.
Lo que no cubren los controles
Ajustes del bloque en el editor de temas: el bloque Olvio — Product page del editor de temas de Shopify solo puede sobrescribir los colores y el tamaño de fuente. El radio de las esquinas siempre viene de Apariencia.
Otras formas: para cambiar una forma que no tiene control deslizante, como el botón de enviar, usa CSS personalizado. Consulta Añadir CSS personalizado al widget.