Compose layouts with slots

Build custom product and cart layouts by nesting atomic components inside layout containers.

How slots work

A slot is a component region that accepts children. Framerce components expose slots so you can nest other components or Framer elements inside them.

FmCartItemList demonstrates this pattern: you design the line item layout once, and the list repeats it for every item in the cart.

Composition pattern

FmCartItemList (repeats for each item)
  └── Your custom layout frame
      ├── FmCartItemImage
      ├── FmCartItemTitle
      ├── FmCartItemPrice
      ├── FmCartItemQuantity
      └── FmCartItemVariant

Each child component reads line-item data automatically.

Design tips

• Use Auto Layout in Framer for responsive cart/product layouts
• Stack atomic components — each one handles a single concern (image, title, price)
• Nest freely — add Framer text, frames, or icons alongside Framerce components
• Override styles via Framer's design panel — components respect Framer's styling system

Product page example

Frame (product page layout)
  ├── Frame (details column)
  │   ├── FmProductPrice
  │   ├── FmProductComparePrice
  │   ├── FmProductVariants
  │   ├── FmProductStockState
  │   │   ├── In Stock → FmDeliveryEstimate
  │   │   └── Out of Stock → FmRestockEstimate
  │   └── FmCartAddButton

Each component pulls data from the product context. Change the product and everything updates.

What's next

• Cart Components — Cart line item components
• Product Components — Product display components
• Checkout & Analytics — Cart-to-checkout flow and tracking