Syncing products
Sync your Swell products and categories to Framer CMS so you can design with real data.
How sync works
When you sync, TGC:
Fetches products from your selected Swell categories
Creates two CMS collections in Framer: TGC Products and TGC Categories
Populates them with a design snapshot of your product data
This snapshot includes titles, images, prices, and variant labels — everything you need to design your storefront. The live site will always fetch fresh data from Swell at runtime.
See The hybrid model to understand why this matters.
Sync your products
Open the TGC plugin in Framer
After connecting, you'll see a list of your Swell categories
Select the categories you want to sync (check the boxes)
Click Sync selected
Wait for the sync to complete
You'll see a progress indicator showing how many products are being synced.
Category selection tips
Only sync what you need. Smaller syncs are faster and keep your Framer project tidy.
Checking a parent category automatically includes all its children.
Products can belong to multiple categories. They'll only sync once but will be filterable by all their categories.
For more on managing categories, see Category selection.
After syncing
Once the sync completes, you'll find your data in Framer's CMS panel:
Collection | Contains |
|---|---|
TGC Products | All synced products with images, prices, descriptions, and variant info |
TGC Categories | All synced categories with names, slugs, and images |
You can now bind TGC components to these collections.
Next steps
With your products synced, it's time to build your storefront.
Up next: Adding components — Drag components onto your canvas and connect them to your data.