Global components reference
Global components extend your ecommerce capabilities.
// MARKET COMPONENTS IN ACTION
See how to configure Shopify Markets and use Shopiframe’s global components to switch countries and currencies, show the active market, and display market-specific content.
Market Dropdown
A dropdown that lets customers select their preferred country and currency. Configure markets in Shopify Admin, then set the default market in the Shopiframe plugin.
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.
Market Button
Switches the store market to the selected country and currency on click. Automatically hides when the selected country is already active.
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 currently active country and currency to let users know which market they are currently in.
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
Show or hide content based on the active country, giving you more control over country-specific experiences.
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.
Country Flags
Displays a country flag based on the active market or a specific country of your choice.
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.