ℹ️ 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 función Custom CSS le permite personalizar aún más la apariencia del convertidor de moneda más allá de la configuración de diseño estándar.

Ya sea que desee ajustar colores, espaciado, fronteras, sombras o que coincida con el widget a una tienda muy personalizada, Custom CSS le ofrece flexibilidad adicional de estilo sin editar su Shopify archivos temáticos.

Esta guía camina a través de cómo añadir y gestionar de forma segura CSS personalizado para el convertidor de divisas.

⚠️ Antes de empezar

Antes de utilizar CSS personalizado, asegúrese de:

• Hoppy Currency Converter está instalado y activo
• La aplicación Embed está habilitada
• El proceso de a bordo se ha completado
• Tienes una idea clara de los cambios de estilo que te gustaría hacer

⚠️ CSS incorrecto puede afectar la apariencia del widget. Siempre prueba los cambios cuidadosamente antes de dejarlos vivir en tu escaparate.

✅ Paso 1: Abra los ajustes de CSS personalizados

Abrir el Hoppy Currency Converter aplicación de tu Shopify Admin.

Entonces:

→ Avances

→ Pergamino a la Configuración de expertos sección

→ Localizar el Custom CSS sobre el terreno

Aquí es donde deben añadirse todas las reglas de estilo personalizado.

✅ Paso 2: Comprender las clases CSS disponibles

Para personalizar el convertidor de divisas, necesitarás dirigir las clases CSS apropiadas.

Estas clases identifican diferentes partes del widget y le permiten modelarlas individualmente.

🖥️ Conversor de moneda de escritorio

.futureblink currency desktop

Uso para

• Colores de fondo
• Fronteras
• Sombras
• Padding
• Margins

Esta clase apunta al convertidor de divisas mostrado en dispositivos de escritorio.

📱 Conversor de moneda móvil

.futureblink currency mobile

Uso para

• Espaciamiento específico para móviles
• Movilización específica
• Ajustes de diseño móvil

Esta clase apunta al convertidor de divisas mostrado en dispositivos móviles.

📋 Reducción de la moneda

.futureblink-currency-dropdown

Uso para

• Estilismo desplegable
• Fronteras
• Radius fronterizo
• Sombras
• Colores de fondo

Esta clase controla la lista de monedas disponibles mostradas después de hacer clic en el convertidor.

🔘 Cambio de divisas

.currency-switcher

Uso para

• Button Styling
• Aparición de divisas seleccionada
• Fronteras
• Spacing

Esta clase controla el selector de divisas visibles que interactúan con los clientes.

📄 Opciones de eliminación

.opción

Uso para

• Renglones de moneda individuales
• Tamaño de la fuente
• Padding
• Efectos de la fiebre

Esta clase se dirige a cada opción de moneda dentro de la desplegable.

✅ Paso 3: Cree sus reglas de CSS

CSS utiliza una estructura simple:

selector {
propiedad: valor;
}

Estructura

• Selector → Lo que quieres estilo
• Propiedad → Lo que quieres cambiar
• Valor → La nueva apariencia

🎨 Ejemplo: Cambiar el color de fondo

.futureblink currency desktop {
color de fondo: #f8f9fa;
}

Esto cambia el color de fondo del convertidor de monedas de escritorio.

🔲 Ejemplo: Añadir Fronteras " Sombras

.futureblink currency desktop {
frontera: 1px solid #ddd;
frontera-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Esto crea una apariencia de estilo de tarjeta más limpia.

📋 Ejemplo: Estilo de la caída de la moneda

.futureblink-currency-dropdown {
frontera-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,15);
}

Esto añade esquinas redondeadas y una sombra más fuerte.

📱 Ejemplo: Ajuste el espacio móvil

.futureblink currency mobile {
padding: 12px 16px;
margen-top: 8px;
}

Esto aumenta el espaciamiento alrededor del widget móvil.

⚠️ Si los estilos no se aplican

A veces el estilo de widget predeterminado puede anular su CSS personalizado.

Si eso sucede, añadir:

¡Importante!

a la declaración CSS.

Ejemplo

.futureblink currency desktop {
color de fondo: blanco !importante;
border-radius: 10px !important;
}

💡 Uso !important se recomienda cuando un estilo personalizado no se está aplicando con éxito.

✅ Paso 4: Guarda tus cambios

Después de añadir su CSS:

→ Guardar

Los cambios de estilo se aplican inmediatamente al widget del convertidor de divisas.

✅ Paso 5: Prueba el Widget

Visita tu escaparate y verifica los cambios.

Asegúrese de probar:

• Dispositivos de escritorio
• Dispositivos móviles
• Comportamiento de caída de divisas
• Diferentes páginas de almacén

Esto ayuda a asegurar que el estilo funciona de forma consistente en su tienda.

🔍 ¿Necesita más clases de CSS?

Si desea personalizar partes adicionales del convertidor de divisas:

1. Abre tu tienda.
2. Haga clic derecho en el convertidor de divisas
3. Haga clic Inspección
4. Revisar la estructura HTML
5. Localizar nombres de clase adicionales

Estas clases se pueden utilizar dentro del campo de CSS personalizado.

⚠️ Notas importantes

Cambios Ir a vivir inmediatamente

No hay un modo de proyecto para CSS personalizado.

Cualquier cambio se hace visible en el escaparate tan pronto como los salvas.

CSS controla los ajustes de diseño

Si existe una regla de estilo en ambos:

• Configuración de diseño
• Custom CSS

La versión Custom CSS tendrá prioridad.

Escritorio & Móvil May Require Separar Styling

Los cambios realizados en las clases de escritorio no afectan automáticamente las clases móviles.

Para los mejores resultados, revise ambas versiones por separado.

Actualizaciones temáticas Mayo Afectar CSS personalizado

Mayor Shopify actualizaciones temáticas pueden cambiar la estructura de la tienda.

Si eso sucede, algunas reglas de CSS pueden necesitar ser ajustadas.

🎉 Resultado final

Una vez configurado con éxito:

✅ El convertidor de divisas coincide con su marca comercial

✅ Colores, espaciado y fronteras se pueden personalizar

✅ Diseños de escritorio y móviles pueden ser estilo independiente

✅ Personalizaciones visuales avanzadas se hacen posibles

✅ El estilo se puede ajustar sin editar Shopify Tema archivos

Utilizando Custom CSS le proporciona control adicional sobre la apariencia del convertidor de divisas y ayuda a crear una experiencia de escaparate más perfecta. 🎨

Actualizado el: 10/09/2026