Snippet Multi-Moneda para Shopify

Un snippet de Liquid para mostrar precios en múltiples monedas con detección geográfica automática. Construido para tiendas que venden internacionalmente sin Shopify Markets.

Stack: Shopify, Liquid, JavaScript, REST API
Ver código

Snippet Multi-Moneda para Shopify

Una solución ligera para mostrar precios en monedas locales en tiendas Shopify. Construí esto para las tiendas de Tru Fragrance que necesitaban mostrar múltiples monedas antes de migrar completamente a Shopify Markets.

El Problema

El multi-moneda nativo de Shopify requiere Shopify Payments, que no está disponible en todas partes. Muchas tiendas necesitan:

  • Mostrar precios en la moneda local del visitante
  • Convertir basándose en tasas de cambio en vivo
  • Mantener el checkout en la moneda base de la tienda

Cómo Funciona

1. Geo-Detección

Usa una API gratuita de geolocalización IP para detectar el país del visitante:

// Detectar país del visitante
const response = await fetch('https://ipapi.co/json/');
const { country_code, currency } = await response.json();

2. Caché de Tasas de Cambio

Obtiene tasas diarias de exchangerate-api.com y las guarda en localStorage:

// Cachear tasas por 24 horas
const CACHE_KEY = 'exchange_rates';
const CACHE_DURATION = 86400000; // 24 horas

3. Integración con Liquid

Snippet drop-in que envuelve los displays de precios existentes. El snippet agrega un atributo data-base-price a los elementos de precio y usa el filtro money de Liquid para formateo.

Instalación

1. Agregar el Snippet

Copia multi-currency.liquid a la carpeta snippets/ de tu tema.

2. Incluir en el Tema

Agrega una etiqueta render de Liquid para multi-currency en tu theme.liquid antes de cerrar el body.

3. Configurar Monedas

Edita el snippet para establecer las monedas soportadas:

const SUPPORTED_CURRENCIES = ['USD', 'EUR', 'GBP', 'CAD', 'AUD'];

Características

  • Detección automática: Muestra moneda local en la primera visita
  • Selector de moneda: Dropdown opcional para selección manual
  • Preferencia persistente: Recuerda la elección del visitante
  • Manejo de fallback: Degrada graciosamente si las APIs fallan
  • Rendimiento: Carga perezosa, cachea agresivamente

Personalización

Estilizar el Selector

El dropdown tiene estilos predeterminados mínimos - personaliza vía clase CSS .currency-selector.

Agregar Monedas

Agrega a la lista soportada y asegúrate de que la API de tasas de cambio la cubra.

Reglas de Redondeo

Configura decimales por moneda:

const DECIMALS = {
  USD: 2,
  JPY: 0,  // Yen no tiene decimales
  EUR: 2,
};

Limitaciones

  • Los precios mostrados son estimaciones (checkout usa moneda de la tienda)
  • Requiere JavaScript (muestra moneda base como fallback)
  • API gratuita tiene límites (1000 requests/mes)

Notas de Producción

Para tiendas de alto tráfico, considera:

  • Alojar tasas de cambio propias
  • Usar un servicio de geolocalización pago
  • Implementar detección del lado del servidor

Este snippet maneja 10K+ visitantes mensuales sin problemas.

Creado: Agosto 2025 Licencia: MIT Estado: Probado en producción