> ## 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). # 🎨 Cómo establecer CSS personalizado para el envío libre Upsell Bars > ℹ️ **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. ¿Quieres tu Bar de Envío gratuito para que coincida perfectamente con el branding de tu tienda? 🎨 Mientras que la pestaña Diseño incluye extensos controles de estilo, **Custom CSS** proporciona flexibilidad adicional para la personalización visual avanzada. Ya sea que esté ajustando la tipografía, refinando el espaciamiento, añadiendo animaciones, creando diseños específicos para móviles, o resolviendo conflictos de estilo temático específico, Custom CSS le da mayor control sobre cómo su Bar de Envío gratuito aparece en el escaparate. --- # **⚠️ Antes de empezar** Antes de utilizar CSS personalizado: * Asegúrese de que ya ha creado una configuración de Upsell de Envío gratuito. * Asegúrese de tener acceso a la **Diseño** tab. * Tener una comprensión básica de CSS o acceso a un desarrollador. ⚠️ **Importante:** CSS personalizado está disponible en todos los tipos de colocación soportados excepto **Página de inicio** colocaciones. Las colocaciones apoyadas incluyen: * Página * Página * Cart Drawer * Banner (Top y Bottom) --- # **🛠️ Paso 1 - Abra la pestaña de diseño** Abrir el **Hoppy Free Shipping** aplicación y navegar a la configuración de Free Shipping Upsell que desea personalizar. Entonces: ➡️ Haga clic en **Diseño** tab. Desplazarse hasta que encuentres **Custom CSS** sección. Esta sección se encuentra típicamente debajo de la configuración Typography, Progress Bar, Button y Upsell. --- # **🎨 Paso 2 - Abra el Editor de CSS personalizado** Dentro del **Custom CSS** sección que encontrará: * Un editor de CSS * A **View Guide** botón * An **Aplicar** botón * Una plantilla CSS de inicio La plantilla contiene selectores de uso común que se pueden personalizar sin necesidad de inspeccionar los elementos de la tienda manualmente. --- # **🎯 Paso 3 - Comprender los Selectores disponibles** La plantilla de arranque incluye varios selectores que apuntan a diferentes elementos de la barra de envío gratuita. ### **Selectores disponibles** Selector Descripción `.futureblink-free-shipping` Contenedor de bar de envío libre `.futureblink-message` Texto del mensaje de progreso `.futureblink-icon` Icon mostrado con el mensaje `.futureblink-cta-button` Botón de llamada a acción `.futureblink-price-text` Precio destacado o valor de progreso --- ### **Selectores móviles** Para el estilo móvil específico, utilice el `.mobile` variación. Selector Descripción `.futureblink-free-shipping.mobile .futureblink-message` Mensaje de progreso móvil `.futureblink-free-shipping.mobile .futureblink-icon` icono móvil `.futureblink-free-shipping.mobile .futureblink-cta-button` Botón móvil CTA `.futureblink-free-shipping.mobile .futureblink-price-text` Precio móvil/progreso texto 💡 Sólo necesita personalizar los selectores relevantes para sus requisitos de diseño. --- # **✍️ Paso 4 - Agregue su CSS personalizado** Introduzca sus reglas de CSS dentro del editor. ### **Ejemplo 1 - Personalizar el Mensaje de Progreso** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Ejemplo 2 - Personalizar el botón CTA** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Ejemplo 3 — Movil-Specific Styling** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Comience con pequeños cambios de estilo primero, luego amplíe su CSS según sea necesario. --- # **✅ Paso 5 - Aplica tu CSS** Después de entrar en su CSS: ➡️ Haga clic **Aplicar**. Las actualizaciones de la vista previa automáticamente para que pueda revisar inmediatamente los cambios de estilo. Si desea eliminar su estilo personalizado: ➡️ Haga clic **Reset**. Esto restaura la plantilla predeterminada y desactiva el CSS personalizado. --- # **👀 Paso 6 - Revisar la vista previa** Después de aplicar su CSS: ➡️ Revise la vista previa dentro de la aplicación. Verificar que: * El texto muestra correctamente. * Los botones aparecen como se esperaba. * Los iconos siguen alineados. * Colores y espaciamiento coinciden con su marca. Si se necesitan ajustes: ➡️ Actualice el CSS. ➡️ Haga clic **Aplicar** otra vez. La vista previa se actualiza automáticamente después de cada cambio. --- # **💾 Paso 7 - Guardar y publicar** Una vez satisfecho con el diseño: ➡️ Haga clic **Guardar**. ➡️ Haga clic **Publish**. ⚠️ Salvar solo no actualiza el escaparate. La configuración Free Shipping Upsell también debe publicarse antes de que los clientes puedan ver los cambios. --- # **⚠️ Notas importantes** ### **Manejo automático !importante** Cuando los estilos se hacen en el escaparate, la aplicación añade automáticamente `!important` prioridad a las declaraciones del CSS. Esto ayuda a asegurar que sus estilos personalizados tienen precedencia sobre estilo temático. --- ### **Si los estilos no están apareciendo** En casos raros donde los estilos temáticos siguen siendo dominantes, puede agregar manualmente `!important` dentro del editor. Ejemplo: .futureblink-free-shipping .futureblink-message { font-size: 18px !important; color: #ff6600 !importante; } --- ### **Manejo automático móvil** Cualquier selector usando el `.mobile` la variación se envuelve automáticamente dentro de una consulta de medios móviles cuando se hace en el escaparate. Usted no necesita crear manualmente puntos de ruptura sensibles para estos selectores. --- ### **Limitación de página de checkout** CSS personalizado no está disponible para la colocación de página de checkout porque Shopify restringe la inyección personalizada de CSS en entornos de Checkout. --- ### **CSS Validation** El editor no valida la sintaxis CSS. Si un estilo no se aplica correctamente: ➡️ Verifique los nombres de selector. ➡️ Comprueba los frenos y los semilons. ➡️ Revise el CSS para errores de sintaxis. --- # **❓ Solución de problemas** Si tus estilos no aparecen correctamente: ➡️ Confirmar que **Aplicar** ha sido pinchado. ➡️ Verificar la configuración ha sido **Guardado** y **Publicado**. ➡️ Compruebe que los nombres de selector coinciden exactamente con la plantilla proporcionada. ➡️ Prueba en una ventana Incognito o navegador privado. ➡️ Refresca el escaparate a los estilos de caché claros. --- # **🎉 Resultado final** ✅ Su Bar de Envío gratuito se puede personalizar más allá de la configuración de diseño estándar. ✅ Las experiencias de escritorio y móviles se pueden estilo independientemente. ✅ Tipografía personalizada, espaciamiento, colores y animaciones son totalmente compatibles. ✅ La barra de envío gratuita se puede alinear más estrechamente con la marca de su tienda. CSS personalizado proporciona flexibilidad adicional cuando los controles de diseño incorporados no son suficientes, ayudando a crear una experiencia de almacenamiento más pulida y consistente. ✨