> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Upsell & Cross Sell – Diseño y estilo > ℹ️ **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 ✨