Skip to content

Market components

International pricing and currency switching via Shopify Markets. Visitors see prices in their local currency, and checkout uses the correct locale.

FmMarketSelect

Country/market dropdown switcher. Selecting a market updates all prices, currency formatting, and checkout locale across the site.

  • Uses Shopify's geo-detection for the initial market selection
  • Persists the visitor's preference in localStorage

WARNING

FmMarketSelect requires Shopify Markets to be enabled on your store. If Markets is not configured, the component renders with only the default market.

FmMarketPicker

Market picker with an expanded display format. Use when you want more visual space for market selection than a simple dropdown.

FmMarketList

Lists all available markets. Nest custom layout inside — each child receives the market data for that row.

FmMarketLabel

Displays the active market name (e.g., "United States" or "Germany"). Use in navigation bars to show the visitor's current market.

FmMarketFlag

Displays a flag icon for the active market. Use alongside FmMarketLabel or FmMarketSelect for visual context.

Composition example

Frame (market switcher in navigation)
  ├── FmMarketFlag
  ├── FmMarketLabel
  └── FmMarketSelect

Or for a full market picker page:

Frame (market selection page)
  └── FmMarketList
      └── Frame (market row)
          ├── FmMarketFlag
          └── FmMarketLabel

Released under the MIT License.