RSK World - E-commerce Product Page | Image Gallery, Cart, Wishlist, Compare | RSK World

Image Gallery Cart & Wishlist Compare & Quick View Reviews & Tabs Bootstrap 5

E-commerce Product Page is a single-page product template with interactive image gallery, shopping cart, wishlist, and compare. Includes: main product (Premium Wireless Headphones) with color/quantity options; thumbnail gallery and image zoom; add to cart, wishlist, compare (up to 3 products); quick view for related products; search (main + related); customer reviews form and list; tabs (Specifications, Reviews, Shipping & Returns, Size chart); login/register modals (mock); local storage for cart, wishlist, compare; keyboard shortcuts (Ctrl+K search, Ctrl+C cart, Escape close); toast notifications. Files: index.html, css/style.css, js/script.js, js/product-filter.js, js/image-zoom.js, js/customer-account.js, js/recommendation-engine.js. By rskworld.in.

If you find this E-commerce Product Page project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download E-commerce Product Page

Image Gallery & Product Details

Main product image with thumbnail gallery; changeImage() switches main image with fade. image-zoom.js: ImageZoom class for click-to-zoom, lens hover, zoom controls (in/out/reset), keyboard and touch. Product: Premium Wireless Headphones with color (black/white/blue), quantity (1–10), price, discount badge, features list, shipping info.

script.js: changeImage(), updateThumbnailActiveState() – main image and thumbnail sync; setDefaultImage() on load.
image-zoom.js: ImageZoom – fullscreen zoom on click, lens on hover, zoom in/out/reset/close; keyboard (+/-/0/Escape), mouse wheel, touch pinch.
Product options: selectColor(), increaseQuantity(), decreaseQuantity(), validateQuantity() – color buttons and quantity input with min/max 1–10.
Product data in script.js: product and relatedProducts objects; currentImage, selectedColor, selectedQuantity globals.
Tabs: Specifications, Reviews, Shipping & Returns, Size chart – Bootstrap tabs with technical specs, review form, shipping/return policy, headphone size guide.

Project Structure & Files

Root: index.html (product page, gallery, modals for cart, wishlist, compare, quick view, search, login, register). CSS: css/style.css (layout, product section, modals, toasts, responsive). JS: script.js (cart, wishlist, compare, search, reviews), product-filter.js, image-zoom.js, customer-account.js, recommendation-engine.js. No build step.

index.html – product section, related products, breadcrumb, tabs; modals: cart, wishlist, comparison, quick view, search, login, register.
css/style.css – CSS variables, product gallery, cart/wishlist items, toasts, image zoom and 360 viewer styles, filter and recommendation cards.
js/script.js – cart (add/remove/update, localStorage), wishlist, compare (max 3), quick view, search, reviews, share, keyboard shortcuts, toasts.
js/product-filter.js, image-zoom.js, customer-account.js, recommendation-engine.js – filter/sort catalog, zoom, login/register/order tracking, recommendations.
LICENSE (MIT) and README.md included – free to use, modify, and distribute. By rskworld.in.

Cart, Wishlist & Compare

script.js: addToCart(), removeFromCart(), updateCartDisplay(), updateCartItemQuantity(); wishlist add/remove/moveToCart/clearWishlist; compare add/remove/clear (max 3). All persisted in localStorage (rskworld_cart, rskworld_wishlist, rskworld_compare). Checkout simulates order and clears cart.

Cart: cart array with id, name, price, image, color, quantity, timestamp; merge same product+color; modal with line items, total, checkout button.
Wishlist: wishlist array; move to cart from modal; clear wishlist; badge count in header.
Compare: compareList (max 3); side-by-side cards with image, price, description, features; add from main product or related products.
Local storage: saveCartToStorage(), loadCartFromStorage(); same for wishlist and compare – data persists across sessions.
Toast notifications: showToast(message, type) for success, error, warning, info; Bootstrap toasts, auto-hide.

Quick View, Search & Reviews

quickView(productId) opens modal with related product image, price, description, features, quantity; addToCartFromQuickView() adds to cart and opens cart modal. performSearch() searches main product and related by name/description/features; results in search modal. Review form: star rating, name, text; submit adds review block to page.

Quick view: currentQuickViewProduct; modal with quantity; Add to Cart from quick view then show cart.
Search: searchInput + searchBtn; search in product + relatedProducts; displaySearchResults() in modal with Quick View button.
Reviews: initializeReviewForm(), updateRatingDisplay(), submitReview(); stars click/hover; new review appended to reviews section.
Keyboard: Ctrl/Cmd+K focus search, Ctrl/Cmd+C cart, Ctrl/Cmd+W wishlist, Escape close modals.
Share: shareProduct() uses navigator.share or clipboard fallback.

Customer Account & Extras

customer-account.js: CustomerAccount – login/register modals, mock API (demo@rskworld.in / demo123), localStorage auth; OrderTracking for order ID + email with timeline. recommendation-engine.js: RecommendationEngine – content/collaborative/popular/similar/trending recommendations; tracks views, cart, search.

Login/Register: handleLogin(), handleRegister(); users in localStorage; nav shows user name and logout when authenticated.
OrderTracking: getTrackingInfo() mock for ORD-001 + demo@rskworld.in; displayTrackingInfo() with timeline.
RecommendationEngine: getRecommendations(type, limit); updates sections by ID (if present in HTML); similarity vectors, user behavior tracking.
product-filter.js: ProductFilter class – catalog, filters (category, price, brand, rating), sort; renders to #filteredProducts (optional).
Image zoom and optional 360° viewer (ProductViewer360) – drag to rotate when #product-360-viewer exists.

What You Get

Static HTML/CSS/JS: index.html, css/style.css, js/script.js, js/product-filter.js, js/image-zoom.js, js/customer-account.js, js/recommendation-engine.js, LICENSE, README. No build step. Open index.html or serve folder. Technologies: HTML5, Bootstrap 5, Vanilla JS. © 2026 RSK World.

Complete source – all HTML, CSS and JS files ready to copy, customize, or embed in your e-commerce or product page project.
No build step – open index.html in a browser or serve the folder (e.g. npm run start with serve); no bundler required.
README.md with usage, features, customization – product object, styling, images, contact info, browser support, responsive breakpoints.
Technologies: HTML5, Bootstrap 5, Font Awesome 6, Vanilla JS – works in all modern browsers. © 2026 RSK World.
MIT License – free to use, modify, and distribute; suitable for personal, educational, and commercial projects.

Usage

Open index.html to use the product page. Select color and quantity, add to cart or wishlist, compare products, use quick view on related items. Search in header; submit reviews in Reviews tab. Login/Register for demo (demo@rskworld.in / demo123). Cart and wishlist persist in localStorage.

index.html – single product page (Premium Wireless Headphones) with gallery, options, cart, wishlist, compare, related products; open in browser to use.
Add to Cart / Wishlist / Compare – buttons update counts and open modals; data saved in localStorage.
Live Demo link – points to ./index.html when file exists; View Files to browser.php for file listing.
Author: RSK World | rskworld.in – free UI/UX and e-commerce project; contact for customization or integration.

Project Features

Interactive image gallery with zoom; shopping cart with add/remove/update quantity; wishlist and compare (up to 3); quick view for related products; search; customer reviews; login/register (mock); local storage; keyboard shortcuts; toast notifications; Bootstrap 5; responsive; specifications, shipping, size chart tabs. Vanilla JS.

Product page: image gallery, color/quantity, add to cart, wishlist, compare, share; tabs for specs, reviews, shipping, size chart.
Cart, wishlist, compare – full CRUD, modal UIs, localStorage persistence; checkout simulation.
Quick view, search, reviews – related products quick view and add to cart; search modal; star rating and review form.
Bootstrap 5, responsive, toasts, keyboard shortcuts – modern UI; works on desktop and mobile.

Credits & Acknowledgments

E-commerce Product Page by RSK World. Single-page product template with image gallery, cart, wishlist, compare, and vanilla JS for learning front-end e-commerce UI.

E-commerce Product Page – image gallery, shopping cart, wishlist, compare, quick view, search, reviews. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX and e-commerce demos.
Author: Molla Samser (Founder - RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons; Bootstrap – CSS/JS framework; Prism.js – Syntax highlighting in file browser.
Razorpay – Payment integration; QR Server API – UPI QR code generation.
© 2026 RSK World. All rights reserved. E-commerce Product Page is provided under MIT License for educational and commercial use.

Support & Contact

For E-commerce Product Page customization or integration help, please contact us.

Email: help@rskworld.in – for E-commerce Product Page customization, integration into your store, or general front-end questions.
Phone: +91 93305 39277 – direct contact for support, custom e-commerce features, or bulk licensing inquiries.
Website: RSKWORLD.in – more free UI/UX and e-commerce projects by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base for development and support.
Author: Molla Samser (Founder, RSK World) – creator of E-commerce Product Page and other educational projects.
E-commerce Product Page – README and documentation included for features, file structure, and usage.
Technical Support Available – get help with cart, wishlist, compare, or styling integration.
UI Component Requests Welcome – suggest new product page features or e-commerce modules for future demos.