ℹ️ 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 se ve el Bar de Upsell de Envío gratuito y se siente a través de su tienda. De colores y espaciamiento a la tipografía, animaciones, botones y tarjetas upsell, casi todos los aspectos visuales se pueden personalizar para que coincida con su marca.

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

• lanzamiento rápido usando plantillas listas
• O personalizar profundamente cada detalle para que coincida perfectamente con su escaparate

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

• A Color Picker
• A Hex Code Input

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 configuración de Upsell de envío libre existente
→ O crear una nueva configuración primero

Entonces:

• Para el Basado en la colocación flujo de trabajo

→ Abrir el Diseño pestaña

• Para el Sobre la base de los objetivos flujo de trabajo

→ Abrir la ficha de colocación que desea personalizar

ℹ️ Los ajustes de estilo se acceden de forma diferente dependiendo del tipo de flujo de trabajo que se utilice.

🎨 Plantilla

• Lo que hace: Le permite aplicar al instante un estilo visual prehecho a su Bar de Upsell de Envío gratuito.
• Cómo utilizar: Elija entre las plantillas disponibles para iniciar rápidamente su diseño sin personalizar manualmente cada configuración.

👀 Visibilidad

• Lo que hace: Controles donde aparece el Bar de Upsell de Envío gratuito.
• Opciones:
• • Escritorio y móvil – Visible en todos los dispositivos.
  • Solo para escritorio
  • Solo móvil

📏 Bar Width

• Lo que hace: Controla cuánto ancho horizontal debe ocupar la barra de envío gratuita.
• Cómo utilizar: Aumente o disminuya el porcentaje de ancho dependiendo de lo compacto o ancho que desee que aparezca la sección.

🖼️ Estilo de fondo

• Lo que hace: Cambia la apariencia de fondo de la Bar de Upsell de Envío gratuito.
• Opciones disponibles:
• • Color individual – Aplicar un color de fondo sólido.
  • Gradiente – Dos colores juntos suavemente.
  • Patrones – Aplicar patrones de fondo decorativos.

🎨 Color individual

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

🌈 Gradiente

• Grado en Angle Grado: Controla la dirección del efecto gradiente.
• Color Picker 1 & 2: Seleccione los dos colores utilizados en el gradiente.

✨ Patrones

• Permite a los Seleccione Patrón opción donde puede elegir entre una variedad de patrones de fondo incorporados.

📐 Fronteras & Corners

• Radius fronterizo (px): Controla cómo aparecen las esquinas de la sección.
• Tamaño de la frontera (px): Ajusta el espesor de la frontera.
• Color de la frontera: Cambia el color de la frontera usando el selector de color o la entrada de hex.

📏 Spacing

Esta sección le ayuda a controlar el espaciamiento tanto dentro como fuera de la barra de Upsell de Envío gratuito.

• Parte superior / átomo: Añade espaciado fuera de la sección para separarlo de elementos circundantes.
• Parte superior / átomo: Añade espaciamiento interno entre el contenido y los bordes de la sección.

Esto es lo que el espaciamiento exterior/interior significa:

🎆 Añadir Fuegos artificiales Animación

• Lo que hace: Añade un efecto sutil de animación de fuegos artificiales cuando se logran objetivos.
• Opciones:
• • Mostrar fuegos artificiales en logro de cada objetivo.
  • Mostrar fuegos artificiales sólo en la meta final.

🔤 Tipografía

Esta sección controla cómo aparecen todos los elementos de texto a través de la barra de Upsell de Envío gratuito.

📝 Mensaje Styling

• Tamaño del mensaje: Ajuste el tamaño del texto principal del mensaje.
• Color del mensaje: Cambia el color del mensaje mostrado arriba de la barra de progreso.

🎉 Color de mensaje de Objetivo

• Cambia el color del mensaje de éxito mostrado después de que se alcance una meta.

🔠 Fuente

• Elija entre las fuentes disponibles o seleccione Usa tu fuente de tema para que coincida con su tema de la tienda automáticamente.

💪 Peso de la fuente

• Controla lo audaz o ligera que aparece el texto.
• También puede seleccionar Inhered para seguir el peso de fuente existente de su tema.

💰 Texto del precio

Personalizar cómo aparece la cantidad de precio dentro del mensaje.

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

✨ Texto del precio Animación

• Añade efectos de animación al texto del precio para ayudarle a destacar más.

📊 Progress Bar

Esta sección le permite personalizar la apariencia y el comportamiento de la barra de progreso.

👁️ Show Progress Bar

• Toggle the progress bar visibility on or off.

🎨 Color de fondo

• Cambia el color de fondo de la barra de progreso sin rellenar.

🟩 Color de relleno

• Controla el color de la sección de progreso llenado.

🎯 Marcador de objetivos múltiples

Elija cómo se muestran múltiples metas dentro de la barra de progreso.

• Mostrar sólo un objetivo a la vez – Reinicie el bar después de alcanzar un objetivo para centrarse en el siguiente.
• Mostrar todas las metas a la vez – Muestra todos los hitos de meta juntos dentro de la misma barra.

Ejemplo:

📦 Bar estilo

• Seleccione de estilos visuales disponibles para la barra de progreso.

📐 Width

• Controla el ancho de la barra de progreso misma.

⭕ Corner Radius

• Ajusta lo redondeado que aparecen las barras de progreso.

📏 Altura

• Controla el espesor/altura de la barra de progreso.

Espacio arriba / abajo

• Ajusta el espaciado por encima y por debajo de la barra de progreso.

🔘 Button Design

Esta sección personaliza el botón CTA mostrado junto al mensaje de envío gratuito.

Nota: Esta sección sólo se aplica cuando Button se selecciona como Call to Action Type en la ficha Goal.

🎨 Button Color

• Cambia el color de fondo del botón CTA.

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

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

⭕ Corner Radius

• Ajusta lo redondeado que aparecen las esquinas del botón.

📦 Button Style

• Cambiar rápidamente entre estilos como:
• • Plaza
  • Redonda
  • Fully Rounded

💪 Peso de la fuente

• Controla el espesor del texto del botón.

✍️ Estilo de fuente

• Toggle between:
• • Normal
  • Italic
  • Subsidio

✨ Button Animation Style

• Añade efectos de animación continuos al botón.

🖱️ Button Hover Effects

• Añade efectos interactivos cuando los usuarios saltan sobre el botón.

🛍️ Upsell Design

Esta sección personaliza la apariencia de la sección Upsell.

Nota: Esta sección sólo se aplica cuando una opción Upsell no sea No Upsell se selecciona en la pestaña Upsell/Placement.

🔤 Tipografía

🏷️ Upsell Title

• Tamaño del título: Controla el tamaño de la partida Upsell.
• Título Color: Cambia el color de la partida Upsell.

📦 Título del producto

• Tamaño del Título del Producto: Controla el tamaño del nombre del producto.
• Título del producto Color: Cambia el color del título del producto.

💰 Precio Styling

• 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 Styling

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

🔘 Add to Cart Button Styling

• Color de botón: Cambia el color de fondo del botón.
• Tamaño del texto del botón > Color: Controla la apariencia de texto.
• Corner Radius: Ajuste la redondez del botón.
• Button Style: Seleccione desde los estilos de botones disponibles.
• Peso de fuente: Controla el espesor del texto.
• Estilo de fuente: Retrocede entre diferentes estilos de texto.

💻 CSS personalizado (para desarrolladores)

💡Característica avanzada: Si desea añadir un estilo completamente único que no está disponible en la configuración estándar, puede pegar su CSS personalizado directamente en la caja del editor.

• Clases específicas proporcionadas:
• • Entire Badge Container: .futureblink-free-shipping
  • Mensaje de Progreso: .futureblink-free-shipping .futureblink-message
  • Icono sobre la barra de progreso: .futureblink-free-shipping .futureblink-icon
  • Call-to-Action Button: .futureblink-free-shipping .futureblink-cta-button
• Haga clic Aplicar para probar sus estilos inmediatamente.

'⚠️ Tenga en cuenta: Si los estilos no se aplican después de hacer clic en Aplicar, compruebe de nuevo añadiendo !important a cada declaración.

🎯 Ajustes de iconos

Añadir y personalizar un icono mostrado por encima de la barra de progreso.

🖼️ Seleccione / Eliminar Icon

• Abra la Biblioteca Icon para elegir un icono.
• Retire el icono seleccionado en cualquier momento.

📤 Subir Icon

• Cargue su propio icono personalizado para una flexibilidad completa.

📏 Tamaño del icono & Color

• Ajuste el tamaño del icono y cambie su color.

🚀 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:

✅ La barra de envío gratis se siente más alineada con la marca de su tienda
✅ Los mensajes importantes se vuelven más notables e interesantes
✅ El seguimiento del progreso se siente más limpio y fácil de entender
✅ Los botones CTA se vuelven más visualmente atractivos
✅ Las secciones Upsell se mezclan más naturalmente en el escaparate
✅ Los clientes experimentan una interfaz más pulida e interactiva
✅ Los comerciantes obtienen un mejor control sobre la apariencia general y la experiencia del usuario

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