Components overview

Framerce provides atomic components that each handle one piece of store functionality. You own the styling — compose them on the Framer canvas using slots, property controls, and layout tools.

Component categories

Product

Display product data from Shopify. All product components read from a shared product context.

Component	Purpose
FmProductPrice	Formatted price for the active market currency
FmProductComparePrice	Compare-at (strikethrough) price for items on sale
FmProductDiscount	Discount amount or percentage
FmProductVariants	Variant option picker (size, color, etc.)
FmProductVariantLabel	Displays the selected variant option name
FmProductStockState	Visibility toggle based on stock status (in stock, low stock, out of stock)
FmProductInventory	Numeric inventory count
FmRestockEstimate	Estimated restock date for out-of-stock items
FmDeliveryEstimate	Estimated delivery date

Cart

Manage cart state and display line items. Line item components must be nested inside FmCartItemList.

Component	Purpose
FmCartAddButton	Add to cart with loading and sold-out states
FmCartItemButton	Line item action button
FmCartItemList	Repeats children for each cart line item
FmCartItem	Line item wrapper
FmCartItemImage	Line item product image
FmCartItemTitle	Line item product title
FmCartItemPrice	Line item price (unit price × quantity)
FmCartItemQuantity	Quantity adjuster (+/−)
FmCartItemVariant	Selected variant display (e.g., "Size: M, Color: Blue")
FmCartCheckout	Checkout button — redirects to Shopify checkout
FmCartSubtotal	Cart total price
FmCartCounter	Number of items in the cart
FmCartQuantityButton	Increment/decrement quantity button
FmCartQuantityDisplay	Current quantity display
FmCartClear	Clear all cart items
FmCartTrigger	Opens/closes the cart drawer
FmCartState	Visibility toggle based on cart state (empty, has items)
FmCartQuickAdd	One-click add to cart for simple products

Catalog

Browse, search, filter, and sort products from Shopify collections.

Component	Purpose
FmCatalog	Product grid from a Shopify collection
FmCatalogCollection	Collection-level wrapper
FmCatalogItem	Single product card within a catalog
FmCatalogSort	Sort dropdown (price, title, best-selling, newest)
FmCatalogSearch	Search input for filtering products
FmCatalogSearchResults	Displays search results
FmCatalogSearchLink	Link to search results page
FmCatalogFilter	Filter by product options or tags
FmCatalogFilterCount	Number of matching products for a filter
FmCatalogFilterReset	Clear all active filters
FmCatalogActiveFilters	List of currently applied filters
FmCatalogActiveFilterLabel	Label for an active filter
FmCatalogActiveFilterRemove	Remove a single active filter
FmCatalogActiveFilterState	Visibility toggle based on filter state
FmCatalogFavoriteButton	Toggle favorite on a product
FmCatalogFavorites	List of favorited products
FmCatalogResultCount	Number of products matching current filters

Market

International pricing and currency switching via Shopify Markets.

Component	Purpose
FmMarketSelect	Country/market dropdown switcher
FmMarketPicker	Market picker with expanded display
FmMarketList	Lists available markets
FmMarketLabel	Displays the active market name
FmMarketFlag	Flag icon for the active market

Property controls

Every component exposes Framer property controls — configurable directly from the design panel. Common controls include:

• Visibility — Show/hide based on state (e.g., hide price when unavailable)
• Formatting — Currency format, text truncation, image aspect ratio
• Slots — Accept children for custom layout composition

Context system

Connect a product handle or market once, and every child component updates automatically. Components read from shared contexts:

• Product context — Set by connecting a product handle; all product components inherit it
• Cart line item context — Set by FmCartItemList; line item components get the current item
• Catalog context — Set by FmCatalog; filter, sort, and search components coordinate through it
• Market context — Global; set by FmMarketSelect or auto-detected from visitor location

See Layout & Slots for composition patterns using these contexts.