How components work
Framerlink components aren't embeds or iframes — they're real Framer code components written into your project, so they behave like anything else on your canvas.
Code components, not embeds
When you add a component, the plugin writes a code file into your Framer
project — Product Card becomes FL_product_card.tsx, Add to Cart becomes
FL_add_to_cart.tsx, and so on. Because they're native code components they:
- render on the canvas, in preview and on your published site identically,
- expose their options in Framer's properties panel (sizes, labels, colors, behaviors),
- can be placed inside your own frames, stacks and CMS-driven lists.
Your store credentials and brand theme are baked into each file at insert time, so components work immediately without extra setup.
Every Framerlink file starts with FL_ so your own code files
never collide with the library. Renaming or duplicating them in Framer is
fine — the plugin recognizes its files and updates the right ones.
Adding a component
- Open Components from the plugin home screen — components are grouped by category (Product, Cart, Navigation, Collection, Checkout).
- Drag one onto the canvas, or click it to insert.
- Adjust everything else from the properties panel.
Adding the same component again doesn't create a duplicate file — it reuses
and updates the existing FL_ file.
The shared store
All components read and write one shared client-side store, which is what makes them work together without any wiring:
- Cart — Add to Cart, Quick Add and the Cart Icon all see the same cart; the badge count updates the moment anything is added.
- Variant selection — pick a size in Product Variants and Product Price, Stock Status and Add to Cart all snap to that variant.
- Catalog filtering — the Search & Filter toolbar filters Product Card grids and native CMS lists on the page, live.
- Wishlist — Wishlist Buttons share state across every page.
State persists in the visitor's browser, so carts survive navigation and reloads. Checkout hands off to Shopify's real checkout (including Shop Pay).
Updating components
Components re-bake automatically when something they depend on changes:
- Brand changes — updating your brand theme rewrites every
placed
FL_file with the new font and accent color, one by one. - Reconnecting a store — new credentials propagate to placed components the same way.
Framer per-instance overrides always survive re-bakes: anything you changed in the properties panel stays yours.
With a lapsed subscription, already-placed components keep working on your published site, but adding or updating components pauses until you resubscribe — see Billing & plans.