Market Selector
Renders a market/region selector dropdown that syncs with Shopify markets and updates prices across the site.
What it does
Market Selector renders a market/region selector that lets shoppers choose their preferred market or region. It automatically fetches all active markets from Shopify via the Storefront API and displays them in a dropdown. When a market is selected, it writes the selected market (handle, currency, country code) into a shared active market store.
All market-aware pricing components (such as APVariantPrice, APCartSubtotal, and AP_CartItemsDisplay) listen to this shared store. When the active market changes, these components automatically re-fetch and re-render prices in the correct currency and format.
Canvas shows dummy market options so designers can work without a live Shopify connection.
How to set it up
- Add AP_MarketSelector to your global layout, typically in the site navigation or footer.
- No product ID or manual configuration of markets is required; the component fetches available markets from Shopify on mount.
- Use the exposed font, color, border, and background controls to style the dropdown so it matches your theme.
- The component persists the last selected market to localStorage, so the shopper’s choice is remembered across page navigations and reloads.
Key behaviours
- Fetches all active Shopify markets on mount via the Storefront API.
- Displays the markets in a dropdown, optionally showing a country flag emoji next to each market name.
- Writes the selected market (handle, currency, country code) to a shared active market store.
- All market-aware price components react automatically to store updates and refresh their data.
- Canvas uses dummy market options for design-time previews.
- Persists the last selected market to localStorage so the selection survives navigation and refresh.