webdevpuneet.com

Cart Page

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

5 sectionsView all →
Cart, checkout & orders

Cart Page

Responsive · Animated
Cart, checkout & orders

Checkout Page

Responsive · Animated
Cart, checkout & orders

Order Confirmation (Thank You)

Responsive · Animated
Cart, checkout & orders

Order History (My Orders)

Responsive · Animated
Cart, checkout & orders

Wishlist Page

Responsive · Animated

Cart Page — Free Website Section Template

Cart, checkout & orders · v1.0.0 · Updated 2026-11-14 · Responsive · GSAP animation · HTML, React & Vue

CategoryCart, checkout & orders
Tagscartshopping cartecommerceshoppromo codeshippingorder summarycheckoutlight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

Ask an AI assistant to adapt the cart page: add a gift-wrap option, estimated delivery dates, cross-sell products or a shipping calculator by postcode.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Create a shopping cart page in plain HTML, CSS and JavaScript with a cart saved to localStorage.

- Two columns: a list of items on the left (photo, name, options, unit price, quantity stepper, Remove, line total) above a free-shipping progress bar, and a sticky "Order summary" card on the right.
- The summary has a promo code form (valid codes defined in a list such as WELCOME10 = 10% off; show "Code applied" or "Not valid"; a Remove link), subtotal, discount, shipping (flat rate, free over a threshold) and total, then a Go to checkout button disabled when the cart is empty.
- An empty state with a Continue shopping button. Build rows with createElement and textContent only.
- Stack the columns under 900 px.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

Cart rows with photo, options, price, quantity stepper, line total and Remove
Sticky order summary with subtotal, discount, shipping and total
Promo code box with codes written as "CODE | percent"
Remove-code link and clear messages for valid and invalid codes
Flat shipping with a free-shipping threshold and progress bar
Go to checkout button that is disabled for an empty cart
Empty-cart state with a Continue shopping button
Cart saved in the browser and shared with the drawer and checkout
Demo items in the editors
Responsive layout that stacks the summary under the items on phones

About this section

Shopping Cart Page — Free Cart Template With Promo Code

Cart Page: The full shopping cart page. The shopper's items sit on the left with photos, options, quantity steppers and Remove links, above a free-shipping progress bar. On the right a sticky order summary shows the subtotal, a promo code that you define, the shipping cost and the total, with a Checkout button. It reads the shared cart saved in the visitor's browser, so it works with the Product Detail, Product Grid and Cart Drawer sections.

Cart Page is a free shopping cart page for online stores. The shopper's items sit on the left with photos, options, quantity steppers and Remove links, above a free-shipping progress bar. On the right a sticky order summary shows the subtotal, a promo code box, the shipping cost and the total, with a Go to checkout button and a small note. It reads the shared cart, saved in the visitor's browser.

Promo codes you define

Write the valid codes as lines such as WELCOME10 | 10 (ten percent off). The page applies the discount, shows it in the summary with a Remove link and carries it into the checkout and the saved order. A wrong code shows a clear message. Remember that anyone can read the codes in the page source, so your shop must check them again when it takes the order.

Shipping that makes sense

Set a flat shipping cost and a free-shipping threshold. The summary shows the shipping line, "Free" once the threshold is reached, and the total. The same rule is used in the Cart Drawer and the Checkout Page.

Empty and demo states

An empty cart shows a friendly message and a Continue shopping button, and the checkout button is disabled. In the editors the page shows demo items so you can design it.

Edit and export

Edit every label and message, switch the promo box and the shipping bar on or off, and export HTML, a ZIP, React or Vue. Add a recommendation strip under it to raise the order value.

Why use it

Why Use the Cart Page

🧾
A familiar cart layout
Items on the left and a sticky summary on the right is the pattern shoppers already know.
🏷
Promo codes without a backend
Define simple percentage codes on the page and show the discount straight away.
🚚
Clear shipping
A free-shipping bar and a plain shipping line remove the surprise before checkout.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, empty cart, order summary, promo code, shipping & free-shipping bar and labels (screen readers) in the panel. Switch the promo code on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🛍
Small shops
Give a store built from these sections a full cart page with quantity changes, a promo code and a clear total.
🎁
Launch discounts
Offer a welcome or newsletter code and show the saving in the summary, so subscribers see the reward immediately.
📦
Order-by-message businesses
Let customers review and adjust their order before sending it to you by form or WhatsApp, so the message you receive is already correct and complete.
🧪
Testing cart wording
Try different labels, notes and shipping rules on your own cart before committing to a platform, and see how each change reads to a real shopper.

Got questions?

Frequently Asked Questions

You list valid codes in the editor, one per line as CODE | percent. The page checks the typed code against the list and applies the percentage. Because the codes are in the page, your shop should verify them again when the order arrives.

In the browser's localStorage, shared by every shop section on your site. It is not shared between devices and needs no account.

A flat rate, free once the order reaches your threshold after any discount. The checkout page can add other shipping methods with their own costs.

The currency symbol is taken from the product prices, so write them with a symbol such as $, £, € or ₹.

It saves an editable copy of your Cart Page in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.