Sync your Swell products and categories to Framer CMS so you can design with real data.

How sync works

TGC syncs into two separate Framer CMS collections you create yourself: one for products and one for categories. You set them up once, then run sync on each.

When you sync, TGC:

1. Fetches products (or categories) from Swell based on what you selected

2. Populates the chosen Framer CMS collection with a design snapshot — titles, images, prices, variant labels, slugs

3. Stores credentials and selection on the collection so re-syncs work without reconfiguring

This snapshot is for layout only. The live site always fetches fresh data from Swell at runtime.

See The hybrid model to understand why this matters.

Set up your collections

You'll create two Framer CMS collections — one for products, one for categories. Both use The Good Commerce as their data source.

1. In your Framer project, open the CMS panel

2. Click + New Collection

3. Name it (e.g. Products) and choose The Good Commerce as the source

4. The TGC plugin will open. Pick TGC Products as the sync type, select which Swell categories to include, and click Sync

5. Repeat steps 2–4 for a second collection (e.g. Categories), this time choosing TGC Categories as the sync type

You now have two collections in Framer that mirror your Swell store and can be re-synced independently.

Sync your products

1. Open the TGC plugin in Framer

2. After connecting, you'll see a list of your Swell categories

3. Select the categories you want to sync (check the boxes)

4. Click the sync button at the bottom (label includes the count, e.g. "Sync products from 4 categories")

5. Wait for the sync to complete

You'll see a progress indicator while products are syncing.

Category selection tips

• Only sync what you need. Smaller syncs are faster and keep your Framer project tidy.

• Checking a parent category automatically ticks all its child categories too, so everything underneath gets synced in one go.

• 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:

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.