ℹ️ 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 Upsell & Cross Sell widget se ve y se siente en tu escaparate. De los colores de fondo y espaciamiento a la tipografía y el estilo de botones — cada parte visual del widget se puede personalizar para que coincida con su marca.

Cada configuración de upsell (página producto, página del carro, cajón del carro, o posición personalizada) tiene su configuración de diseño independiente, por lo que puede estilo un widget de cajón del carrito de forma diferente de un widget de página de producto ✨

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

• A visual Color Picker
• A Hex Code entrada

Esto hace que sea fácil si prefieres elegir colores visualmente o pegar tus colores de marca exactos.

⚠️ Antes de empezar

Para configurar la configuración de diseño:

→ Abrir un ya existente Upsell & Cross Sell configuración → O crear una nueva configuración primero

Entonces abre el Diseño ficha en la parte superior de la página de configuración.

ℹ️ Los ajustes de diseño sólo cambian cómo el widget Mira.. Lo que dice el widget (títulos, texto del botón) se configura en la pestaña Contenido, y se puede traducir en Traducción.

👀 Vista previa en vivo

Mientras trabajas dentro de la pestaña Diseño, una vista previa en vivo se muestra junto a la configuración. Cada cambio que usted hace se refleja en la vista previa inmediatamente — ningún ahorro requerido para ver cómo se ven las cosas.

• Previsto de escritorio – Muestra cómo aparece el widget en las pantallas de escritorio.
• Vista previa móvil – Muestra el widget dentro de un marco de tamaño móvil, por lo que puede verificar la legibilidad en dispositivos más pequeños.

💡 La vista previa utiliza sus productos reales de upsell, título y texto de botón, por lo que lo que usted ve está muy cerca de lo que los clientes verán en su escaparate.

🖼️ Antecedentes

• Lo que hace: Controla la apariencia de fondo de la sección widget upsell.
• Opciones disponibles:
• • Color individual – Aplicar un color de fondo sólido.
  • Gradiente – Dos colores juntos suavemente.

🎨 Color individual

• Elija un color usando el Color Picker o introducir manualmente un Hex Code.

🌈 Gradiente

• Grado de ángulo gradual: Controla la dirección del gradiente (0-360°).
• Recinadores de color final: Seleccione los dos colores utilizados en el gradiente.

💡 Un gradiente sutil puede ayudar a la sección upsell destacar del resto de la página sin chocar con su tema.

📏 Spacing

Esta sección controla el espaciamiento tanto dentro como fuera del widget upsell.

• Parte superior / inferior: Añade espaciamiento interno entre el contenido del widget y los bordes de la sección.
• Parte superior / inferior: Añade espacio fuera de la sección para separarlo de elementos de la página circundante.

Todos los valores se establecen pixels (px).

💡 Uso Fuera. espaciamiento para crear sala de respiración entre el widget y elementos como el botón Add to Cart, y Dentro Espaciamiento para evitar que el contenido toque los bordes de la sección.

🔤 Tipografía

Esta sección controla cómo aparecen todos los elementos de texto dentro del widget upsell.

🏷️ Upsell Title

• Upsell Tamaño del título: Controla el tamaño de la sección de upsell (por ejemplo. “Frecuentemente comprados juntos”).
• Upsell Título color: Cambia el color del encabezado de la sección.

ℹ️ El texto del título de upsell se edita en el Índice tab, no aquí.

📦 Título del producto

• Tamaño del Título del Producto: Controla el tamaño de cada nombre de producto dentro del widget.
• Título del producto color: Cambia el color del título del producto.

💰 Precio

• Tamaño del precio: Controla el tamaño del texto del precio del producto.
• Color de precio: Cambia el color del precio del producto.

➡️ Arrow

• Tamaño de la flecha: Controla el tamaño de las flechas de navegación deslizante.
• Color de flecha: Cambia el color de la flecha.

ℹ️ Las flechas de navegación sólo aparecen cuando el widget contiene más de un producto para pasar.

🔘 Button

Esta sección personaliza el botón de llamada a la acción (por ejemplo. “Añadir al carro”) mostrado para cada producto.

🎨 Button Color

• Cambia el color de fondo del botón. El borde del botón usa automáticamente el mismo color.

🔤 Tamaño del texto del botón & Color

• Controla el tamaño y el color del texto dentro del botón.

⭕ Corner Radius & Button Style

• Radio de esquina: Establece lo redondeado que aparecen las esquinas del botón, en píxeles.
• Estilo de botón: Cambio rápido entre Plaza, Redonda, y Completamente redondeado.

ℹ️ Estos dos ajustes permanecen en sincronización automáticamente:

• Elegir un Estilo de botón aplica un radio de esquina coincidente.
• Escribiendo un Radio de esquina valor actualiza el estilo: los valores bajos se convierten Plaza, los valores medios se vuelven Redonda, y los valores altos se vuelven Completamente redondeado.

💪 Peso de la fuente

• Controla lo audaz o la luz que aparece el texto del botón.
• Seleccione Inhered para seguir el peso de la fuente existente de su tema, o elegir un peso específico desde 100 (nueve) a 900 (boldest).

✍️ Estilo de fuente

• Toggle between:
• • Normal
  • Italic
  • Subsidio

💾 Ahorro y publicación de su diseño

Los cambios de diseño no están vivos hasta que se guardan.

1. Haga sus cambios en el Diseño pestaña — las actualizaciones de la vista previa en vivo al instante.
2. Haga clic Guardar en la barra de ahorro en la parte superior de la página.
3. Asegúrese de que el upsell es Publicado así que el diseño actualizado aparece en su escaparate.

⚠️ Tenga en cuenta: Los valores de color introducidos como códigos hex se validan en guardar. Si un código hex es inválido (por ejemplo, falta el # o que contenga caracteres inválidos), el ahorro será bloqueado y un mensaje de error resaltará el campo que necesita fijar.

ℹ️ Si su diseño es guardado y publicado, pero el widget en sí no es visible en el escaparate, la causa suele estar relacionada con las incrustaciones de aplicaciones, la colocación o el destino — ver Upsell & Cross Sell no se muestra en mi tienda [Fixed].

🛍️ Cómo los cambios de diseño se reflejan en el escaparate

Cuando guardas una configuración publicada, la aplicación actualiza tu tienda automáticamente. El widget storefront lee sus configuraciones de diseño y los aplica en todas partes los renders widget:

• Antecedentes → Rellena la sección del widget con su único color o gradiente.
• Spacing → Aplica tu relleno interno y los márgenes externos alrededor del widget.
• Tipografía → Estilos el título de venta, títulos de producto, precios y flechas de navegación.
• Button → Estilos de cada producto Add to Cart botón, incluyendo el radio de esquina, el peso de la fuente, y estilo de fuente.

Debido a que cada tipo de configuración (página producto, página del carrito, cajón del carro, posición personalizada) almacena su propio diseño, cambiar una configuración nunca afecta la apariencia de los demás.

🚀 Resultado final

Una vez configurado con éxito, el Diseño y estilo configuración ayudan a los comerciantes a crear una experiencia comercial más atractiva, profesional y centrada en la conversión.

Con la personalización de estilo adecuado en el lugar:

✅ El widget upsell se siente alineado con la marca de su tienda
✅ Las recomendaciones de los productos se vuelven más notables e interesantes
✅ Precios y títulos de producto permanecen legibles tanto en escritorio como en móvil
✅ Los botones CTA se vuelven más visualmente atractivos
✅ Cada colocación puede llevar su propio aspecto y sentir
✅ Los clientes experimentan una interfaz más pulida 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: 15/09/2026