Adding components
Drag TGC components onto your Framer canvas and connect them to your synced product data.
Find the components
Open the TGC plugin in Framer
Switch to the Components tab
Browse the available components
Components are organised by function: product display, cart, filtering, and more.
Add a component to your page
Drag a component from the plugin onto your canvas
With the component selected, open the right panel
Under Content, click the CMS binding dropdown
Select TGC Products (or TGC Categories for category components)
Choose a specific item or bind to a collection for dynamic pages
The component will now display your Swell data in the canvas.
Essential components to start
For a basic storefront, you'll need:
Component | Purpose | Where to use |
|---|---|---|
Product card | Display products in a grid | Shop page, homepage |
Product detail | Full product page layout | Product detail page (PDP) |
Variant selector | Size, colour, etc. options | PDP |
Purchase button | Add to cart | PDP, quick-add |
Cart button | Open cart drawer | Header/navbar |
Cart modal section | Slide-out cart | Overlay |
Canvas vs live behaviour
In the canvas, components show data from your Framer CMS snapshot. On the live site, they fetch fresh data from Swell.
This means:
Canvas: Fast, instant previews while designing
Live site: Real-time prices, inventory, and variants from Swell
See The hybrid model for a deeper explanation.
Styling components
TGC components are fully customisable using Framer's native design tools:
Adjust fonts, colours, spacing, and borders in the right panel
Use variants for hover, active, and disabled states
Override styles on specific instances
Each component doc includes a list of stylable elements.
Next steps
You're ready to build! Explore the component docs to learn what each one does:
Components overview
Sections overview
Or learn more about how TGC handles data:
The hybrid model