Components for cart functionality including the drawer, item display, and checkout.

Cart button

Opens the cart drawer and shows the current item count. Typically placed in your site header.

Properties

The item count is rendered automatically by the cart runtime — the (0) text in the button is replaced live with the current cart count. To customise the icon, detach the component.

How it works

Canvas: Shows the button with a static count (or "0") for layout purposes.

Live site: Subscribes to the TGC cart state. Count updates in real-time when items are added or removed.

Basic usage

1. Drag Cart button into your header or navbar

2. Enable Show count to display the badge

3. Connect Cart target to your Cart modal section

When clicked, the button opens the cart drawer/modal.

Count badge

The badge shows the total number of items in the cart (not unique products).

Custom icon

The Cart button uses a fixed text label ("BAG") plus the count by default. To customise the look:

1. Right-click the Cart button on canvas and choose Detach

2. The detached layers become editable — swap the text for an icon, change the layout, etc.

3. Keep the cart count text element intact so the runtime can keep updating it

Styling

Cart list

Container for cart items inside the cart drawer. Repeats the Cart item template for each product.

Properties

How it works

Canvas: Shows placeholder items for layout purposes.

Live site: Subscribes to the TGC cart state. Renders one Cart item for each product in the cart. Updates automatically when items are added, removed, or quantities change.

Basic usage

1. Inside your cart modal/drawer, drag in Cart list

2. The Item template slot contains a Cart item component

3. Customise the Cart item's layout and styling

4. Design the Empty state for when the cart has no items

Empty state

The empty state appears when the cart has no items. Design it to:

• Inform the customer the cart is empty

• Encourage them to continue shopping

• Optionally include a link back to your shop page

Example: "Your cart is empty. [Continue shopping]"

Scrolling behaviour

For carts with many items, wrap the Cart list in a scrollable container:

1. Set a max-height on the Cart list container

2. Set overflow to "scroll" or "auto"

3. The list scrolls while header/footer (subtotal, checkout) stay fixed

Styling

Cart item

Individual item display within the cart list. Shows product image, title, variant, price, and quantity controls.

Properties

How it works

Canvas: Shows placeholder data for layout purposes.

Live site: Receives item data from the parent Cart list. Displays real product info and handles quantity updates and removal.

Basic usage

Cart item is used inside Cart list as the item template. You don't drag it separately — it's already included.

To customise:

1. Select the Cart list component

2. In the layers panel, expand to find the Cart item template

3. Rearrange and style the elements

Displayed information

Quantity controls

When enabled, the +/- buttons allow customers to adjust quantity without leaving the cart:

• + increases quantity by 1

• - decreases quantity by 1 (minimum 1)

• Hitting 0 removes the item (or use the remove button)

Quantity changes update the cart total and Subtotal immediately.

Remove button

The remove button deletes the item from the cart entirely. Consider styling it as:

• A small "×" icon

• A trash icon

• A text link ("Remove")

Styling

Subtotal

Displays the cart total. Typically placed above the checkout button in the cart drawer.

Properties

The Subtotal component has no configurable properties — the value updates automatically from the live cart state. To change the styling (font, size, color, currency symbol), edit the placeholder text element directly using Framer's text controls.

If you need a different layout (label + amount on separate lines, item count alongside, etc.), detach the component and rearrange.

How it works

Canvas: Shows a placeholder amount for layout purposes.

Live site: Subscribes to the TGC cart state. Calculates and displays the sum of all line items. Updates instantly when cart changes.

Basic usage

1. Inside your cart modal/drawer, drag Subtotal below the Cart list

2. Configure your currency symbol

3. Optionally enable Show item count

What's included in the subtotal

The subtotal shows the sum of all line items (quantity × price for each item).

It does not include:

• Shipping (calculated at checkout)

• Tax (calculated at checkout)

• Discounts (applied at checkout)

These are handled by Swell's hosted checkout.

Item count

When Show item count is enabled, display format options:

Styling

Checkout button

Redirect customers to Swell's hosted checkout to complete their purchase.

Properties

How it works

Canvas: Shows the button label for layout purposes.

Live site: When clicked, creates a checkout session in Swell and redirects the customer to Swell's hosted checkout page.

Basic usage

1. Inside your cart modal/drawer, drag Checkout button below the Subtotal

2. Customise the label if needed

3. Enable Disabled when empty to prevent checkout with no items

Checkout flow

When the customer clicks Checkout:

1. Button shows loading state

2. TGC sends cart contents to Swell

3. Swell creates a checkout session

4. Customer is redirected to Swell's hosted checkout

5. Customer completes payment on Swell

6. Swell handles order confirmation and redirect

Why hosted checkout?

Swell's hosted checkout handles:

• PCI compliance for payment processing

• Shipping calculations

• Tax calculations

• Discount/coupon codes

• Order creation and confirmation

This means you don't need to build checkout forms or handle sensitive payment data.

Customising checkout

The hosted checkout uses Swell's default styling. For brand consistency, you can customise checkout in your Swell dashboard under Settings → Checkout.

For full checkout control within Framer, see The Good Checkout (coming soon).

Styling