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

Actualizado el: 10/09/2026