¿Quieres un control total sobre el aspecto de tu barra de anuncios? 🎨

Aunque la configuración de diseño integrada cubre la mayoría de las necesidades de personalización, la función Custom CSS (CSS personalizado) te permite ajustar el estilo más allá de las opciones estándar.

Esto es útil para comerciantes que desean coincidir exactamente con las directrices de su marca, ajustar espaciados, personalizar la tipografía o resolver conflictos de estilo específicos del tema.

⚠️ Antes de comenzar

Antes de usar Custom CSS:

• Asegúrate de que tu barra de anuncios ya esté creada.
• Ten un conocimiento básico de CSS o acceso a un desarrollador.
• Entiende que Custom CSS puede anular la configuración de diseño estándar.

ℹ️ La mayoría de los comerciantes nunca necesitan Custom CSS. Úsalo solo cuando las opciones de diseño integradas no logren el aspecto deseado.

🛠️ Paso 1 — Abre la pestaña Design

Abre la app Hoppy Announcement Bar y navega a la barra de anuncios que quieres personalizar.

A continuación:

➡️ Haz clic en la pestaña Design (Diseño).

Desplázate hacia abajo hasta localizar la sección Custom CSS.

🎨 Paso 2 — Habilita Custom CSS

Dentro de la sección Custom CSS:

➡️ Haz clic en Apply (Aplicar).

Una vez habilitado, aparecerá un editor de CSS que contiene una estructura de CSS preconfigurada.

Esta estructura incluye todos los selectores compatibles, lo que facilita dirigirte a diferentes elementos de la barra de anuncios sin necesidad de identificar los nombres de clase manualmente.

✍️ Paso 3 — Agrega tu Custom CSS

El editor proporciona selectores listos para los elementos principales de la barra de anuncios.

Selectores disponibles

Selectores específicos para móvil

Para dirigirte específicamente a dispositivos móviles, usa la variación .mobile.

Ejemplos:

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

Ejemplo de CSS

Para poner el título en mayúsculas con espaciado adicional:

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Para que el botón de llamada a la acción ocupe todo el ancho en móvil:

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 Puedes usar cualquier propiedad CSS válida dentro de los selectores proporcionados.

👀 Paso 4 — Previsualiza tus cambios

Después de ingresar tu CSS:

➡️ Haz clic en Apply.

La vista previa en vivo se actualiza automáticamente para que puedas revisar tus cambios de inmediato.

Si necesitas ajustes:

➡️ Edita el CSS directamente en el editor.

➡️ Revisa la vista previa actualizada.

⚙️ Cómo funciona Custom CSS

La app aplica automáticamente un procesamiento adicional para ayudar a garantizar que tu estilo funcione correctamente.

Inyección automática de !important

Todas las declaraciones CSS reciben automáticamente prioridad !important en tu tienda para ayudar a evitar que los estilos del tema anulen tus cambios.

Manejo automático para móvil

Los selectores que usan la variación .mobile se envuelven automáticamente dentro de media queries para móviles cuando se renderizan en tu tienda.

Prioridad de anulación del diseño

Custom CSS generalmente tiene prioridad sobre la configuración de diseño estándar configurada en otras partes de la app.

💾 Paso 5 — Guarda y publica

Una vez que estés satisfecho con el estilo:

➡️ Haz clic en Save (Guardar).

➡️ Haz clic en Publish (Publicar).

⚠️ Solo guardar no actualiza tu tienda.

La configuración también debe publicarse antes de que los clientes puedan ver los cambios.

🔄 Restablecer Custom CSS

Si deseas volver a la configuración de diseño predeterminada:

➡️ Abre la sección Custom CSS.

➡️ Haz clic en Reset (Restablecer).

Esto elimina tu CSS personalizado y devuelve el control a la configuración de diseño estándar.

💡 Consejos útiles

Empieza poco a poco

Realiza un cambio a la vez para que sea más fácil identificar qué regla CSS afecta qué.

Usa la vista previa en vivo

Siempre revisa los cambios en la vista previa antes de publicar.

Prueba los diseños en móvil

Incluso si tu CSS se ve correcto en escritorio, verifica la apariencia en dispositivos móviles también.

Guarda una copia de seguridad

Para personalizaciones de CSS más extensas, considera mantener una copia de tu código fuera de la app.

❓ Solución de problemas

Si tu CSS no se aplica como esperas:

➡️ Verifica que Apply esté habilitado.

➡️ Confirma que la barra de anuncios se haya Saved (Guardado) y Published (Publicado).

➡️ Comprueba que los nombres de los selectores coincidan exactamente con los nombres de clase proporcionados.

➡️ Prueba en una ventana de incógnito para eliminar problemas de caché del navegador.

Para requisitos de estilo avanzados, considera trabajar con un desarrollador de Shopify o con el equipo de soporte de tu tema.

🎉 Resultado final

✅ Tu barra de anuncios usa un estilo completamente personalizado.

✅ Los conflictos con el tema se minimizan mediante el manejo automático de prioridad del CSS.

✅ Los diseños para móvil y escritorio se pueden estilizar de forma independiente.

✅ La barra de anuncios se puede adaptar para coincidir con la identidad visual de tu marca con mayor precisión.

Custom CSS proporciona la máxima flexibilidad cuando la configuración de diseño estándar no es suficiente, ayudando a crear una experiencia de tienda más pulida y coherente. 🚀

Actualizado el: 01/09/2026