> ## 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 configurar CSS personalizado para la barra de anuncios > ℹ️ **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 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** | Selector | Descripción | | ----- | ----- | | `.futureblink-announcement-bar` | Contenedor completo de la barra de anuncios | | `.futureblink-announcement-bar .title` | Texto del título principal | | `.futureblink-announcement-bar .subheading` | Texto del subtítulo | | `.futureblink-announcement-bar .cta-button` | Botón de llamada a la acción | | `.futureblink-announcement-bar .close-btn` | Icono de cierre | | `.futureblink-announcement-bar .arrow` | Flechas de navegación | | `.futureblink-announcement-bar .button-prev` | Botón de diapositiva anterior | | `.futureblink-announcement-bar .button-next` | Botón de diapositiva siguiente | ### **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. 🚀