webdevpuneet.com

Wishlist Page

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

Related Section Templates

5 sectionsView all →
Cart, checkout & orders

Wishlist Page

Responsive · Animated
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

Wishlist Page — Free Website Section Template

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

CategoryCart, checkout & orders
Tagswishlistsaved itemsfavouritesecommerceshopadd to cartlight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

Ask an AI assistant to adapt the wishlist: add share links, price-drop alerts, moving items between lists or syncing with a user account.

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 wishlist page in plain HTML, CSS and JavaScript that reads saved products from localStorage.

- A heading with an "Add all to cart" button, then a responsive grid (4, 3, 2, 1 columns) of cards: a 4:5 image, the name linked to the product, the price, an Add to cart button and a Remove link.
- An empty state with a heart icon, a short message and a button to the shop.
- Heart buttons elsewhere on the site toggle products in the same list (aria-pressed) and a header badge shows the count. Build the DOM with createElement and textContent only.

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

Saved products as cards with photo, name, price, Add to cart and Remove
Add all to cart action
Hearts on product pages, listings, grids and strips stay in sync
Heart count badge in the mega menu header
Wishlist saved in the browser, no account needed
Friendly empty state with a link to the shop
Demo products in the editors
Add to cart opens the cart drawer or shows a short message
Responsive grid from four columns down to one

About this section

Wishlist Page — Free Saved Items Template for Shops

Wishlist Page: A wishlist page for the products a shopper saved with the heart button. Each saved product is a card with its photo, name and price, an Add to cart button and a Remove link, with an Add all to cart action at the top. The wishlist is kept in the visitor's browser, so no account is needed, and the heart on the Product Detail, Product Grid and mega menu stays in sync with it.

Wishlist Page is a free page for the products a shopper saved with the heart button. Each saved product is a card with its photo, name and price, an Add to cart button and a Remove link, with an Add all to cart action at the top. The wishlist is kept in the visitor's browser, so no account is needed, and the hearts on the Product Detail Page, the Product Listing, the Product Grid and the mega menu stay in sync with it.

Hearts that remember

Press a heart anywhere and the product is saved; reload the page and the heart is still filled. The heart in the header shows how many items are saved, and removing an item from the wishlist page un-fills its heart everywhere.

From saved to bought

Add to cart opens the cart drawer or shows a short message, and Add all to cart moves the whole list into the cart in one go, which suits gift lists and "buy later" shoppers.

Friendly when empty

An empty wishlist shows a heart icon, a short explanation of how to save things and a button to the shop. In the editors the page shows demo products.

Edit and export

Edit every label and message, and export HTML, a ZIP, React or Vue.

Why use it

Why Use the Wishlist Page

❤
Save for later
Shoppers who are not ready to buy can keep products and come back, which brings them back to your shop.
🔄
In sync everywhere
Every heart reads the same saved list, so what is saved on one page shows on all of them.
🎁
Great for gift lists
Add all to cart turns a list of ideas into an order in one click.

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, cards and empty wishlist in the panel. 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

🛍
Online stores
Give shoppers a place to keep products they like while they compare, with an easy path from saved to cart.
🎁
Gift shopping
Let customers collect ideas for a birthday or holiday and add the whole list to the cart when they decide.
🏠
Furniture and decor
Shoppers save pieces for different rooms and come back to buy over days or weeks, with their favourites waiting in one tidy list.
🧪
Prototyping favourites
Try a favourites feature and design its page before building it into a larger shop, using your own products and the same heart buttons.

Got questions?

Frequently Asked Questions

In the visitor's browser (localStorage), so it works without an account and survives reloads. It is not shared between devices.

Every heart reads the same saved list and shows a filled state when its product is on it, so the product page, listing, grid and wishlist page always agree.

Not in the plain version, because the list lives in one browser. Sharing needs accounts or a server, which are on the roadmap.

It adds every saved product to the cart once and opens the cart drawer, leaving the wishlist as it is.

It saves an editable copy of your Wishlist 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.