ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

La pestaña Diseño le da control completo sobre cómo su Hoppy Bundles ofrece aspecto y sensación en su escaparate. Desde fuentes y colores hasta fronteras, botones, puntos destacados y tarjetas de producto — casi todos los aspectos visuales de su oferta widgets se pueden personalizar para que coincida con su marca.

Hemos proporcionado una amplia gama de configuraciones para que usted pueda:

• lanzamiento rápido utilizando plantillas y temas listos para hacer
• O personalizar profundamente cada detalle para que coincida perfectamente con su escaparate

La mayoría de los ajustes relacionados con el color incluyen:

• Un Color Picker (haga clic en el color swatch para abrirlo)
• A Hex Code Input (tipo de su marca exacta directamente)

Esto hace más fácil si prefiere la selección visual o los colores exactos de la marca.

⚠️ Antes de empezar

Para configurar la configuración de diseño:

→ Abrir una oferta existente → O crear una nueva oferta primero

Entonces abre el Diseño ficha dentro del editor de ofertas.

La pestaña Diseño está disponible para todos los tipos de oferta en Hoppy Bundles:

• Bundle Oferta
• Cantidad ( Descuento de volumen)
• Construya su propio Bundle (BYOB)
• Complementos de producto
• Upsell Slider
• Categoría Cantidad

ℹ️ La pestaña Diseño se ve ligeramente diferente dependiendo del tipo de oferta: esta guía cubre cada sección y señala las diferencias a medida que vamos.

👀 Comprender la pestaña Diseño

📍 Donde vive

Abra cualquier oferta y verá pestañas en la parte superior del editor, para la mayoría de los tipos de oferta que son General, Diseño, y Objetivo " Colocación ". Haga clic Diseño para abrir la configuración de estilo.

• Para BYOB ofertas, las pestañas son General, Selección de productos Logic, y Diseño.

🖥️ Vista previa en vivo

Cada editor de ofertas incluye un panel de vista previa en vivo junto a la configuración, mostrando ambos un Previsto de escritorio y a Vista previa móvil. Al cambiar cualquier configuración de diseño — un color, una fuente, una frontera — la actualización de la vista previa al instante, así que siempre sabes exactamente cómo se verá tu widget antes de guardar.

ℹ️ La vista previa muestra sus cambios de estilo con productos de muestra. Verifique siempre el aspecto final de su tienda en vivo después de publicar.

🎨 Plantillas " Temas "

Cantidad Las ofertas de Break vienen con estilos visuales listos para hacer para que no tengas que diseñar desde cero.

🖼️ Oferta Plantillas

• Lo que hace: Cuando creas una nueva oferta de Break de Cantidad, comienzas por elegir una plantilla de oferta lista bajo Seleccione su oferta preferida. Cada plantilla viene con su propio diseño pre-estilo (colores, tamaños y estilos) que usted puede personalizar completamente después.
• plantillas disponibles:
• • Bundle & Save – aplica un nuevo verde tema de color.
  • Oferta de tiempo limitado – aplica un calor naranja tema de color.
  • ¡La locura de venta flash! – aplica audaz rosa tema de color.
  • ¡Sí! ¡Es BOGO! – aplica un vibrante violeta tema de color.
• Cómo utilizar: Seleccione una plantilla y haga clic Aplicar plantilla seleccionada. El diseño de la plantilla se carga en el editor, y se puede ajustar todo desde allí.

📐 Plantilla

• Lo que hace: Controla cómo se arreglan los niveles de cantidad dentro del widget.
• Opciones:
• • Vertical – Los niveles se apilan encima uno del otro.
  • Horizontal - Los zapatos se sientan lado a lado.

🎨 Elija un tema

• Lo que hace: Te permite cambiar todo el tema de color del widget en un clic.
• Opciones: Azul, _Rojo_o Verde.
• Nota: Esta opción sólo aparece cuando Vertical Se selecciona la plantilla.

⚠️ Elegir un tema reemplaza Todos de su configuración de diseño actual (colores, tamaños, estilos) con los valores predeterminados del tema. Si usted ha personalizado la configuración individual, aplique su tema primero y fino después.

🔤 Tipografía & Color

Esta es la tarjeta de diseño principal, disponible en la pestaña Diseño de cada tipo de oferta. Es collapsible — haga clic en la flecha en la esquina superior derecha para expandirla o colapsarla.

🔠 Fuente

• Lo que hace: Establece la familia de fuentes utilizada en todo el widget de la oferta.
• Cómo utilizar: Elija 60+ fuentes incorporadas — incluyendo clásicos como Helvetica, Arial, Georgia y Impacto, más popular Google Fonts como Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, y muchos más.
• Default: Seleccione Usa tu fuente de tema para heredar automáticamente la fuente del tema de su tienda — la manera más fácil de hacer la mezcla de widget con su escaparate.

ℹ️ Google Fonts se cargan automáticamente en el escaparate cuando se selecciona, sin necesidad de configuración manual.

📝 Estilo / Estilo / Color

Debajo del selector de fuentes, cada elemento de texto del widget obtiene su propio bloque de estilo. Cada bloque tiene tres opciones:

• Tamaño (px): Controla el tamaño de la fuente de ese elemento.
• Estilo: Controla el peso y el énfasis del texto. Opciones:
• • Luz
  • Recursos ordinarios
  • Italic
  • Mediana
  • Medium Italic
  • SemiBold
  • Bold
  • Bold Italic
• Color: Cambia el color de texto usando el selector de color o la entrada hex.

⚠️ El tamaño no puede ser superior a 20px — si entras en un valor mayor, verás un error de validación.

Los elementos disponibles dependen del tipo de oferta:

📦 Bundle Offer & Product Addons:

• Bundle Title – el encabezado principal del widget del paquete.
• Nombre del producto – los títulos de producto dentro del paquete.
• Precio del producto – el precio mostrado para cada producto.
• Tag Highlighted – el texto de la placa (por ejemplo "Combo") mostrado en productos destacados.
• Footer – el texto de pie en el fondo del widget.
• Precio total – el precio combinado del paquete.
• Button – el texto del botón "Añadir al carrito".

🏷️ Cantidad Break:

• Título del bloque – el encabezado principal por encima de los niveles.
• Oferta Título – el título de cada nivel (por ejemplo, "2 Par").
• Cambio de descuento – el texto de descuento en cada nivel (por ejemplo, "Comprar 2 Obtener 1").
• Precio – el precio rebajado.
• Comparar precio – el precio original alcanzado.
• Tag – el texto de la placa en un nivel (por ejemplo, "Más Popular").
• Subtítulo – el texto subtítulo en un nivel.
• etiqueta de regalo / precio de regalo / color de la etiqueta de regalo – el texto utilizado para artículos de regalo gratuitos (cuando se configura un regalo gratuito).
• Footer – el texto de pie debajo de los niveles.
• Tag Highlighted – el texto destacado de la placa.
• Button – el texto del botón.
• Precio total – la pantalla de precio total.

🧺 Construya su propio Bundle (BYOB):

• Título del bloque – el encabezado de la página del paquete.
• Descripción – el texto de descripción bajo el epígrafe.
• Oferta Título – los nombres de los productos en el paquete.
• Precio – los precios del producto.
• Texto de barra pegajosa – el mensaje de progreso en la barra pegajosa (por ejemplo, "necesita al menos 3 de este grupo").
• Button – el texto principal del botón "Añadir al carrito".
• Botón de producto – el botón "Añadir" en cada tarjeta de producto.
• Precio total – el paquete de ejecución total.

🛍️ Upsell Slider:

• Título del bloque – el encabezado deslizante (por ejemplo, "Frequently comprar juntos").
• Título del producto – los nombres de los productos en el deslizador.
• Precio – los precios del producto.
• Button – el texto del botón "Añadir al carrito".

🗂️ Categoría Cantidad Break:

• Mismos elementos de texto como Break (Block Title, Offer Title, Discount Label, Price, Tag, Subtitle, Footer, Button, Total Price), sin las opciones de estilo de regalo y comparación de precios.

🌈 Widget Colores (Quantity Break " Category Quantity Break)

Esta sección controla el fondo y resalta los colores de las barras de nivel. Cada opción es un solo selector de color con una entrada de hex.

• Color de frontera: El color fronterizo del tier actualmente seleccionado - hace destacar la opción activa.
• Color de fondo: El color de fondo del tier seleccionado.
• Bar no seleccionado: El color de fondo de todos los niveles no seleccionados.
• Color de fondo de etiqueta: El fondo detrás de la etiqueta de descuento en cada nivel.
• Tag background color: El fondo de la placa de la etiqueta (por ejemplo, "Más Popular").
• Color de fondo de regalo: El fondo de las filas de regalo gratis (Quantity Break sólo).
• Color de fondo de la etiqueta regalo: El fondo de la etiqueta de regalo gratuita (Quantity Break sólo).

💡 Sugerencia: Utilice un contraste sutil entre los fondos de barra seleccionados y no seleccionados — ayuda a los compradores a ver al instante qué nivel han elegido.

📏 Tamaño variable (Romper de cuantidad)

• Lo que hace: Controla el tamaño del selector de variante que se muestra en cada nivel cuando el producto tiene variantes.
• Opciones: Pequeña, _Mediana_o Grande - simplemente haga clic en una placa para seleccionarla.

📐 Frontera

Disponible en la pestaña Diseño de cada tipo de oferta.

• Ancho fronterizo (0-10px): Ajusta el grosor de la frontera alrededor del widget (y las barras del tier para la ruptura de la cantidad). Ponlo a 0 para una mirada plana sin fronteras.
• Radius fronterizo (0-50px): Controla cómo aparecen las esquinas redondeadas. Los valores inferiores dan un aspecto afilado y moderno; los valores superiores dan un aspecto suave y redondeado.

🖌️ Antecedentes " Colores fronterizos " (Cardos, Footer, Etiquetas " Buttons)

Disponible para Bundle Oferta, Complementos de producto, Upsell Slider, y BYOBEstos bloques te permiten establecer ambos Color de la frontera y a Color de fondo para bloques visuales clave del widget.

📦 Bundle Offer & Product Addons:

• Producto – las tarjetas de producto dentro del paquete.
• Footer – el área de pie en el fondo del widget.
• Tag Highlighted – la placa destacada.
• Button – el botón "Añadir al carrito".

🛍️ Upsell Slider:

• Producto – las tarjetas de producto en el deslizador.
• Button – el botón "Añadir al carrito".

🧺 BYOB:

• Button – el botón principal "Añadir al carrito".
• Botón de producto – el botón "Añadir" en cada tarjeta de producto.

💡 Sugerencia: Para botones, configure el Color de fondo al color primario de su marca y coincida con el Color de la frontera para un botón limpio y sólido.

⚙️ Toggles de apariencia (Romper de cuantidad – Tab general)

Unas pocas opciones visuales para Cantidad Break en vivo en el General pestaña debajo Ajustes → Apariencia y apariencia en lugar de la pestaña Diseño:

• Mostrar precio unitario: Muestra el precio por unidad dentro de cada nivel, por lo que los clientes pueden ver exactamente lo que cada artículo cuesta.
• Mostrar precio total: Muestra el precio total para cada nivel.
• Ocultar las líneas de cabecera y de pie: Elimina las líneas de divider en la parte superior e inferior del widget para un aspecto más limpio y mínimo.

ℹ️ BYOB ofrece también un Plantilla opción en la pestaña General (Shelf Pick o Dividir) que cambia el diseño general de la página del paquete.

📌 Notas importantes

• ⚠️ Los temas sobrescriben estilo personalizado. Aplicar una plantilla o cambiar temas (Quantity Break) reajusta los ajustes de diseño a los presets del tema. Siempre aplicar temas primero, luego personalizar.
• ⚠️ Límite de tamaño de texto. Los elementos de texto individuales no pueden exceder 20px: los valores más grandes desencadenan un error de validación.
• ℹ️ Font aplica widget-wide. El ajuste de fuente afecta todo el texto en el widget; utilice el ajuste de estilo per-element (Bold, Italic, etc.) para enfatizar elementos específicos.
• ℹ️ Theme font es la opción más segura. "Use su fuente de tema" garantiza que el widget coincida con su tipografía de escaparate con cero esfuerzo.
• ℹ️ Los ajustes de diseño son per-oferta. Cada oferta tiene su propio diseño independiente: el estilo de una oferta nunca afecta a sus otras ofertas.
• ℹ️ Vista previa vs. storefront. La vista previa en vivo utiliza datos de muestra. Después de guardar y publicar, compruebe la oferta en una página de producto real para confirmar el espaciado y las fuentes se ven directamente dentro de su tema.

💡 Ejemplos " Casos de uso "

• Coincide con su marca exactamente: Introduzca los códigos hex de su marca en los colores Button, Block Title y Highlight, y luego configure la fuente al partido más cercano a su fuente de tema.
• Hacer el mejor pop de nivel (Quantity Break): Dele a su "Más Popular" un estilo de etiqueta audaz, un color de fondo de etiqueta contrastante, y un color de frontera fuerte para que los ojos de los compradores vayan directamente a él.
• Limpio aspecto mínimo: Establecer la Ancho Fronterizo a 0, ocultar las líneas header/footer, y utilizar "Use su fuente de tema" para un widget que parece nativo de su tema.
• Botones de alto contraste: Dark Button background + White Button text + matching Border color = un botón que se hace clic.
• Vibo suave y amistoso: Bump Border Radius up (20–50px) y elegir un color de fondo pastel para el nivel seleccionado.

🚀 Resultado final

Una vez configurado con éxito, el Diseño y estilo los ajustes le ayudan a crear ofertas que se parecen a una parte natural de su tienda, no un widget atornillado.

Con el estilo adecuado en su lugar:

✅ Oferta widgets se sienten completamente alineados con la marca de su tienda ✅ Los niveles de descuento y los ahorros de paquetes se vuelven más fáciles de escanear y entender ✅ Los botones de más valor y CTA destacan visualmente ✅ Regalos gratis y etiquetas destacadas llamar la atención del comprador ✅ Ofrece aspecto pulido y consistente en escritorio y móvil ✅ Los clientes disfrutan de una experiencia comercial más suave y confiable

Utilizando estas opciones de diseño y estilo de manera eficaz puede mejorar enormemente el compromiso de los clientes, presentación de tienda y potencial de conversión general ✨

Actualizado el: 10/09/2026