← Back to all products
$24
E-Commerce Template
E-commerce product showcase template with cart UI, product grid, and checkout flow.
JavaScriptMarkdownJSON
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 7 files
ecommerce-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
E-Commerce Template
An e-commerce product showcase template for small shops, artisans, and direct-to-consumer brands. Features product grids, featured items, reviews, and a contact section.
Price
$24 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with featured product or collection
- Product grid with prices, images, and quick-view
- Featured / bestseller highlights
- Category navigation
- Customer reviews and ratings
- Newsletter signup for promotions
- Contact and support section
- Footer with policies, social links
What's Included
ecommerce-template/
├── index.html # Main HTML (all sections + cart drawer + checkout modal)
├── style.css # Complete styling + dark mode + responsive
├── script.js # Theme, cart system, checkout flow, category filter
├── assets/
│ └── README.md # Image replacement guide
├── manifest.json # Product file manifest
├── README.md # This file
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your products and brand
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/* ============================================================
Artisan & Co — E-Commerce Template
script.js
============================================================
Handles: Theme Toggle, Scroll Reveal, Mobile Navigation,
Smooth Scroll, Header Effect, Category Filter, Shopping Cart,
Cart Drawer, Quick-View Modal, Checkout Flow, Newsletter.
Zero dependencies — pure vanilla JavaScript.
============================================================ */
(function () {
'use strict';
/* ----------------------------------------------------------
PRODUCT DATA
Edit this array to change the store's inventory. Each id
must match the data-id attributes in the HTML product cards.
---------------------------------------------------------- */
const PRODUCTS = [
{ id: 1, name: 'Minimalist Watch', price: 89, category: 'accessories', desc: 'Clean dial, Italian leather strap, Japanese quartz movement. Water-resistant to 30 meters.', gradient: 'linear-gradient(135deg,#6366f1,#a78bfa)' },
{ id: 2, name: 'Canvas Backpack', price: 65, category: 'bags', desc: 'Waxed canvas, leather trim, padded laptop sleeve. Water-resistant and built to last.', gradient: 'linear-gradient(135deg,#059669,#34d399)' },
{ id: 3, name: 'Ceramic Mug Set', price: 34, category: 'home', desc: 'Set of 4 hand-glazed stoneware mugs. Microwave and dishwasher safe. Each one unique.', gradient: 'linear-gradient(135deg,#d97706,#fbbf24)' },
{ id: 4, name: 'Leather Wallet', price: 48, category: 'accessories', desc: 'Full-grain leather, RFID blocking, slim profile with 6 card slots and a bill compartment.', gradient: 'linear-gradient(135deg,#92400e,#d97706)' },
{ id: 5, name: 'Wool Throw Blanket', price: 120, category: 'home', desc: 'Merino wool blend, herringbone weave, 150×200cm. Naturally temperature-regulating.', gradient: 'linear-gradient(135deg,#7c3aed,#c084fc)' },
{ id: 6, name: 'Linen Tote Bag', price: 38, category: 'bags', desc: 'Organic linen, reinforced handles, inner pocket. Machine washable and eco-friendly.', gradient: 'linear-gradient(135deg,#0891b2,#67e8f9)' },
{ id: 7, name: 'Desk Organizer', price: 55, category: 'home', desc: 'Handcrafted walnut wood with cable management, pen holder, and minimalist design.', gradient: 'linear-gradient(135deg,#be185d,#f472b6)' },
{ id: 8, name: 'Sunglasses', price: 75, category: 'accessories', desc: 'Polarized lenses, acetate frame, UV400 protection. Lightweight at only 28 grams.', gradient: 'linear-gradient(135deg,#1e3a5f,#3b82f6)' },
];
/* ----------------------------------------------------------
1. THEME TOGGLE
Persists to localStorage; falls back to prefers-color-scheme.
---------------------------------------------------------- */
const Theme = {
KEY: 'theme',
toggle: null,
init() {
this.toggle = document.getElementById('theme-toggle');
if (!this.toggle) return;
const saved = localStorage.getItem(this.KEY);
const preferred = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
this.apply(preferred);
this.toggle.addEventListener('click', () => {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
this.apply(next);
localStorage.setItem(this.KEY, next);
});
},
apply(theme) {
document.documentElement.setAttribute('data-theme', theme);
# ... 454 more lines ...