Shopify Multi-Currency Snippet

A Liquid snippet for displaying prices in multiple currencies with automatic geo-detection. Built for stores selling internationally without Shopify Markets.

Stack: Shopify, Liquid, JavaScript, REST API
View code

Shopify Multi-Currency Snippet

A lightweight solution for showing prices in local currencies on Shopify stores. Built this for Tru Fragrance stores that needed multi-currency display before we fully migrated to Shopify Markets.

The Problem

Shopify’s native multi-currency requires Shopify Payments, which isn’t available everywhere. Many stores need to:

  • Show prices in visitor’s local currency
  • Convert based on live exchange rates
  • Keep checkout in store’s base currency

How It Works

1. Geo-Detection

Uses a free IP geolocation API to detect visitor’s country:

// Detect visitor country
const response = await fetch('https://ipapi.co/json/');
const { country_code, currency } = await response.json();

2. Exchange Rate Cache

Fetches daily rates from exchangerate-api.com and caches in localStorage:

// Cache rates for 24 hours
const CACHE_KEY = 'exchange_rates';
const CACHE_DURATION = 86400000; // 24 hours

3. Liquid Integration

Drop-in snippet that wraps existing price displays. The snippet adds a data-base-price attribute to price elements and uses Liquid’s money filter for formatting.

Installation

1. Add the Snippet

Copy multi-currency.liquid to your theme’s snippets/ folder.

2. Include in Theme

Add a Liquid render tag for multi-currency in your theme.liquid before the closing body tag.

3. Configure Currencies

Edit the snippet to set supported currencies:

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

Features

  • Automatic detection: Shows local currency on first visit
  • Currency selector: Optional dropdown for manual selection
  • Persistent preference: Remembers visitor’s choice
  • Fallback handling: Gracefully degrades if APIs fail
  • Performance: Lazy loads, caches aggressively

Customization

Styling the Selector

The dropdown has minimal default styling - customize via CSS class .currency-selector.

Adding Currencies

Add to the supported list and ensure the exchange rate API covers it.

Rounding Rules

Configure decimal places per currency:

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

Limitations

  • Prices shown are estimates (checkout uses store currency)
  • Requires JavaScript (shows base currency as fallback)
  • Free API has rate limits (1000 requests/month)

Production Notes

For high-traffic stores, consider:

  • Self-hosting exchange rates
  • Using a paid geolocation service
  • Implementing server-side detection

This snippet handles 10K+ monthly visitors without issues.

Created: August 2025 License: MIT Status: Production-tested