A complete store template showcasing TGC components in action.

Overview

The TGC demo template is a fully designed store that demonstrates best practices for building with The Good Commerce. Use it as a starting point or as reference for your own designs.

What's included

The template includes:

• Homepage - Hero, featured products, category highlights

• Shop page - Product grid with filters and sorting

• Product page - Full PDP with variants, gallery, and add to cart

• Cart - Slide-out cart modal with checkout

How to use

Option 1: Duplicate the template

1. Open the TGC demo template in Framer

2. Click Duplicate to create your own copy

3. Connect your Swell store credentials

4. Sync your products

5. Customise the design to match your brand

Option 2: Reference for your own build

Browse the template to see:

• How components are connected to CMS

• Layout patterns for different page types

• Responsive design approaches

• Component property configurations

Customisation tips

Colours and fonts

Update the design tokens in Framer to quickly restyle the entire template:

• Primary colour

• Background colours

• Font families

• Spacing scale

Component swaps

Replace any component with your own design while keeping the CMS bindings:

1. Copy the CMS connection settings

2. Create your new component

3. Apply the same bindings

Layout changes

The template uses Framer's native layout tools:

• Stack for vertical/horizontal arrangements

• Grid for product listings

• Responsive breakpoints for mobile

Pages breakdown

Homepage

Shop page

Product page

Cart

Getting help

If you run into issues with the template:

1. Check the Troubleshooting section

2. Make sure your Swell credentials are connected

3. Re-sync your products if data looks stale