Components for displaying products, prices, variants, and add-to-cart functionality.

Product card

Display a product with its image, title, and price. Use in grids and listings.

Properties

How it works

Canvas: Displays data from the Framer CMS snapshot — title, main image, and price.

Live site: Fetches fresh data from Swell using the product's swellId. Price and sale status reflect current Swell values.

Basic usage

1. Drag the Product card onto your canvas

2. In the right panel, bind it to TGC Products

3. Choose a specific product or use in a CMS collection list for dynamic grids

4. Set the Link to property to your product detail page

Hover image

Enable Show hover image to swap images on hover. TGC automatically uses the second image from your Swell product gallery.

If a product only has one image, the hover state shows the same image (no flash or broken state).

Sale badge

Enable Show sale badge to display a badge when isOnSale is true.

The badge appears when a product has a sale price set in Swell. Style the badge using Framer's design tools.

Styling

Product detail

Full product display with image gallery, description, variants, and add to cart. Use on your product detail page (PDP).

Properties

How it works

Canvas: Displays the CMS snapshot — title, images, description, price, and variant labels for layout purposes.

Live site: Fetches full product data from Swell including real-time pricing, variant combinations, and stock availability.

Basic usage

1. Create a CMS page in Framer connected to TGC Products

2. Drag the Product detail component onto that page

3. It automatically binds to the current product from the URL

4. Add a Variant selector and Purchase button inside or alongside the component

Gallery styles

Images are pulled from your Swell product gallery in the order they appear there.

Composing a PDP

The Product detail component works best when combined with:

These components communicate through the TGC runtime — selecting a variant updates the price and purchase button automatically.

Styling

Product price

Display the product price with support for sale prices and currency formatting.

Properties

How it works

Canvas: Shows the price snapshot from Framer CMS. May not reflect current Swell pricing.

Live site: Fetches the current price from Swell. If a variant is selected, shows that variant's price.

Basic usage

1. Drag Product price onto your canvas

2. Bind it to TGC Products

3. Configure your currency symbol

4. Enable Show original price if you want strikethrough pricing for sales

Sale price display

When a product is on sale and Show original price is enabled:

$45 $60
^^^  ^^^
|    |
|    Original (strikethrough)
Sale price (highlighted)

Style the original and sale prices differently to make the discount clear.

Variant pricing

When used alongside a Variant selector, the price automatically updates when the customer selects a different variant.

This happens through the TGC runtime — no additional setup required.

Styling

Variant selector

Let customers choose product options like size, colour, or material.

Properties

How it works

Canvas: Shows variant labels from the CMS snapshot (designVariants field) for layout purposes.

Live site: Fetches real variant options from Swell with availability status. Handles multi-dimensional variants (e.g., Size + Colour combinations).

Basic usage

1. On your product detail page, drag Variant selector into your layout

2. It automatically inherits the product from the page's CMS binding

3. Choose your preferred Style (Pills or Dropdown)

4. Enable Show availability to indicate stock status

Styles

Multi-dimensional variants

If your product has multiple option types (e.g., Size and Colour), the Variant selector handles them automatically:

• Each option type gets its own selector

• Selecting one option filters available combinations

• Unavailable combinations are visually indicated

Communication with other components

When a customer selects a variant, the TGC runtime notifies other components:

No additional setup required — just place the components on the same page.

Styling

Purchase button

Add to cart button with loading, sold out, and variant selection states.

Properties

How it works

Canvas: Shows the default label for layout purposes.

Live site: Connects to the TGC runtime. Responds to variant selection, checks stock availability, and adds items to the cart.

Button states

Basic usage

1. On your product detail page, drag Purchase button into your layout

2. It automatically inherits the product from the page's CMS binding

3. If using with Variant selector, the button waits for a selection before enabling

Quick add (without variant selection)

For products without variants, or to add a default variant directly from a grid:

1. Place Purchase button inside or alongside a Product card

2. The button adds the product's default variant to cart

3. No variant selector needed

What happens on click

1. Button shows loading state

2. TGC adds the item to the cart (stored in localStorage)

3. Cart state updates across all components

4. Cart button count increments

5. Button returns to default state

Styling