Cart Alpha

overview

A two-column cart template with a sticky sidebar.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Cart Alpha is our first shopping cart frame, allowing you to add a custom cart template to any e-commerce project quickly.

It features a two-column layout. The main column lists all the products in the cart and allows the buyer to update quantities, while the sidebar displays the coupon field, subtotal, final total, and checkout button.

The sidebar is sticky, so if there are many items in the cart, the sidebar will follow the user down the page, keeping the checkout button and totals in constant view.

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--total-font-size

Controls the font size for the cart total

--subtotal-font-size

Controls the font size for the cart subtotal

--button-color

Controls the background color for the button

--button-color-hover

Controls the hover background color for the button

--button-text

Controls the button text color for the button

--button-text-hover

Controls the button text hover color for the button

HTML5 Tags & Attributes

form

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

No related frames.

FAQs

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.