Global component reference
Global components use Shopify Markets state rather than one product. Configure the storefront country and language in Shopiframe, enable the intended countries/currencies in Shopify Markets, and then add these components to headers, navigation, announcements, or localized sections.
Use this page when you need detailed market-component behavior or property information. For a guided setup, start with Build your storefront.
The tables list Shopiframe controls. Standard Framer layout controls are not repeated.
Market Dropdown
Lists the markets available from Shopify and changes the active country/currency when the shopper selects one.
Property
What it controls
Button Format
Format used for the closed dropdown button. Default: Code + Currency.
Item Format
Format used for menu items. Default: Country + Currency.
Flag
None, Emoji, or Image, plus size, gap, and radius.
Loading Label
Text shown while the market is changing. Default: Updating….
Empty Label
Text shown when Shopify returns no markets. Default: No markets available.
Button
Typography, background, border, radius, shadow, and padding.
Button Hover
Hover color, background, border, and shadow.
Menu Layout
Auto/Bottom/Top placement, Start/Center/End alignment, offset, and optional button-width matching.
Menu
Background, border, radius, shadow, padding, minimum width, maximum height, overflow, and item gap.
Item
Typography, alignment, background, border, radius, and padding.
Item Hover
Hover color, background, and border.
Active Item
Active-market color, background, and border.
Arrow
Visibility, size, color, and stroke width.
Motion
Enable, transition, item stagger, hover scale, and tap scale.
Error
Typography, color, padding, tracking, and text transform.
Only markets returned by the configured Shopify storefront are listed. If the menu is empty, verify Shopify Markets and the Store Configuration country/language.
Market Button
Changes the active country and currency to one configured target. It only appears when the current country differs from the target country.
Property
What it controls
Country
Target country for the button.
Type
Uses the built-in button or a connected custom button component.
Button Component
Custom Framer button instance used when Type is Custom.
Component Variants
Names of the custom button’s Default, Loading, and Disabled variants.
Label
Built-in button text. Default: Change market.
Style
Built-in button typography, color, background, border, radius, and padding.
Hover
Built-in button hover color, background, and border.
Left Icon / Right Icon
Optional preset or custom image icon, including size, gap, and color.
Error Style
Typography, color, padding, tracking, and text transform for market-change errors.
Active Market
Displays the active country/currency and updates after a market change.
Property
What it controls
Format
Country + Currency, Code + Currency, Country Name, or Currency Code.
Flag
None, Emoji, or Image, plus size, gap, and radius.
Style
Typography, color, padding, tracking, and text transform.
Market Content
Conditionally renders a connected Framer component based on whether one country is active.
Property
What it controls
Component Instance
Framer component to render when the condition matches.
Country
Country used by the visibility condition.
Show When
Shows the instance when the country is Active or Inactive. Default: Active.
Use separate Market Content instances when different countries need different content. This component controls visibility; it does not translate the connected content.
Country Flags
Displays the active country’s flag or one fixed country flag.
Property
What it controls
Show
Active follows the current market; Specific uses the selected Country.
Country
Fixed country shown in Specific mode.
Flag
None, Emoji, or Image, plus size, gap, and radius.
Choosing None hides the visual flag, so use Emoji or Image when this component is used by itself.
Test the cart flow
Use the test and publish checklist to verify cart items, quantities, subtotal, promotion messages, and checkout.