API changes require action by April 1
Framer Commerce
Setting Up Shopify Markets for International Customers
Market components are being released between Mon-Wed this week
Market components are being released between Mon-Wed this week
Market components are being released between Mon-Wed this week
Learn how to set up your Shopify store on Framer to support multiple countries and currencies. This guide will walk you through configuring markets in Shopify, setting default preferences, and implementing various country/currency selector components to create a seamless international shopping experience.
Note that once updated, all of our existing components support multi-currency with the exception of Product Selling Plans (Subscriptions) and Cart Promo Progress Bar, which are in progress.
In this doc, we will:
Set up your Shopify store to support multiple markets
Visit Shopify's Markets Documentation for in-depth instructions on how to set up markets to sell to customers worldwide.
Set up your Shopify store to support multiple markets
Visit Shopify's Markets Documentation for in-depth instructions on how to set up markets to sell to customers worldwide.
Set up your Shopify store to support multiple markets
Visit Shopify's Markets Documentation for in-depth instructions on how to set up markets to sell to customers worldwide.
Set your default country in the plugin
Open the Framer Commerce plugin and click on Store Settings. Set your default country and currency for first-time users by selecting from the "Default Country & Currency" dropdown, and then click Save Changes.
If you make updates to the available markets on Shopify and want to select a new default country, click the refresh button to load new options. This list is only used to help you set your default country; your live site always pulls from Shopify.
You can find our plugin here.
Set your default country in the plugin
Open the Framer Commerce plugin and click on Store Settings. Set your default country and currency for first-time users by selecting from the "Default Country & Currency" dropdown, and then click Save Changes.
If you make updates to the available markets on Shopify and want to select a new default country, click the refresh button to load new options. This list is only used to help you set your default country; your live site always pulls from Shopify.
You can find our plugin here.
Set your default country in the plugin
Open the Framer Commerce plugin and click on Store Settings. Set your default country and currency for first-time users by selecting from the "Default Country & Currency" dropdown, and then click Save Changes.
If you make updates to the available markets on Shopify and want to select a new default country, click the refresh button to load new options. This list is only used to help you set your default country; your live site always pulls from Shopify.
You can find our plugin here.
country
Canada
currency
CAD
Understand how country & currency preferences are saved
When a user first visits your website, their market will initially be the default that you set in your plugin.
When they change their country/currency on your website via any of the methods below, their preferences are saved to local storage, and your store will be loaded in the same market when they revisit in the same browser.
An update for auto-detecting the user’s country is coming soon.
Understand how country & currency preferences are saved
When a user first visits your website, their market will initially be the default that you set in your plugin.
When they change their country/currency on your website via any of the methods below, their preferences are saved to local storage, and your store will be loaded in the same market when they revisit in the same browser.
An update for auto-detecting the user’s country is coming soon.
Understand how country & currency preferences are saved
When a user first visits your website, their market will initially be the default that you set in your plugin.
When they change their country/currency on your website via any of the methods below, their preferences are saved to local storage, and your store will be loaded in the same market when they revisit in the same browser.
An update for auto-detecting the user’s country is coming soon.
Find & use Framer Commerce components
You can find all of our Market components mentioned below in the "Components" screen in our plugin, under the "Global" tab. You can also search for them by name.
You can click into them to see instructions and drag and drop them into your canvas.
These components come pre-connected to Framer design components which you can unlink and customize to match your site's design and content while maintaining functionality.
Find & use Framer Commerce components
You can find all of our Market components mentioned below in the "Components" screen in our plugin, under the "Global" tab. You can also search for them by name.
You can click into them to see instructions and drag and drop them into your canvas.
These components come pre-connected to Framer design components which you can unlink and customize to match your site's design and content while maintaining functionality.
Find & use Framer Commerce components
You can find all of our Market components mentioned below in the "Components" screen in our plugin, under the "Global" tab. You can also search for them by name.
You can click into them to see instructions and drag and drop them into your canvas.
These components come pre-connected to Framer design components which you can unlink and customize to match your site's design and content while maintaining functionality.
€
Italy
Italy (EUR)
France (EUR)
Japan (JPY)
United States (USD)
Australia (AUD)
Use the MarketDropdown component for a native dropdown selector
This component will open an HTML dropdown on click that displays your store's available countries and currencies from Shopify. It's the simplest way to give users access to all your markets.
It references a component instance on the canvas. Inside this component you can use the CountryFlag component to display the active market's country flag and the MarketActive component to display the active market's country name, country code, currency symbol, and/or currency code.
Use the MarketDropdown component for a native dropdown selector
This component will open an HTML dropdown on click that displays your store's available countries and currencies from Shopify. It's the simplest way to give users access to all your markets.
It references a component instance on the canvas. Inside this component you can use the CountryFlag component to display the active market's country flag and the MarketActive component to display the active market's country name, country code, currency symbol, and/or currency code.
Use the MarketDropdown component for a native dropdown selector
This component will open an HTML dropdown on click that displays your store's available countries and currencies from Shopify. It's the simplest way to give users access to all your markets.
It references a component instance on the canvas. Inside this component you can use the CountryFlag component to display the active market's country flag and the MarketActive component to display the active market's country name, country code, currency symbol, and/or currency code.
Select your shipping destination
Finland
Norway
Sweden
Denmark
Use the MarketButton component for targeted country/currency selection
Unlike the Market Dropdown which displays all available markets, you can only set one specific market to each Market Button. On click, it updates the store's active country and currency.
Because it is specific to a single market, this component will automatically hide itself when the set market is active. You can use this to create custom dropdowns, country select modals, and more custom UI.
In this example, the first item that shows the selected country is not using MarketButton, but MarketActive to dynamically display the data.
The buttons that follow are all set to specific countries using MarketButton. There is a Finland instance of the MarketButton, but since it is currently active, it is automatically hidden.
Use the MarketButton component for targeted country/currency selection
Unlike the Market Dropdown which displays all available markets, you can only set one specific market to each Market Button. On click, it updates the store's active country and currency.
Because it is specific to a single market, this component will automatically hide itself when the set market is active. You can use this to create custom dropdowns, country select modals, and more custom UI.
In this example, the first item that shows the selected country is not using MarketButton, but MarketActive to dynamically display the data.
The buttons that follow are all set to specific countries using MarketButton. There is a Finland instance of the MarketButton, but since it is currently active, it is automatically hidden.
Use the MarketButton component for targeted country/currency selection
Unlike the Market Dropdown which displays all available markets, you can only set one specific market to each Market Button. On click, it updates the store's active country and currency.
Because it is specific to a single market, this component will automatically hide itself when the set market is active. You can use this to create custom dropdowns, country select modals, and more custom UI.
In this example, the first item that shows the selected country is not using MarketButton, but MarketActive to dynamically display the data.
The buttons that follow are all set to specific countries using MarketButton. There is a Finland instance of the MarketButton, but since it is currently active, it is automatically hidden.
Free shipping on
orders over $150 NZD
New Zealand Customers
Free shipping on
orders over $95 AUD
Australia Customers
Display country-specific content with the MarketContent component
Use the Market Content component to reference content that you want to be displayed when the specified country is active or inactive. This allows you to customize messaging, promotions, and information based on the user's selected country.
Display country-specific promos, shipping costs, taxes & duties information, and more to provide relevant details to international customers.
Display country-specific content with the MarketContent component
Use the Market Content component to reference content that you want to be displayed when the specified country is active or inactive. This allows you to customize messaging, promotions, and information based on the user's selected country.
Display country-specific promos, shipping costs, taxes & duties information, and more to provide relevant details to international customers.
Display country-specific content with the MarketContent component
Use the Market Content component to reference content that you want to be displayed when the specified country is active or inactive. This allows you to customize messaging, promotions, and information based on the user's selected country.
Display country-specific promos, shipping costs, taxes & duties information, and more to provide relevant details to international customers.
You're shopping in United States
Free shipping on all orders over $100 USD
Duties are included, taxes calculated at checkout
Receive your order in 3-5 business days
Easy 30-day returns
You're shopping in United States
Free shipping on all orders over $100 USD
Duties are included, taxes calculated at checkout
Receive your order in 3-5 business days
Easy 30-day returns
You're shopping in United States
Free shipping on all orders over $100 USD
Duties are included, taxes calculated at checkout
Receive your order in 3-5 business days
Easy 30-day returns
Use the SmartModal component for first-visit country selection
Leverage our new Smart Modal component to trigger a country/currency selection modal only on the user's first visit, or after a set amount of days. This helps guide new visitors to select their appropriate region without disrupting returning customers.
Combine all of the components mentioned in this article to create versatile market selection experiences and displays tailored to your store's needs.
Use the SmartModal component for first-visit country selection
Leverage our new Smart Modal component to trigger a country/currency selection modal only on the user's first visit, or after a set amount of days. This helps guide new visitors to select their appropriate region without disrupting returning customers.
Combine all of the components mentioned in this article to create versatile market selection experiences and displays tailored to your store's needs.
Use the SmartModal component for first-visit country selection
Leverage our new Smart Modal component to trigger a country/currency selection modal only on the user's first visit, or after a set amount of days. This helps guide new visitors to select their appropriate region without disrupting returning customers.
Combine all of the components mentioned in this article to create versatile market selection experiences and displays tailored to your store's needs.
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025