Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
E-Commerce Product Page Template
Give your customers a best-in-class shopping experience with this polished product page template. Every conversion element is included — from the sticky buy box to the social proof review section.
Feature Highlights
- Image GalleryMain image with 4 thumbnail swappers. Zoom on hover (CSS transform scale).
- Color + Size SelectorsVisual swatch pickers for color variants, button-group selectors for sizes with out-of-stock state.
- Animated Add-to-CartButton morphs to checkmark on click, shakes on error, disabled during cooldown.
- Reviews Section5-star breakdown bar chart + 5 customer reviews with avatar, date, verified badge.
- Tabbed Product DetailsDescription / Specifications / Shipping / Reviews tabs with smooth fade transition.
- Trust BadgesSVG badge row: Free Shipping / 30-Day Returns / Secure Checkout / Authentic.
- Related Products3-card carousel with image, name, price, and quick-add button.
- Size Chart ModalResponsive measurement table opens in an accessible modal. Inches and cm columns.
What’s Included
- product.html — full product detail page
- style.css — clean e-commerce stylesheet
- product.js — gallery, selectors, cart animation, modal, tabs
- /assets/ — 4 demo product images, avatar photos
- README.md — how to adapt for your product and connect to a cart
Tech Stack
- Pure HTML5 + CSS3
- Vanilla JS
- Google Fonts — Inter
- CSS Grid + Flexbox
- No framework required
- Cart-agnostic
Perfect For
- Shopify / WooCommerce stores replacing default product templates
- E-commerce startups building a bespoke storefront
- Dropshippers launching a high-converting product page
- Brands selling a hero product with zero CMS overhead
- Developers prototyping an e-commerce UI quickly
Frequently Asked Questions
Does it include cart functionality?
＋
The template includes a fully styled cart drawer and product grid. Actual inventory management and checkout require integration with Shopify, WooCommerce, or a headless commerce API.
Can I connect it to Shopify?
＋
Yes. The markup maps cleanly to Shopify’s Liquid templating engine. Convert each HTML section to a .liquid file and pull in your product data via Shopify objects.
Are the product images placeholders?
＋
Yes — the demo uses royalty-free placeholder images. Every <img src> is clearly marked in the HTML for easy replacement with your actual product photography.
Is the search bar functional?
＋
The search input is styled and keyboard-accessible. Powering it with real results requires a back-end search endpoint or a client-side search library like Fuse.js.
Can I add product reviews?
＋
The template includes a review display section. Collecting and storing new reviews needs a service like Yotpo, Okendo, or a custom reviews API.
Ethan D. –
Every section a hospitality site needs: reservations CTA, chef spotlight, gallery grid, and opening hours card. The warm color palette is tasteful and easy to remap to any brand. Five stars.
Chloe N. –
Beautiful design that works really well for cafes and bistros. The testimonial section with large quote marks is elegant. I would have liked a drinks/cocktails menu variant but the existing layout adapts easily enough.
Isabella G. –
The full-screen hero with parallax food photography background immediately sets the right mood. Menu section with category tabs and price layout is exactly what restaurants expect. My client was thrilled.
Mateo A. –
Used this for a fine-dining client and they signed off on the design in one round of revisions — unheard of. The reservation form is well-structured and the sticky nav on scroll looks premium. Excellent purchase.