Personalizar los colores del widget
Puedes adaptar el widget Olvio a tu marca con siete colores. Se aplican al widget de tus páginas de producto y al panel de chat, incluido el panel de chat que se abre desde los enlaces de Olvio Advisor (planes Growth y Scale). Los ajustes de color en sí están disponibles en todos los planes.
Cambiar los colores del widget
Abre Apariencia en el menú de la app de Olvio.
Haz clic en la pestaña Estilo.
En la tarjeta Colores, cambia los colores que quieras. Están agrupados en Marca (Color de acento, Primer plano de acento), Superficies (Fondo, Superficie, Borde) y Texto (Texto, Texto atenuado).
Haz clic en Guardar en la barra de guardado que aparece en cuanto cambias algo. El mensaje Cambios guardados lo confirma.
Para elegir un color, haz clic en el cuadrado de color a la izquierda de un campo para abrir el selector de color de tu navegador, o escribe o pega un código hexadecimal en el campo. Los códigos deben usar el formato de seis dígitos #rrggbb, por ejemplo #7b3fe4. No se aceptan códigos cortos como #fff ni nombres de colores: el campo muestra Formato esperado: #rrggbb y no puedes guardar hasta que lo corrijas.
Para cancelar los cambios que no has guardado, haz clic en Descartar en la barra de guardado.
Qué cambia cada color
Color | Dónde aparece |
Color de acento | El Nombre del experto sobre la Pregunta gancho, los iconos de destello de las preguntas sugeridas en la página de producto, el botón de enviar, los mensajes del comprador, el avatar predeterminado, la zona detrás de un avatar subido con fondo transparente, el botón Añadir al carrito encima del campo de pregunta en el panel de chat de las páginas de producto, y los botones de añadir al carrito y las insignias de descuento de las tarjetas de producto. También dibuja el contorno de una pregunta sugerida al pasar el cursor y el del campo de pregunta mientras está seleccionado, y colorea los enlaces de las respuestas de la IA al pasar el cursor. |
Primer plano de acento | El texto y los iconos que se muestran sobre el color de acento: los mensajes del comprador, la flecha de enviar, el icono del avatar predeterminado, el texto de los botones de añadir al carrito en el panel de chat y en las tarjetas de producto, y las insignias de descuento. |
Fondo | El panel de chat, las preguntas sugeridas, el campo de pregunta (en la página de producto y en el panel de chat) y los selectores de variante y sus menús en las tarjetas de producto. En la página de producto, el resto del widget es transparente, así que el fondo de tu tema se ve detrás del Nombre del experto y de la Pregunta gancho, y alrededor de las sugerencias y del campo de pregunta. |
Superficie | Las respuestas de la IA, el indicador de escritura, el fondo detrás de las imágenes de producto en las tarjetas de producto, el resaltado cuando un comprador pasa el cursor sobre una pregunta sugerida o una opción de variante, y la opción seleccionada en un menú de variantes. |
Borde | El contorno de las preguntas sugeridas, del campo de pregunta, de los selectores de variante y de sus menús, y la línea bajo la cabecera del panel de chat. La línea fina que hay encima del campo de pregunta en el panel de chat no usa este color. |
Texto | La Pregunta gancho, las preguntas sugeridas, el texto que escriben los compradores, las respuestas de la IA, los nombres de producto en el panel de chat y en las tarjetas de producto, los selectores de variante y sus opciones en las tarjetas de producto, el nombre de tu tienda en la parte superior del panel de chat de Advisor, y el botón de cerrar y la flecha para cargar mensajes anteriores al pasar el cursor. |
Texto atenuado | El texto de ejemplo del campo de pregunta, los precios de los productos en el panel de chat y en las tarjetas de producto, la flecha desplegable de los selectores de variante y las opciones agotadas de los menús de variantes en las tarjetas de producto, los puntos del indicador de escritura, el botón de cerrar y la flecha para cargar mensajes anteriores (ambos cambian a Texto al pasar el cursor; la flecha también muestra su etiqueta Cargar mensajes anteriores), el aviso y la línea Con tecnología de Olvio al pie del panel de chat, y el fondo de la insignia Agotado en las tarjetas de producto. |
Los selectores de variante y los botones de añadir al carrito de las tarjetas de producto solo aparecen cuando Activar añadir al carrito en el chat está activado, en la pestaña Avanzado de la página Apariencia. Consulta Mostrar tarjetas de producto y permitir añadir al carrito desde el chat.
Olvio no ajusta el contraste de tus colores. Comprueba que el Primer plano de acento se lea bien sobre el Color de acento, que el Texto y el Texto atenuado se lean bien sobre el Fondo, que el Texto se lea bien sobre la Superficie y que el Fondo se lea bien sobre el Texto atenuado, que rellena la insignia Agotado. En las páginas de producto, el Nombre del experto (Color de acento) y la Pregunta gancho (Texto) aparecen directamente sobre el fondo de tu tema, así que comprueba que también se lean bien ahí.
Previsualizar tus colores
La Vista previa en vivo se actualiza mientras editas, antes de guardar. Usa los botones Página de producto y Panel de chat que hay encima para cambiar de vista. Superficie solo aparece en la vista Panel de chat. Mientras un código de color no sea válido, la vista previa muestra en su lugar el color predeterminado de Olvio.
La vista previa usa contenido de ejemplo y no incluye tu CSS personalizado ni los colores sustituidos en el editor de temas. En la vista Panel de chat, Borde también colorea la línea que hay encima del campo de pregunta; en tu escaparate, esa línea mantiene el mismo color tenue elijas lo que elijas. Después de guardar, revisa una página de producto en tu escaparate.
Ver los nuevos colores en tu escaparate
Cuando haces clic en Guardar, Olvio envía tus nuevos colores a tu escaparate. Vuelve a cargar una página de producto para verlos. Si siguen apareciendo los colores anteriores, consulta Mis cambios de Apariencia no se ven en la tienda online.
Sustituir los colores para una plantilla de producto
El bloque Olvio — Product page tiene sus propios ajustes de color, que aparecen cuando seleccionas el bloque en el editor de temas de Shopify. Use custom colors for this block: si la casilla está marcada, los colores Accent, Accent foreground, Background, Surface, Border, Text y Muted text del bloque sustituyen a los definidos en la página Apariencia. Haz clic en Guardar en el editor de temas.
La sustitución se aplica a todos los productos que usan la plantilla, y también al panel de chat que se abre desde ella, aunque la descripción del ajuste diga for this block only.
Los ajustes de color del bloque parten de los colores predeterminados de Olvio, no de los colores que definiste en la página Apariencia. Cuando actives la sustitución, define los siete.
Use custom colors for this block: para volver a los colores de la página Apariencia, desmarca esta casilla y guarda el tema.
Para ver la configuración completa del bloque, consulta Añade el widget Olvio a tus páginas de producto.
Colores predeterminados de Olvio
No hay ningún botón para restablecerlos. Para volver a la paleta predeterminada de Olvio, introduce estos códigos y haz clic en Guardar:
Color de acento:
#7b3fe4Primer plano de acento:
#ffffffFondo:
#ffffffSuperficie:
#f7f6ffBorde:
#e3e0f5Texto:
#0e0c1bTexto atenuado:
#6e6c8a
Ajustes relacionados
Fuente y tamaño del texto: Personalizar la fuente y el tamaño de fuente del widget
Esquinas redondeadas: Personalizar el radio de las esquinas del widget
Nombre del experto, pregunta gancho y avatar: Cambia el nombre del experto, la pregunta gancho y el avatar del widget
Todo lo que no cubren los siete colores: Añadir CSS personalizado al widget