Sections
Pre-built layout sections that combine multiple components for common ecommerce patterns.
Cart modal section
A complete slide-out cart drawer with all cart functionality built in.
What's included
Cart list with all items
Cart item template (image, title, variant, quantity, price)
Subtotal display
Checkout button
Empty cart state
Close button
Properties
Property | Type | Description |
|---|---|---|
Position | Enum | "Right", "Left", or "Bottom" |
Overlay | Boolean | Show dark overlay behind modal |
Close on overlay click | Boolean | Close when clicking outside |
Animation | Enum | "Slide", "Fade", or "None" |
How it works
The cart modal is controlled by the TGC runtime. When a customer clicks a Cart button anywhere on the site, the modal opens automatically.
Canvas: Displays in open state for designing. Switch to closed state using the component variant.
Live site: Opens/closes based on cart button clicks and close actions.
Basic usage
Drag Cart modal section onto your page (usually at root level)
Customise the layout and styling
Add a Cart button somewhere on your page
The button automatically triggers the modal
Customising the cart item
The cart item template inside the modal can be fully styled:
Element | What to customise |
|---|---|
Image | Size, border radius |
Title | Font, size, truncation |
Variant | Font, muted colour |
Quantity controls | Button style, input width |
Price | Font, weight, colour |
Remove button | Icon, size, position |
Empty state
Customise what shows when the cart is empty:
Message text ("Your cart is empty")
Icon or illustration
Call-to-action button ("Continue shopping")
Styling
Element | What to style |
|---|---|
Modal container | Width, background, shadow, padding |
Header | Title, close button position |
Cart list | Spacing between items |
Footer | Subtotal layout, checkout button |
Overlay | Colour, opacity |
Animation | Duration, easing |
Categories list section
A grid of category cards for browsing products by category.
What's included
Category card template
Grid layout with responsive columns
Optional heading
Properties
Property | Type | Description |
|---|---|---|
Display level | Enum | "Top level only", "All", or "Children of [parent]" |
Columns | Number | Items per row (responsive) |
Show images | Boolean | Display category images |
Show product counts | Boolean | Display number of products |
Heading | String | Optional section title |
How it works
Canvas: Displays categories from the CMS snapshot in grid layout.
Live site: Fetches current categories. Clicking a card either filters the current page or navigates to a category page (based on card settings).
Basic usage
Drag Categories list section onto your homepage or shop page
Set Display level to control which categories show
Adjust Columns for your layout
Style the category cards
Display level options
Option | What shows |
|---|---|
Top level only | Parent categories without children |
All | Every category, flat list |
Children of [parent] | Only subcategories of a specific parent |
Use "Top level only" for main navigation. Use "Children of [parent]" on category landing pages to show subcategories.
Styling
Element | What to style |
|---|---|
Section container | Padding, background, max-width |
Heading | Font, size, margin |
Grid | Gap, responsive columns |
Category cards | See Category card component |
Related products section
Display products related to the current product on detail pages.
What's included
Product card grid
Section heading
Optional "View all" link
Properties
Property | Type | Description |
|---|---|---|
Relation type | Enum | "Same category", "Manual", or "Cross-sells" |
Product count | Number | How many products to show |
Columns | Number | Items per row |
Heading | String | Section title (default: "Related products") |
How it works
Canvas: Displays placeholder product cards for layout design.
Live site: Fetches related products from Swell based on the Relation type setting and the current product context.
Basic usage
On your product detail page, drag Related products section below the main product info
Choose your Relation type
Set how many products to display
Style the product cards
Relation types
Type | How products are selected |
|---|---|
Same category | Products sharing a category with the current product |
Manual | Products you've linked in Swell's "Related products" field |
Cross-sells | Products configured as cross-sells in Swell |
Styling
Element | What to style |
|---|---|
Section container | Padding, background |
Heading | Font, size, margin |
Grid | Gap, columns, responsive behaviour |
Product cards | See Product card component |
View all link | Font, colour, position |
Prices section
Display product pricing with sale price support and currency formatting.
What's included
Regular price display
Sale price with strikethrough original
Sale badge (optional)
Currency symbol
Properties
Property | Type | Description |
|---|---|---|
Show original when on sale | Boolean | Strike through original price during sales |
Show sale badge | Boolean | Display "Sale" indicator |
Currency symbol | String | e.g., "$", "£", "€" |
Currency position | Enum | "Before" or "After" amount |
How it works
Canvas: Displays snapshot price from CMS for layout.
Live site: Fetches current price from Swell. Automatically reflects any active sales, discounts, or variant-specific pricing.
Basic usage
On your product detail page, drag Prices section where you want pricing displayed
Configure currency settings
Choose whether to show sale indicators
Style regular and sale price states
Variant pricing
When a customer selects a variant with different pricing, the Prices section updates automatically. No additional setup needed—it subscribes to the variant selection state.
Styling
Element | What to style |
|---|---|
Regular price | Font, size, weight, colour |
Sale price | Font, size, weight, colour (usually bold/accent) |
Original price (struck) | Font, size, muted colour, strikethrough |
Sale badge | Background, text, border radius, position |
Filters section
Complete filtering UI for shop pages with multiple filter types.
What's included
Category filter
Active filters display
Clear all button
Mobile filter toggle (optional)
Properties
Property | Type | Description |
|---|---|---|
Filter types | Multi-select | Which filters to include |
Layout | Enum | "Vertical" (sidebar) or "Horizontal" (toolbar) |
Collapsible | Boolean | Allow filter groups to collapse |
Show active filters | Boolean | Display selected filters as removable pills |
How it works
Canvas: Displays filter UI with sample options for layout design.
Live site: Filter options populate from Swell categories. Selections update the TGC filter state, and product grids respond instantly.
Basic usage
On your shop page, drag Filters section into your sidebar or above the product grid
Choose Layout based on your page design
Configure which filter types to show
Enable Show active filters for easy filter management
Layout options
Layout | Best for |
|---|---|
Vertical | Desktop sidebars, traditional ecommerce layout |
Horizontal | Toolbar above grid, minimal filtering needs |
Active filters
When enabled, selected filters appear as pills that customers can click to remove:
This gives customers quick visibility of active filters and easy removal.
Mobile behaviour
On mobile, vertical filters typically collapse into a "Filter" button that opens a drawer or modal. The Filters section handles this automatically when using responsive breakpoints.
Styling
Element | What to style |
|---|---|
Section container | Padding, background, border |
Filter headings | Font, size, collapsible indicator |
Filter options | See Filter component |
Active filter pills | Background, text, remove icon |
Clear all button | Font, colour |