A cart that matches the site, and Shopify’s checkout

Cart drawer, line items, discount codes and totals designed in Framer, not a theme. Checkout runs on Shopify, with Shop Pay express on Pro.

Start building freeRead the docs

What you can build with cart & checkout

Cart drawer, discount codes, Shopify checkout and Shop Pay.

01

A cart that looks like the site

A slide-out drawer or a full cart page, with line items, quantities and totals in your type and colors.

  • Cart drawer or cart page
  • Line items and quantities
  • Cart badge in the nav
02

Discounts before checkout

Discount codes and automatic Shopify discounts show in the cart, so shoppers see the final price before they pay.

  • Discount code input
  • Automatic discounts
  • Final total up front
03

Shopify’s checkout and Shop Pay

Checkout runs on Shopify, with payments, tax and shipping handled there. Pro adds Shop Pay express on the product page and cart.

  • Shopify hosted checkout
  • Shop Pay express (Pro)
  • Nothing to maintain

The 8 components

Open the FrameStoreKit plugin, drag one onto the canvas and style it in the right panel. Shopify data flows in.

All components
  • Add To CartFreeShopifyAddToCartAdds the selected variant to the Shopify Storefront cart.
  • Cart DrawerProShopifyCartDrawerProvides a slide-out cart drawer connected to live cart state.
  • Cart Line ItemsFreeShopifyCartLineItemsRenders cart lines with quantity and remove controls.
  • Cart TotalFreeShopifyCartTotalDisplays the cart subtotal and total with discounts applied.
  • Discount Code InputProShopifyDiscountCodeInputApplies discount codes and displays automatic discounts.
  • Cart BadgeFreeShopifyCartBadgeShows the live number of items in the cart.
  • Checkout ButtonFreeShopifyCheckoutButtonSends shoppers to the Shopify hosted checkout.
  • Express CheckoutProShopifyExpressCheckoutAdds a Shop Pay accelerated checkout button with a checkout fallback.

Set up in 4 steps

The onboarding wizard walks you through it. The docs cover every Shopify setting with screenshots.

Cart & checkout guide
  1. 1Add to cartDrop Add To Cart on your product page; it uses the selected variant.
  2. 2Place the cartUse Cart Drawer for a slide-out, or Cart Page for a full page.
  3. 3Show the badgePut Cart Badge in your nav so shoppers see the count.
  4. 4Hand off to checkoutCheckout Button sends shoppers to Shopify’s hosted checkout.

Good to know

Shopify handles paymentPayments, taxes and shipping run on Shopify’s checkout. Nothing to maintain.
Discounts show up frontCodes and automatic discounts appear in the cart before checkout.
Shop Pay on the live siteThe Shop Pay button renders on the published site; the canvas shows a preview.

Cart & checkout questions

Still unsure? Email us and a Framer + Shopify person will reply, usually the same day.

Checkout is Shopify’s hosted checkout, styled in your Shopify admin. Everything before it is designed in Framer.

Related features

UpsellsAll sales tools in one place, plus the rewards bar. Bundles coming soon.Customer accountsLogin, order history with tracking, addresses and wishlist.Markets & currencyLocal prices from Shopify Markets.

Say yes to the next Shopify project

Start free with 15 products. Upgrade when the client signs.

Start building free