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, and 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.