Cómo hacer coincidir el widget con los colores de tu tema

Bundlex puede adaptar el widget de tu paquete al aspecto de tu tienda con unos pocos clics. El panel de preajustes de color del widget lee las combinaciones de colores de tu tema de Shopify y sugiere combinaciones listas para usar, para que tus ofertas parezcan una parte nativa de la página en lugar de un elemento añadido.

Dónde encontrar los preajustes de color

Abre un paquete en el editor y ve a la pestaña Estilo. El panel de preajustes de color del widget se encuentra encima de los controles detallados de Estilo del widget. Usa los preajustes para configurarlo todo de una vez y, si quieres, ajusta después los colores de cada elemento en la sección Estilo del widget.

Elige un color principal

La fila de Color principal es el punto de partida de toda la paleta. Tienes cuatro formas de configurarlo:

• Muestras sugeridas: las muestras de color se obtienen directamente de las combinaciones de colores de tu tema de Shopify, como colores de botones, texto y fondos. Haz clic en una para aplicarla.
• Colores predeterminados: la muestra gris oscuro que aparece después de las muestras de tu tema restaura los colores predeterminados blanco y negro del widget.
• Color personalizado: haz clic en la muestra con el icono de más para abrir un selector de color y elegir cualquier valor hexadecimal. Pulsa Intro después de escribir el valor hexadecimal y comprueba que la vista previa cambie.
• Color aleatorio: haz clic en la muestra de actualización para generar un color aleatorio si solo quieres explorar opciones.

Elijas el que elijas, Bundlex reconstruye al instante el resto de los colores del widget a partir de él y aplica el resultado a la vista previa en directo.

Elige un color de acento, o secundario

El color secundario es el acento utilizado para las insignias, los estados activos y los elementos destacados. Bundlex lo genera automáticamente para armonizarlo con tu color principal y ofrece varias opciones de armonía como muestras entre las que puedes elegir.

Si prefieres configurar el acento por tu cuenta, tienes las mismas dos opciones de personalización que en la fila principal:

• Color de acento personalizado: la muestra con el signo más abre un selector para introducir un valor hexadecimal exacto.
• Color de armonía aleatorio: la muestra de actualización elige un color contrastante de la rueda de colores que sigue funcionando con tu color principal.

Interruptor de ofertas transparentes

Junto al color principal encontrarás un interruptor Transparente que controla el fondo de las tarjetas de oferta no seleccionadas:

• Desactivado: los fondos de las ofertas no seleccionadas tienen un color sólido, un tono claro de tus colores cuando proviene de un preajuste, para que cada nivel se perciba como su propia tarjeta.
• Activado: los fondos de las ofertas no seleccionadas permanecen transparentes para lograr un aspecto más limpio y plano que se integre con la página.

Cambiar el interruptor modifica únicamente la transparencia del fondo de la oferta no seleccionada. Los fondos de las ofertas seleccionadas y al pasar el cursor, así como los colores del texto, la insignia y el borde, permanecen sin cambios. Al desactivarlo, el fondo vuelve a ser completamente opaco. Las muestras en las que hagas clic mientras está activado aplican la versión transparente de ese preajuste.

La sugerencia «Aplicar radio del borde»

Los colores no son lo único que Bundlex puede tomar de tu tema. Si detecta que el radio de las esquinas de tu tema difiere del de las esquinas actuales del widget, aparece un banner de Aplicar radio de las esquinas con la nota «Haz coincidir las esquinas del widget con tu tema».

1. Haz clic en Aplicar en el banner para aplicar el radio de las esquinas de tu tema a las tarjetas de oferta, las imágenes de oferta y las imágenes de venta cruzada del widget.
2. También puedes descartarlo con el icono de cierre si prefieres conservar las esquinas actuales.

La sugerencia puede no aparecer porque no se ha detectado ninguna diferencia, el tema no proporciona un radio utilizable o la has descartado. Aun así, puedes configurar las esquinas manualmente en Estilo del widget.

Ajusta elementos individuales

Después de elegir tu paleta, expande un elemento en Estilo del widget. Tarjeta de oferta te permite ajustar por separado el radio de las esquinas, el espaciado y los estados seleccionado, al pasar el cursor y no seleccionado. En este ejemplo, configuramos el radio de la tarjeta en 8 píxeles. Aplica primero los preajustes y realiza después estos ajustes finales, porque elegir otro preajuste puede reemplazar las selecciones de color individuales.

Guarda y comprueba tu tienda online

Haz clic en Guardar. Prueba un descuento activo en la página de producto correspondiente. Selecciona cada oferta, comprueba el contraste del texto y la insignia, elige las variantes y usa Añadir al carrito. Comprueba la página en ordenador y móvil, ya que la vista previa del editor no puede mostrar todos los fondos del tema ni todos los tamaños de pantalla.

Nuestro ejemplo conserva las mismas reglas de descuentos por cantidad: dos bolsas Marfil pequeñas tienen un subtotal de mercancía de $43.20 después de aplicar un 10 % de descuento. El estilo cambia la presentación, no el cálculo del descuento. Comprueba el carrito y el checkout como parte de la revisión final.

Cómo se generan las sugerencias

Bundlex lee la configuración de color de tu tema y obtiene tonos que combinan. Las sugerencias derivadas del tema se repiten con la misma configuración del tema. Los controles Color aleatorio y Color de armonía aleatorio generan deliberadamente nuevas opciones.

Consejos

• Los preajustes son un punto de partida rápido. Después de aplicar uno, todavía puedes ajustar el color de cualquier elemento individual en Estilo del widget.
• Si no aparecen muestras sugeridas, Bundlex no ha podido leer los valores de color de tu tema activo. Aun así, puedes usar las opciones personalizada y aleatoria.
• Usa la vista previa en directo para comprobar el contraste, especialmente con el interruptor Transparente activado, para que las insignias y el texto sigan siendo legibles sobre el fondo de tu página.