MarketButton
Wraps a designed button that sets a specific market as active when clicked, for building custom region switchers.
What it does
APMarketButton wraps a designed button that sets a specific market as active when clicked. Use it to build a custom region switcher with your own designed UI rather than the dropdown-style APMarketSelector.
When a user clicks the button, the configured market handle is written to the market store. Any market-aware price components on the page will automatically update to reflect the newly active market. The component also exposes a data-active attribute when its market is currently selected, which you can target in CSS to style the active state.
How to set it up
- Design your market button (for example, a flag plus country name) in your design tool.
- Connect that design to the Button slot of AP_MarketButton.
- Set Market Handle to the Shopify market handle that this button should activate (for example, gb, us).
- Place multiple instances of AP_MarketButton, one per market you want to surface in your custom region switcher.
Key behaviours
- Writes the configured market handle to the market store on click.
- All market-aware price components update automatically when the active market changes.
- Adds a data-active attribute when this button's market is the active one, which you can use for selected-state styling in CSS.