---
title: "Framer Shopify Cart & Checkout Components | FrameStoreKit"
canonical_url: "https://framestorekit.com/features/cart-checkout"
last_updated: "2026-10-21T15:06:29.309Z"
meta:
  description: "Cart drawer, discount codes and Shopify checkout for Framer, designed your way in Framer. Shop Pay express on Pro."
  "og:description": "Cart drawer, discount codes and Shopify checkout for Framer, designed your way in Framer. Shop Pay express on Pro."
  "og:title": "Framer Shopify Cart & Checkout Components | FrameStoreKit"
---

FrameStoreKit home

# **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 free](https://framestorekit.com/signup) [Read the docs](https://framestorekit.com/docs)

**Your cart · 2**

**Linen Overshirt**

M · Qty 2

**$136**

**You're $14 away from free shipping**

**Checkout · $136.00**

INCLUDED**8**components · Free + Pro - Add To Cart - Cart Drawer - Cart Line Items - Cart Total - Discount Code Input - Cart Badge - Checkout Button - Express Checkout ## 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****Your cart · 2****Linen Overshirt** M · Qty 2**$136****You're $14 away from free shipping****Checkout · $136.00**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**WELCOME10Apply10% off applied · −$13.6003 ### **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****Buy with Shop Pay****or****Add to cart · $68.00**## 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 ](https://framestorekit.com/components) - **Linen Overshirt**$68.00 Add to cart**Add To Cart****Free**ShopifyAddToCartAdds the selected variant to the Shopify Storefront cart. - **Cart Drawer****Pro**ShopifyCartDrawerProvides a slide-out cart drawer connected to live cart state. - **Linen Overshirt**$68.00×**Sage Mug**$24.00×**Cart Line Items****Free**ShopifyCartLineItemsRenders cart lines with quantity and remove controls. - Subtotal$136.00Discount−$13.60Total**$122.40****Cart Total****Free**ShopifyCartTotalDisplays the cart subtotal and total with discounts applied. - WELCOME10Apply10% off applied · −$13.60**Discount Code Input****Pro**ShopifyDiscountCodeInputApplies discount codes and displays automatic discounts. - 2**Cart Badge****Free**ShopifyCartBadgeShows the live number of items in the cart. - Checkout · $122.40Secure checkout by Shopify**Checkout Button****Free**ShopifyCheckoutButtonSends shoppers to the Shopify hosted checkout. - Buy with ****Shop Pay****or pay another way**Express Checkout****Pro**ShopifyExpressCheckoutAdds 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 ~~**](https://framestorekit.com/docs) 1. **1****Add to cart**Drop Add To Cart on your product page; it uses the selected variant. 2. **2****Place the cart**Use Cart Drawer for a slide-out, or Cart Page for a full page. 3. **3****Show the badge**Put Cart Badge in your nav so shoppers see the count. 4. **4****Hand off to checkout**Checkout Button sends shoppers to Shopify’s hosted checkout. ### **Good to know****Shopify handles payment**Payments, taxes and shipping run on Shopify’s checkout. Nothing to maintain.**Discounts show up front**Codes and automatic discounts appear in the cart before checkout.**Shop Pay on the live site**The Shop Pay button renders on the published site; the canvas shows a preview. ## Cart & checkout questions Still unsure? [**~~Email us~~**](https://framestorekit.com/contact) 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**[**Upsells**All sales tools in one place, plus the rewards bar. Bundles coming soon.](https://framestorekit.com/features/upsells) [**Customer accounts**Login, order history with tracking, addresses and wishlist.](https://framestorekit.com/features/customer-accounts) [**Markets & currency**Local prices from Shopify Markets.](https://framestorekit.com/features/markets) ## **Say yes to the next Shopify project** Start free with 15 products. Upgrade when the client signs. [Start building free](https://framestorekit.com/signup)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.