> ## 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 establecer una posición personalizada para el convertidor de moneda > ℹ️ **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: `
` 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. 🎯