ℹ️ 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 Position le permite colocar el Conversor de Moneda exactamente donde lo desea en su escaparate.

En lugar de utilizar las posiciones de flotación o encabezado predeterminadas, puede adjuntar el convertidor de moneda a un elemento específico dentro de su Shopify tema usando un selector CSS.

Esto le da mayor flexibilidad y ayuda al convertidor de divisas a mezclarse naturalmente en el diseño de su tienda. 🎯

⚠️ Antes de empezar

Antes de establecer una posición personalizada, asegúrese de:

• Hoppy Currency Converter está instalado y configurado
• La aplicación Embed está habilitada
• Se ha completado el embarque
• Sabes dónde quieres que aparezca el Conversor de Moneda

💡 Las ubicaciones comunes incluyen barras de navegación, cabeceras, barras laterales, menús de utilidad y secciones de tienda personalizadas.

✅ Paso 1: Configuración de pantalla abierta

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

Entonces:

→ Ir a Ajustes

→ Visualización

Localice cualquiera:

• Posición de escritorio
• Posición móvil

Puede configurar el posicionamiento personalizado por separado para dispositivos de escritorio y móviles.

✅ Paso 2: Seleccione la posición personalizada

Under Estilo de posición, verá las opciones de colocación disponibles.

Estilos de posición disponibles

Flotación

Muestra el Convertidor de Moneda como un widget flotante en el escaparate.

Header

Coloca el convertidor de moneda dentro del encabezado de la tienda.

Posición personalizada

Coloca el convertidor de moneda dentro de un elemento específico seleccionado por usted.

Seleccione:

→ Posición personalizada

Una vez seleccionados, los ajustes adicionales están disponibles automáticamente.

✅ Paso 3: Ingrese el elemento objetivo

Dentro del Elemento aduanero campo, introduzca el selector CSS del elemento donde debe aparecer el Conversor de Moneda.

Tipos de Selector compatibles

Selector de clase

Comienza con un período (.)

Ejemplo

.header-actions

Selector de identificación

Empieza con un hash (#)

Ejemplo

#currency-wrapper

Element Selector

Utiliza el nombre del elemento HTML directamente.

Ejemplo

header

🔍 Cómo encontrar un Selector

Si no estás seguro de qué selector utilizar:

1. Abre tu tienda.
2. Haga clic con el botón derecho en el área donde desea el convertidor de divisas.
3. Haga clic Inspección.
4. Localice el elemento HTML.
5. Haga clic derecho sobre el elemento.
6. Seleccione Copiar → Copiar selector.
7. Pegar el selector copiado en el Elemento aduanero campo.

Ejemplo

#block-template--166120#######__banner_bckcpm-video_CLEttT > div.media-with-text__content.rounded.text-custom > div > a

⚠️ Evite usar temporalmente Shopify- IDs generadas, ya que pueden cambiar después de actualizaciones temáticas.

Se recomienda utilizar nombres de clase estables siempre que sea posible.

✅ Paso 4: Elija el lugar de posición

Después de entrar en el selector, elija cómo debe insertarse el Conversor de Moneda en relación con ese elemento.

Opciones de colocación disponibles

Antes

Coloca el Conversor de Moneda inmediatamente antes del elemento seleccionado.

Ejemplo

Si apunta a un icono de carrito:

→ El convertidor de moneda aparece a la izquierda del icono del carrito.

Después

Coloca el convertidor de moneda inmediatamente después del elemento seleccionado.

Ejemplo

Si apunta a un logotipo:

→ El convertidor de moneda aparece a la derecha del logotipo.

Apéndice

Coloca el Conversor de Moneda dentro del elemento seleccionado, al final.

Ejemplo

Si se apunta a un contenedor de navegación:

→ El Conversor de Moneda aparece después de todos los elementos de navegación existentes.

💡 Esta es a menudo la mejor opción de inicio para la mayoría de los temas.

Prependientes

Coloca el Conversor de Moneda dentro del elemento seleccionado, al principio.

Ejemplo

Si se apunta a un contenedor de navegación:

→ El Conversor de Moneda aparece antes de todos los elementos de navegación existentes.

✅ Paso 5: Guarda tus cambios

Una vez configurado el selector y la opción de colocación:

→ Guardar

El Conversor de Moneda ahora intentará renderizar en la ubicación seleccionada.

✅ Paso 6: Verificar la colocación

Visita tu escaparate y confirma que el convertidor de divisas aparece en la ubicación deseada.

Si no aparece:

• Verificar el selector es correcto
• Confirmar el elemento existe en la página
• Pruebe una opción de colocación diferente
• Actualizar la página

💡 Un refresco duro es a menudo útil después de hacer cambios de colocación.

🛠️ Método alternativo: Colocación manual

Si el uso de un selector CSS no es adecuado para su tema, puede colocar manualmente el convertidor de divisas utilizando su fragmento de código.

Este método es útil cuando:

• Quiere un control completo sobre dónde aparece el Conversor de Moneda.
• Su tema no contiene un elemento adecuado para apuntar con Posición personalizada.
• Eres cómodo haciendo personalizaciones de tema menor.

Paso 1: Copiar el código del convertidor de divisas

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

Entonces:

→ Ir a Avances

Localizar:

→ Moneda convertidor de caja

Copia el fragmento de código proporcionado de nuestra aplicación o abajo:

<div class="futureblink-currency-box"></div>

Este es el snippet que colocarás donde quieras que aparezca el Conversor de Moneda.

Paso 2: Agregue el Snippet a su Tema

Opción A - Usar un bloque líquido personalizado

Desde Shopify Theme Editor:

→ Navegue a la sección donde desea que aparezca el convertidor de divisas.

→ Haga clic en ➕ Agregar bloque botón.

→ Buscar y añadir un Custom Liquid bloque.

→ Pruebe el código del convertidor de monedas en el bloque líquido personalizado.

→ Guardar.

Opción B — Editar archivos temáticos

Para la personalización avanzada del almacén, también puede añadir el mismo código snippet directamente a su Shopify archivos temáticos.

Ve a:

Tienda online → Temas

→ Haga clic en ⋯ menú al lado Editar tema

→ Seleccionar Editar código

Localizar el apropiado .liquid archivo para la sección donde desea que aparezca el Conversor de Moneda, luego pega el Código Conversor de Moneda Snippet en la ubicación deseada.

⚠️ Importante:

Este método está destinado a los comerciantes edición cómoda Shopify código temático. Recomendamos duplicar su tema antes de hacer cambios, ya que las modificaciones incorrectas pueden afectar su diseño de tienda o funcionalidad.

El selector debe existir en la página

Si el elemento seleccionado sólo existe en ciertas páginas, el Conversor de Moneda sólo aparecerá en esas páginas.

Utilizar encabezados globales o selectores de navegación generalmente proporciona los mejores resultados.

Elementos ocultos Ocultar el convertidor

Si el elemento seleccionado está oculto por el tema en ciertos dispositivos, el Conversor de Moneda también será oculto.

Siempre prueba diseños de escritorio y móviles.

Puedes cambiarte en cualquier momento

Si la posición personalizada ya no es necesaria:

→ Volver a Configuración de pantalla

→ Cambio Estilo de posición volver a:

• Flotación
• Header

No se requiere configuración adicional.

🎉 Resultado final

Una vez configurado con éxito:

✅ El convertidor de moneda aparece exactamente donde lo desea

✅ Diseños de escritorio y móviles pueden utilizar diferentes ubicaciones

✅ El widget se mezcla naturalmente en su diseño de escaparate

✅ Colocación se puede ajustar sin editar archivos temáticos

✅ Los comerciantes avanzados pueden colocar manualmente el convertidor usando archivos de Líquido Personalizado o Tema para el control completo

Utilizando Custom Position ayuda a crear una experiencia comercial más perfecta y profesional, manteniendo el convertidor de divisas fácilmente accesible a los compradores. 🎯

Actualizado el: 10/09/2026