A lightweight, zero-dependency e-commerce storefront for dropshippers. Sell premium men's apparel directly to customers via WhatsApp with zero backend infrastructure.
Live Demo: Visit Lean Storefront
- Zero-Cost Hosting - Deploy instantly on GitHub Pages
- No Backend Required - Fully static HTML/CSS/JavaScript
- WhatsApp Ordering - Send pre-filled order requests directly to your WhatsApp Business account
- Dynamic Product Catalog - Load products from a simple CSV file
- Category Filtering - Organize products by type (Shirts, Pants, Sweaters, etc.)
- Responsive Design - Mobile-first, works on all devices
- Stock Management - Track sold-out items and limited stock
- Product Showcase - Hero carousel, product cards with images, pricing
- Performance Optimized - Lazy loading, lightweight, fast load times
- GitHub account
- Git installed locally
- Text editor
- Go to github.com/new
- Repository name:
lean-storefront - Description: "Premium men's apparel dropshipping storefront"
- Choose Public (required for GitHub Pages)
- Click Create repository
# Clone the new repository
git clone https://github.com/YOUR_USERNAME/lean-storefront.git
cd lean-storefront
# Copy your project files into this directory
# (Copy index.html, products.csv, Assets folder, etc.)
# Stage, commit, and push
git add .
git commit -m "Initial commit: Lean Storefront setup"
git push -u origin main- Go to your repository on GitHub
- Click Settings → Pages (left sidebar)
- Under "Source", select Deploy from a branch
- Select branch: main, folder: / (root)
- Click Save
Your site will be live at: https://YOUR_USERNAME.github.io/lean-storefront/
lean-storefront/
├── index.html # Main storefront page
├── products.csv # Product catalog data
├── README.md # This file
├── Assets/
│ └── product_images/ # Product images organized by category
│ ├── shirts/
│ ├── top_and_down/
│ └── [other categories]
└── carousel_images/ # Hero carousel images
├── carousel_image1.jpg
├── carousel_image2.jpg
└── carousel_image3.jpg
Edit products.csv with your product data:
name,category,price,image,stock,limited
Premium Shirt,Shirts,45.00,Assets/product_images/shirts/shirt1.jpg,5,false
Limited Edition Hoodie,Top & Down,65.00,Assets/product_images/top_and_down/hoodie1.jpg,2,trueCSV Columns:
name- Product namecategory- Product category (e.g., Shirts, Pants, Sweaters)price- Price in your local currencyimage- Path to product image (relative to index.html)stock- Quantity in stocklimited- Is this a limited edition? (true/false)
- Shirts
- Shorts
- Pants
- Sweaters
- T-shirts
- Slippers
- Bags
- Tracksuits
Add new categories as needed - they'll appear automatically in the filter menu.
All orders are sent via WhatsApp. Update your WhatsApp Business number in index.html:
Find this line in the <script> section:
const WHATSAPP_NUMBER = '*********'; // Replace with your numberReplace with your WhatsApp Business number (include country code, no + sign).
Edit the Tailwind classes in index.html to customize colors:
- Primary Gold:
#d4af37(luxury branding) - Dark Background:
#1a1a1a - Text:
#333/#fff
The site uses:
- Headings: Playfair Display (Georgia serif fallback)
- Body: Poppins (sans-serif)
Update in the <link> tag in the <head> if needed.
Replace carousel images:
- Update
carousel_image1.jpg,carousel_image2.jpg,carousel_image3.jpg - Update image references in the HTML carousel section
After making changes:
# Make your changes (edit products.csv, images, etc.)
# Push to GitHub
git add .
git commit -m "Update: Added new products"
git pushYour GitHub Pages site updates automatically within seconds.
- Image Optimization: Compress product images before uploading (use tinypng.com)
- CSV Size: Keep products.csv under 100KB for best performance
- Mobile Testing: Always test on mobile devices before promoting
- HTML5 - Semantic markup
- CSS3 - Tailwind CSS (via CDN)
- JavaScript (ES6+) - Vanilla JS, no dependencies
- CSV Parsing - Client-side product data loading
- Hosting - GitHub Pages (free, unlimited traffic)
- Double-check Settings → Pages is configured
- Ensure repository is Public
- Wait 2-3 minutes for deployment
- Check
products.csvpath is correct - Verify CSV file uses proper formatting (comma-separated)
- Open browser console (F12) to check for errors
- Verify phone number format includes country code
- Test with a WhatsApp Web session first
- Check browser supports WhatsApp links
This project is free to use and modify for personal or commercial purposes.
Built for zero-budget dropshippers who want a professional storefront without technical overhead. No fees, no backend, no complexity.
Ready to start selling? Create your repo and deploy today! 🚀