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
  │   ├── FmProductAvailability (state: "available") → FmDeliveryEstimate
  │   ├── FmProductAvailability (state: "sold-out") → FmRestockEstimate
  │   ├── FmProductLowStock → "Only 3 left!"
  │   └── 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