Category components

TGC

Components

Category components

TGC

Components

Category components

Components for browsing and filtering products by category.

Category card

Display a category with its image and name. Use in grids to help customers browse by category.

Properties

Property	Type	Description
Category	CMS binding	Connect to TGC Categories collection
Show image	Boolean	Display category image
Show product count	Boolean	Display number of products in category
Link behaviour	Enum	"Filter current page" or "Navigate to page"

How it works

Canvas: Displays category data from the Framer CMS snapshot.

Live site: Fetches current category data. If Show product count is enabled, displays the actual count from Swell.

Basic usage

Drag Category card onto your canvas
Bind it to TGC Categories
Choose a specific category or use in a CMS collection list
Set the Link behaviour for what happens on click

Link behaviour

Option	What happens on click
Filter current page	Updates the Filter state to show products in this category
Navigate to page	Goes to a dedicated category page

For shop pages with filtering, use "Filter current page". For category landing pages, use "Navigate to page".

Category images

Category images come from Swell. To add or change them:

Go to your Swell dashboard
Navigate to Products → Categories
Select a category and upload an image
Re-sync TGC to pull the new image

Styling

Element	What to style
Container	Background, border, padding, shadow
Image	Aspect ratio, border radius, object fit
Name	Font, size, colour, position
Product count	Font, size, muted colour
Hover state	Overlay, scale, shadow

Category link

Text link to filter products by category. Use in navigation menus or filter sidebars.

Properties

Property	Type	Description
Category	CMS binding	Connect to TGC Categories collection
Show product count	Boolean	Display number of products in parentheses
Active style	Style variant	Styling when this category is currently selected

How it works

Canvas: Displays the category name as a text link.

Live site: Clicking updates the filter state and URL. Products on the page filter to show only items in the selected category.

Basic usage

Drag Category link into your sidebar or menu
Bind it to TGC Categories
Use in a CMS collection list to show all categories
Style the active state to indicate current selection

Difference from Category card

Component	Best for
Category card	Visual grids with images
Category link	Text-based navigation and filter lists

Active state

When a category is currently selected (active filter), the link should look different. Set up an active style variant:

Bold text
Different colour
Underline
Background highlight

The component automatically applies the active style when the category matches the current filter.

URL sync

When clicked, the category filter syncs to the URL:

/shop?category=shirts

This means:

Customers can share filtered URLs
Browser back/forward works
Refreshing keeps the filter active

Styling

Element	What to style
Link text	Font, size, colour
Product count	Font, size, muted colour
Hover state	Colour, underline
Active state	Font weight, colour, background

Filter

Filter products by category. Use in sidebars or filter panels on shop pages.

Properties

Property	Type	Description
Filter type	Enum	"Categories" (more types coming)
Display style	Enum	"Checkboxes", "Pills", or "Dropdown"
Show product counts	Boolean	Display count next to each option
Multi-select	Boolean	Allow selecting multiple categories

How it works

Canvas: Displays filter options from the CMS snapshot for layout purposes.

Live site: Selecting options updates the TGC filter state, which product grids subscribe to. Products are filtered client-side for instant results.

Basic usage

On your shop page, drag Filter into your sidebar
Choose your Display style
Enable Multi-select if customers can choose multiple categories
The product grid on the same page automatically responds to filter changes

Display styles

Style	Best for
Checkboxes	Multi-select, traditional filter UI
Pills	Visual, compact, good for few options
Dropdown	Space-constrained layouts, mobile

Multi-select behaviour

When Multi-select is enabled:

Customers can select multiple categories
Products matching any selected category are shown (union)
Selecting a parent category includes all children

When disabled:

Only one category active at a time
Selecting a new category replaces the previous

URL sync

Filter selections sync to the URL:

/shop?category=shirts,pants

Benefits:

Shareable filtered URLs
Browser navigation works
Refreshing preserves filters

Category hierarchy

TGC supports two-level category hierarchy (parent → children):

Parent categories show indented children
Checking a parent selects all children
Unchecking a parent deselects all children

Styling

Element	What to style
Container	Padding, background, border
Heading	Font, size (e.g., "Categories")
Checkboxes	Size, colour, checked state
Pills	Background, border, padding, selected state
Dropdown	Border, background, font
Product counts	Font, size, muted colour

Product sort

Sort products by price, name, or date. Typically placed above your product grid.

Properties

Property	Type	Description
Display style	Enum	"Dropdown" or "Buttons"
Default sort	Enum	Initial sort order
Options	Multi-select	Which sort options to include

How it works

Canvas: Shows the sort UI for layout purposes.

Live site: Selecting a sort option updates the TGC sort state. Product grids on the same page re-order instantly.

Basic usage

On your shop page, drag Product sort above your product grid
Choose your Display style
Select which sort Options to offer
Set your Default sort

Sort options

Option	Behaviour
Featured	Default order from Swell
Price: Low to high	Ascending by price
Price: High to low	Descending by price
Newest	Most recently added first
Name: A-Z	Alphabetical ascending
Name: Z-A	Alphabetical descending

You can enable/disable any of these in the Options property.

Display styles

Style	Best for
Dropdown	Compact, traditional ecommerce UI
Buttons	Prominent, visual selection

URL sync

Sort selection syncs to the URL:

/shop?sort=price-asc

Combined with filters:

/shop?category=shirts&sort=price-asc

Styling

Element	What to style
Container	Layout, spacing
Label	Font, size (e.g., "Sort by")
Dropdown	Border, background, font
Buttons	Background, border, selected state

Clear filters

Reset all active filters with one click. Shows only when filters are applied.

Properties

Property	Type	Description
Label	String	Button text (default: "Clear all")
Show when empty	Boolean	Whether to show when no filters are active
Reset sort	Boolean	Also reset sort to default

How it works

Canvas: Shows the button for layout purposes.

Live site: Subscribes to the TGC filter state. When clicked, clears all active filters (and optionally sort). Hidden by default when no filters are active.

Basic usage

Drag Clear filters near your filter controls or above the product grid
Customise the Label if needed
Decide whether to Reset sort as well

Visibility

By default, Clear filters only appears when at least one filter is active. This prevents clutter when the customer hasn't filtered yet.

Enable Show when empty if you want it always visible (it will be disabled when there's nothing to clear).

What gets cleared

Setting	Cleared
Category filters	Always
Sort order	Only if Reset sort is enabled
URL parameters	Yes (returns to base URL)

Styling

Element	What to style
Button	Background, border, padding, font
Hover state	Background, border colour
Disabled state	Opacity, cursor

Consider styling as a text link rather than a button for a lighter appearance.

Product count

Show the number of products matching the current filters. Helps customers understand their filtered results.

Properties

Property	Type	Description
Format	String	Display format (default: "{count} products")
Show total	Boolean	Also show total unfiltered count

How it works

Canvas: Shows a placeholder count for layout purposes.

Live site: Subscribes to the TGC filter state. Displays the number of products currently visible based on active filters. Updates instantly when filters change.

Basic usage

Drag Product count above your product grid, near the sort/filter controls
Customise the Format if needed
Optionally enable Show total for context

Format options

Use {count} as a placeholder in your format string:

Format	Result
`{count} products`	"24 products"
`Showing {count} items`	"Showing 24 items"
`{count} results`	"24 results"

Show total

When Show total is enabled and filters are active:

Format	Result
`{count} of {total} products`	"8 of 24 products"
`Showing {count} of {total}`	"Showing 8 of 24"

This gives customers context about how much the filter has narrowed results.

Zero results

When filters produce no matches, consider:

Showing "0 products" with a message
Suggesting the customer clear filters

Styling

Element	What to style
Text	Font, size, colour
Count number	Can be styled separately (bold, different colour)

Cart components

Sections