Prerequisites

A connected Shopify store with markets configured in Shopify Admin. More than one market is needed for the plugin’s Default Market setting.

1. Prepare markets in Shopify

Configure the countries and currencies you intend to support in Shopify first. Shopiframe loads available markets when you connect the store; do not start by inventing a currency list in Framer.

2. Review Store Configuration

Choose Default Market for the initial country and currency when the setting is available. Set Language Code to match the primary language of the Framer site for localized Shopify requests. This is not a replacement for translating site content.

3. Insert the Market Dropdown

Open Shopiframe Components and add Market Dropdown. Choose closed-button and menu-item formats, such as Code + Currency and Country + Currency. Make loading, empty, and active states clear.

4. Show the active market

Add Active Market to display the current country and currency. If you prefer direct country actions, Market Button switches to its selected country and automatically hides when that country is already active.

5. Test localized content and prices

Switch between configured markets and inspect product prices and the active-market display. For regional messages, use Market Content with a connected component instance, a Country, and the Active or Inactive condition.

Check your work

Confirm that the dropdown only offers the store’s available markets and that Active Market reflects each selection. Check price formatting and country-specific content together on desktop and phone.

Troubleshooting

If no markets appear, review Shopify configuration and the connected store. If Default Market is absent, confirm the store has more than one market. Use the component’s error and loading states to diagnose changes rather than hardcoding currency symbols over unchanged prices.

Resources

Global components reference