Personaliza el aspecto de cada elemento del widget

La sección Estilo del widget divide el widget de la página de producto en elementos individuales para que puedas aplicarles estilo por separado. Ábrela en el editor de paquetes y encontrarás varios paneles desplegables, uno por elemento, donde puedes controlar colores, fuentes, bordes, espaciado, insignias y mucho más.

Cómo funciona la sección Estilo del widget

Abre la pestaña Estilo del paquete y busca Estilo del widget. Haz clic en el encabezado de un panel para mostrar los controles de ese elemento. Al pasar el cursor sobre un encabezado, se resalta el elemento correspondiente en la vista previa. Algunos paneles solo aparecen cuando la función correspondiente está disponible en el paquete.

La mayoría de los paneles comparten los mismos componentes: un selector de color, un tamaño de fuente y un selector de estilo de fuente. Los paneles que aplican estilo a un cuadro, como la tarjeta de oferta o una insignia, también muestran el color de fondo, el color del borde, el ancho del borde y el radio de las esquinas. Tus cambios se guardan junto con el resto del paquete.

Los paneles, elemento por elemento

Encabezado

Controla el color del texto, el tamaño de fuente y el estilo de fuente del encabezado del widget. Introduce el texto del encabezado más arriba, en la pestaña Estilo, para mostrar Alineación del encabezado (Izquierda, Centro, Línea central atravesada o Derecha). Cuando la alineación se establece en Línea central atravesada, aparece en este panel un control adicional para el color y el grosor de la línea.

Tarjeta de oferta

Este es el cuadro que rodea cada oferta, es decir, cada nivel de cantidad. Es el panel más grande porque abarca tres estados visuales:

• Oferta no seleccionada: color de fondo, color del borde y ancho del borde para el estado predeterminado.
• Oferta al pasar el cursor: los mismos tres controles aplicados cuando el cliente pasa el cursor sobre la tarjeta.
• Oferta seleccionada: los mismos tres controles para la oferta seleccionada actualmente.

El panel también establece propiedades compartidas de las tarjetas: radio de las esquinas, espacio entre tarjetas, relleno horizontal y vertical, y una opción de Radio para mostrar u ocultar el botón de opción. El efecto de fondo animado se configura por separado con el interruptor Decoración, más arriba en la pestaña Estilo (Blobs, Anillos, Corazones, Explosión estelar, Porcentaje, Estrellas, Reloj o Dinero), y aparece únicamente en la oferta seleccionada. Los colores de la tarjeta de oferta también controlan la apariencia del botón de opción.

Título y subtítulo de la oferta

Dos paneles independientes, cada uno con un color, tamaño de fuente y estilo de fuente para la línea del título y la línea del subtítulo de la oferta.

Etiqueta de descuento

Da estilo a la etiqueta de descuento con un color de texto, color de fondo, tamaño de fuente y estilo de fuente. Ten en cuenta que estos ajustes también afectan a las insignias adicionales de los regalos.

Imagen de la oferta

Controla el tamaño de la imagen de la oferta, el radio de las esquinas, el color del borde, el ancho del borde y una Sombra (Ninguna, Pequeña, Mediana o Grande). También establece cómo se muestra la imagen:

• Original: conserva la proporción de aspecto nativa de la imagen.
• Cuadrada: recorta la imagen para convertirla en un cuadrado.
• Cuadrada (parte superior): recorta la imagen para convertirla en un cuadrado y conserva su parte superior.
• Cuadrada (ajustada): ajusta toda la imagen dentro de un cuadrado sin recortarla.

Insignia de cantidad

Da estilo al pequeño número de cantidad que puede aparecer sobre la imagen de la oferta. Puedes establecer su color de texto, color de fondo, radio de las esquinas, tamaño de fuente, estilo de fuente y Posición (Arriba a la derecha, Arriba a la izquierda, Abajo a la derecha o Abajo a la izquierda). Este número aparece sobre la imagen de la oferta cuando está activada la opción "Mostrar insignia de cantidad".

Etiqueta de variante

Establece el color, tamaño de fuente y estilo de fuente de los títulos de las opciones de variante (por ejemplo, Talla o Color) y sus números de fila.

Menú desplegable

Para los menús desplegables de variantes, usa el panel independiente Menú desplegable para ajustar el texto, el fondo, el borde, las esquinas y el relleno.

Insignia de oferta

La insignia es el texto destacado (como "Más popular") de una oferta. Además del color de texto, color de fondo, tamaño de fuente y estilo de fuente habituales, este panel ofrece un selector de Forma de la insignia con muchos ajustes preestablecidos:

• Predeterminada, Doblada, Pastilla
• Flecha derecha, Flecha izquierda
• Cuadrada
• Banner, Banner redondeado
• Cinta de esquina, Cinta lateral, Cinta lateral alternativa, Cinta lateral redondeada

Precio

El panel Precio agrupa tres estilos de texto, cada uno con su propio color, tamaño de fuente y estilo de fuente:

• Precio principal: el precio de venta activo.
• Precio comparativo: el precio "anterior" tachado.
• Texto por artículo: el texto del precio por unidad.

Paquete

Los paquetes de productos también tienen un panel Paquete para el texto del título del producto, el borde entre los artículos del paquete y el signo más entre los productos.

Beneficios

Da estilo a la lista de beneficios. Aquí estableces un tamaño de fuente y estilo de fuente compartidos, además de un Color del texto y un Color del icono independientes, para que los iconos y el texto puedan tener colores diferentes.

Regalo y upsell

Da estilo al bloque de regalos gratuitos en dos estados, cada uno con un color de fondo, color del título, tamaño de fuente y estilo de fuente:

• Regalo de la oferta seleccionada: el bloque de regalo de la oferta seleccionada.
• Regalo de una oferta no seleccionada: el bloque de regalo de las demás ofertas.

Un tercer grupo, Imagen del regalo, controla el ancho y el radio de las esquinas de la imagen del regalo.

Imágenes de regalos y ventanas emergentes de Mix & match

Abre Estilo > Estilo del modal > Modal de regalo y busca Ajuste de imagen. También puedes acceder a estos controles desde Personalizar estilo del modal junto a un selector de regalos o de Mix & match. Elige Original para conservar las proporciones completas de la foto o Cuadrada para obtener miniaturas uniformes. El ajuste se comparte entre las ventanas emergentes de selección de regalos y de grupos de productos dentro de este descuento; las imágenes del widget principal usan los controles independientes de Imagen de la oferta.

Pie de página

Establece el color, tamaño de fuente y estilo de fuente del texto del pie de página del widget.

Contenedor y ancho máximo

El panel Contenedor controla el ancho general del widget mediante un ajuste de Ancho máximo:

• Predeterminado de Shopify (44rem): limita el widget a 44rem dentro del espacio disponible.
• Ancho completo (100 %): permite que el widget se extienda hasta ocupar su contenedor.
• Personalizado: muestra un campo de Ancho donde introduces un valor en píxeles.

Este panel también incluye un Color de alerta que se usa para el texto de alerta de existencias bajas.

Usa aquí Margen superior y Margen inferior para ajustar el espacio alrededor del widget de este descuento antes de añadir CSS personalizado.

El ancho completo ocupa todo el contenedor principal del widget. No puede ampliar una columna estrecha de información del producto en tu tema.

Consejos de edición

• Observa la vista previa en directo mientras trabajas. Como al pasar el cursor sobre el encabezado de un panel se resalta el elemento correspondiente, puedes confirmar que estás editando la parte correcta antes de cambiar un valor.
• Da estilo conjuntamente a los tres estados de la tarjeta de oferta (no seleccionada, al pasar el cursor y seleccionada) para que el estado seleccionado destaque claramente del resto.
• Si necesitas estilos que los paneles no ofrecen, el panel CSS personalizado situado al final de la sección te permite añadir CSS para sobrescribir los estilos del widget.