> ## 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). # 🎨 Conversor de divisas – Diseño y estilo > ℹ️ **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 sección Design & Styling le da control completo sobre la apariencia del convertidor de divisas en su escaparate. Desde estilos de bandera y tipografía hasta colores, fronteras y preferencias de visualización, estos ajustes le ayudan a crear un convertidor de divisas que se siente como una parte natural de su tienda mientras mantiene una experiencia suave para los compradores internacionales. # **⚠️ Antes de empezar** Para acceder a la configuración de diseño y estilo: → Abierto **Hoppy Currency Converter** → Completar el proceso de a bordo → Abrir el **Diseño** pestaña 💡 Todos los cambios de diseño se vuelven visibles en el escaparate después de guardar. --- ## **🏳️ Personalización de la bandera** Esta sección controla cómo aparecen las banderas en todo el convertidor de divisas. Los cambios se aplican a ambos: * La pantalla de moneda seleccionada * La lista de divisas desplegadas --- ### **🎨 Estilo de bandera** Controla la apariencia visual de las banderas. #### **Tradicional** Muestra imágenes de bandera estándar sin estilo adicional. **Mejor para:** Tiendas mínimas y profesionales donde desea que las banderas se fusionen naturalmente en el diseño. --- #### **Moderno** Mostrar banderas con: * esquinas redondeadas * Sombras suaves * Fronteras supletorias * Tratamiento visual mejorado **Mejor para:** Tiendas modernas que quieren que el convertidor de divisas se destaque como un elemento de diseño premium. 💡 El estilo seleccionado se aplica a cada bandera mostrada por el Conversor de Moneda. --- ### **🔘 Bandera Tema** Controla la forma de las banderas. #### **Ronda** Las banderas aparecen con esquinas suavemente redondeadas. #### **Circle** Las banderas aparecen en forma circular. #### **Piso** Las banderas aparecen con esquinas afiladas y un aspecto tradicional. El tema seleccionado ayuda a determinar la personalidad visual general del widget. --- ## **🔘 Personalización de Selector de Moneda** Estas configuraciones controlan la apariencia del widget principal del Conversor de Moneda. --- ### **🎨 Tema** Controla el estilo visual general del contenedor de Conversor de Moneda. #### **Default** Una apariencia limpia y sencilla que se mezcla naturalmente en la mayoría Shopify Temas. #### **Capa moderna** Crea un efecto visual capa detrás del widget para mayor profundidad y énfasis. 💡 El efecto Modern Layer usa automáticamente el color de fondo seleccionado. --- ### **👀 Modo de visualización** Controla la información que aparece dentro del convertidor de divisas. #### **Mostrar bandera y moneda** Muestra tanto la bandera como la información de la moneda. #### **Mostrar sólo bandera** Muestra sólo banderas. #### **Mostrar sólo la moneda** Muestra sólo información de la moneda. Este ajuste se aplica tanto al selector como a la lista desplegable. --- ### **🌓 Tema de color** Controla si el convertidor de divisas utiliza una apariencia ligera o oscura. #### **Luz** Usa un fondo ligero con texto más oscuro. #### **Oscuro** Usa un fondo oscuro con texto más ligero. #### **Automático** Coincide automáticamente con la preferencia del sistema del comprador. 💡 El modo automático ayuda al convertidor de divisas a adaptarse naturalmente a diferentes dispositivos y entornos de navegación. --- ### **🔤 Mostrar sólo Códigos de moneda** Controla cómo aparecen los nombres de divisas. #### **Enabled** Muestra códigos de divisas cortos. Ejemplos: * USD * EUR * GBP #### **Discapacitados** Muestra nombres y códigos de moneda completos. Ejemplos: * Dólar estadounidense (USD) * Euro (EUR) * Libra británica (GBP) Esto puede ayudar a hacer que la caída más compacta al apoyar muchas monedas. --- ## **🎨 Personalización temática** Esta sección controla el estilo del convertidor de divisas. --- ### **📦 Estilo de frontera** Controla cómo se muestra la frontera widget. #### **Box Shadow** Añade una sombra sutil alrededor del convertidor de divisas. #### **Border Line** Añade una frontera visible alrededor del widget. #### **No hay frontera** Elimina completamente las fronteras y las sombras. Cada opción crea un énfasis visual diferente dependiendo de su estilo de tienda. --- ### **🔤 Fuente Familia** Controla la fuente utilizada en todo el convertidor de divisas. #### **Use Theme Font** Coincide con su Shopify tipografía temática automáticamente. #### **Google Fonts** Elija entre una variedad de fuentes compatibles. Por ejemplo: * Roboto * Open Sans * Montserrat * Poppins 💡 Usando tu fuente de tema normalmente crea la experiencia de escaparate más perfecta. --- ### **🎨 Color de fondo** Controla el color de fondo del convertidor de divisas. Puedes: * Use el selector de color * Introduzca un valor de color Hex Elija un color que complemente su escaparate mientras permanezca fácil de identificar. --- ### **🖊️ Color de texto** Controla el color del texto en todo el Conversor de Moneda. Esto incluye: * Moneda seleccionada * Opciones de eliminación * Etiquetas Para una mejor lectura, asegúrese de un contraste suficiente entre el texto y los colores de fondo. --- ### **🖱️ Mouseover Color** Controla el color mostrado cuando los clientes saltan sobre las opciones de divisas. Esto ayuda a los clientes a identificar claramente qué opción están a punto de seleccionar. Un contraste sutil del color de fondo suele funcionar mejor. --- ### **🔽 Color de icono desplegable** Controla el color del icono del indicador desplegable. Combinar este color con su color de texto a menudo crea la apariencia más consistente. --- ## **⚠️ Notas importantes** ### **El tema oscuro anula algunos colores** Al utilizar: * Tema oscuro * Automático Tema (mientras un comprador utiliza el modo oscuro) El convertidor de divisas puede utilizar colores optimizados de luna oscura en lugar de los colores seleccionados de fondo y texto. Para la personalización avanzada del modo oscuro, utilice CSS personalizado. --- ### **Tema de capas Color de fondo** El tema Modern Layer genera automáticamente su efecto capa utilizando el color de fondo seleccionado. Cambiar el color de fondo también cambia la apariencia de la capa. --- ### **Modo de visualización se aplica en todas partes** Visualización Los ajustes de modo afectan: * La pantalla de moneda seleccionada * Opciones de cambio Ambos lugares siempre permanecen sincronizados. --- ### **Apply Globally** La fuente seleccionada afecta a todo el texto del convertidor de monedas, incluyendo: * Moneda seleccionada * Opciones de eliminación * Resultados de búsqueda (cuando se aplica) --- ### **¿Necesita más personalización?** Para un estilo avanzado más allá de la pestaña Diseño, utilice: **Advanced → Custom CSS** Esto permite a los desarrolladores aplicar estilos totalmente personalizados al convertidor de divisas. --- # **🚀 Resultado final** Una vez configurado con éxito: ✅ El convertidor de divisas coincide con su marca comercial ✅ Pantalla de banderas en su estilo y forma preferidos ✅ Los colores y la tipografía se sienten consistentes con su tema ✅ La selección de divisas sigue siendo clara y fácil de utilizar ✅ Los compradores internacionales disfrutan de una experiencia más pulida ✅ El convertidor de divisas se siente como una parte natural de su escaparate Un convertidor de divisas bien diseñado no sólo se ve mejor; también ayuda a crear una experiencia comercial más suave y confiable para los clientes de todo el mundo. 🌍 ---