Global components
Explore our globally used Framer components that connect your site to Shopify.
Global components in this doc:
€
Italy
Market Dropdown
A dropdown component that allows customers to select their preferred country and currency.
Simply configure your markets on your Shopify dashboard and set your default market in our plugin.
Connect your button design, and this component will automatically open an HTML dropdown with all available markets on click.
Include the Active Market and/or Country Flag components in your component instance to display the selected market.
Controls
Instance
Connect to native designed dropdown component
Market Dropdown
A dropdown component that allows customers to select their preferred country and currency.
Simply configure your markets on your Shopify dashboard and set your default market in our plugin.
Connect your button design, and this component will automatically open an HTML dropdown with all available markets on click.
Include the Active Market and/or Country Flag components in your component instance to display the selected market.
Controls
Instance
Connect to native designed dropdown component
Market Dropdown
A dropdown component that allows customers to select their preferred country and currency.
Simply configure your markets on your Shopify dashboard and set your default market in our plugin.
Connect your button design, and this component will automatically open an HTML dropdown with all available markets on click.
Include the Active Market and/or Country Flag components in your component instance to display the selected market.
Controls
Instance
Connect to native designed dropdown component
Shop USA
Market Button
Triggers a market change to your selected country/currency on click.
This component automatically hides when the selected country is active.
Can also be set to close the Smart Modal on click.
Controls
Instance
Connect to native designed button component
Country
Select which country to change to on click
Close Modal
If placed in a Smart Modal, enable this button to close the modal on click
Market Button
Triggers a market change to your selected country/currency on click.
This component automatically hides when the selected country is active.
Can also be set to close the Smart Modal on click.
Controls
Instance
Connect to native designed button component
Country
Select which country to change to on click
Close Modal
If placed in a Smart Modal, enable this button to close the modal on click
Market Button
Triggers a market change to your selected country/currency on click.
This component automatically hides when the selected country is active.
Can also be set to close the Smart Modal on click.
Controls
Instance
Connect to native designed button component
Country
Select which country to change to on click
Close Modal
If placed in a Smart Modal, enable this button to close the modal on click
You're shopping in New Zealand (NZ)
Active Market
A component that displays the currently active country/currency. Use in your dropdown or Smart Modal to let users know which market they are currently in.
Controls
Format
Use {{CN}} to display the country name (i.e. United States). Use {{CC}} to display the country code (i.e. USD). Use {{CUS}} to display currency symbol (i.e. $). Use {{CUC}} to display currency code (i.e. USD).
Font
Choose the font
Color
Choose text color
Text Transform
None, Capitalize, Lowercase, or Uppercase
Active Market
A component that displays the currently active country/currency. Use in your dropdown or Smart Modal to let users know which market they are currently in.
Controls
Format
Use {{CN}} to display the country name (i.e. United States). Use {{CC}} to display the country code (i.e. USD). Use {{CUS}} to display currency symbol (i.e. $). Use {{CUC}} to display currency code (i.e. USD).
Font
Choose the font
Color
Choose text color
Text Transform
None, Capitalize, Lowercase, or Uppercase
Active Market
A component that displays the currently active country/currency. Use in your dropdown or Smart Modal to let users know which market they are currently in.
Controls
Format
Use {{CN}} to display the country name (i.e. United States). Use {{CC}} to display the country code (i.e. USD). Use {{CUS}} to display currency symbol (i.e. $). Use {{CUC}} to display currency code (i.e. USD).
Font
Choose the font
Color
Choose text color
Text Transform
None, Capitalize, Lowercase, or Uppercase
Free NZ shipping on orders $95+
Market Content
Displays content based on your set country being active or inactive.
Controls
Instance
Connect to natively designed, market-specific content
Country
Select desired country
Show When
Choose if the content shows when your selected country is Active or Inactive
Market Content
Displays content based on your set country being active or inactive.
Controls
Instance
Connect to natively designed, market-specific content
Country
Select desired country
Show When
Choose if the content shows when your selected country is Active or Inactive
Market Content
Displays content based on your set country being active or inactive.
Controls
Instance
Connect to natively designed, market-specific content
Country
Select desired country
Show When
Choose if the content shows when your selected country is Active or Inactive
Country Flags
A component that displays country flags for international stores. Choose to show the active country or a specific country.
Controls
Display
Choose to display the flag of the Active country or a static one
Country
If display is static, choose the country
Ratio
Choose between Square or Rectangle
Radius
Customize the radius
Country Flags
A component that displays country flags for international stores. Choose to show the active country or a specific country.
Controls
Display
Choose to display the flag of the Active country or a static one
Country
If display is static, choose the country
Ratio
Choose between Square or Rectangle
Radius
Customize the radius
Country Flags
A component that displays country flags for international stores. Choose to show the active country or a specific country.
Controls
Display
Choose to display the flag of the Active country or a static one
Country
If display is static, choose the country
Ratio
Choose between Square or Rectangle
Radius
Customize the radius
Get 20% off your first purchase
Join our newsletter and get access to huge discounts every month.
Not now
Get 20% off your first purchase
Join our newsletter and get access to huge discounts every month.
Not now
Get 20% off your first purchase
Join our newsletter and get access to huge discounts every month.
Not now
Smart Modal
A modal component that you can use for market selection, promos, and more.
It uses local storage to show the modal once or after a set amount of days.
Use multiple modals on the same page and they will appear one after another.
Set the modal to appear on load, after a delay, or on scroll.
Place this component at the bottom of your page as Position: Relative, Width: Fill and Height: Fit.
Use the nested Smart Modal Close component to connect your close button(s).
Controls
Preview
Hide or Show the Preview on your canvas (suggested to only enable when editing)
Display
Choose which component instance to render (Desktop or Phone)
Instances
Connect your natively designed Desktop + Phone modal states
Appearance
Set styles including Height (Fit or 100vh), Max-Width (% or px), Padding, Background, Transition, and Page Scroll (Block/Auto)
Appear
Choose between Instant, Delay (and set time), or Scroll (and set Y pixel or percentage distance)
Show
Set your modal to only show Once or set how many days it should re-appear
Identifier
Set a unique identifier for each modal used for local storage and to connect with Smart Modal Trigger button
Smart Modal
A modal component that you can use for market selection, promos, and more.
It uses local storage to show the modal once or after a set amount of days.
Use multiple modals on the same page and they will appear one after another.
Set the modal to appear on load, after a delay, or on scroll.
Place this component at the bottom of your page as Position: Relative, Width: Fill and Height: Fit.
Use the nested Smart Modal Close component to connect your close button(s).
Controls
Preview
Hide or Show the Preview on your canvas (suggested to only enable when editing)
Display
Choose which component instance to render (Desktop or Phone)
Instances
Connect your natively designed Desktop + Phone modal states
Appearance
Set styles including Height (Fit or 100vh), Max-Width (% or px), Padding, Background, Transition, and Page Scroll (Block/Auto)
Appear
Choose between Instant, Delay (and set time), or Scroll (and set Y pixel or percentage distance)
Show
Set your modal to only show Once or set how many days it should re-appear
Identifier
Set a unique identifier for each modal used for local storage and to connect with Smart Modal Trigger button
Smart Modal
A modal component that you can use for market selection, promos, and more.
It uses local storage to show the modal once or after a set amount of days.
Use multiple modals on the same page and they will appear one after another.
Set the modal to appear on load, after a delay, or on scroll.
Place this component at the bottom of your page as Position: Relative, Width: Fill and Height: Fit.
Use the nested Smart Modal Close component to connect your close button(s).
Controls
Preview
Hide or Show the Preview on your canvas (suggested to only enable when editing)
Display
Choose which component instance to render (Desktop or Phone)
Instances
Connect your natively designed Desktop + Phone modal states
Appearance
Set styles including Height (Fit or 100vh), Max-Width (% or px), Padding, Background, Transition, and Page Scroll (Block/Auto)
Appear
Choose between Instant, Delay (and set time), or Scroll (and set Y pixel or percentage distance)
Show
Set your modal to only show Once or set how many days it should re-appear
Identifier
Set a unique identifier for each modal used for local storage and to connect with Smart Modal Trigger button
Get 20% off
Smart Modal Trigger
A button component that allows users to re-open a Smart Modal from the canvas, even after it's been closed.
Drop onto your Canvas, connect to a natively design button and set the same identifier as the Smart Modal component you want to trigger.
Controls
Instance
Connect your natively designed button
Identifier
Enter the same identifier as your Smart Modal component
When Open
Show or hide this component when the Smart Modal is open
Smart Modal Trigger
A button component that allows users to re-open a Smart Modal from the canvas, even after it's been closed.
Drop onto your Canvas, connect to a natively design button and set the same identifier as the Smart Modal component you want to trigger.
Controls
Instance
Connect your natively designed button
Identifier
Enter the same identifier as your Smart Modal component
When Open
Show or hide this component when the Smart Modal is open
Smart Modal Trigger
A button component that allows users to re-open a Smart Modal from the canvas, even after it's been closed.
Drop onto your Canvas, connect to a natively design button and set the same identifier as the Smart Modal component you want to trigger.
Controls
Instance
Connect your natively designed button
Identifier
Enter the same identifier as your Smart Modal component
When Open
Show or hide this component when the Smart Modal is open
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