Market Toggle

A two-way market switch — shows one design per market and flips between them on click.

Last updated

August 14, 2026

How to use

Place this component where you want the switch — a header, a region-picker popup, anywhere a customer can flip between two markets.
Connect ⦿ Design A and set Market A to the country it represents.
Connect ⦿ Design B and set Market B to the country it represents.
Optionally style Padding, BG Blur, and Radius.

Both designs are required — if either ⦿ Design A or ⦿ Design B is missing, the published site shows an "Add Instance A and Instance B designs for the market toggle." placeholder instead of the toggle. The canvas always previews ⦿ Design A, so only it is needed while designing.

Optionally set Tracking to record market switches in Framer Analytics.

Market A and Market B are countries — currency follows automatically from your store's Markets & Localization config, with no separate currency picker on this component.

Toggle vs. Market Button vs. Market Dropdown

The Market Toggle is strictly for two markets — one control, two designs, and a click flips between them. For three or more regions, use the Market Dropdown for a full picker, or a set of Market Buttons for a row of options. Unlike a Market Button, which switches to one specific market and hides itself once that market is already active, the Toggle always shows one of its two designs and simply flips which one on click.