ℹ️ 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. ✨

Actualizado el: 10/09/2026