Product Page Generator
Create professional e-commerce product pages with all the essential elements
Product Page Generator
Create professional e-commerce product pages with all the essential elements
Live Preview
Generated Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Wireless Headphones | TechAudio</title>
<meta name="description" content="Experience crystal-clear audio with our premium wireless headphones featuring active noise cancellation and 30-hour battery life.">
<style>
:root {
--primary-color: #4F46E5;
--primary-hover: #4F46E5dd;
--badge-color: #10B981;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1f2937;
background: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.breadcrumb {
padding: 15px 0;
font-size: 14px;
color: #6b7280;
}
.breadcrumb a {
color: #6b7280;
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--primary-color);
}
.product-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 40px 0;
}
@media (max-width: 768px) {
.product-section {
grid-template-columns: 1fr;
gap: 30px;
}
}
.product-gallery {
position: relative;
}
.product-badge {
position: absolute;
top: 15px;
left: 15px;
background: var(--badge-color);
color: white;
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
z-index: 10;
}
.main-image {
width: 100%;
border-radius: 12px;
margin-bottom: 15px;
}
.thumbnail-gallery {
display: flex;
gap: 10px;
}
.thumbnail {
width: 80px;
height: 80px;
border-radius: 8px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
object-fit: cover;
}
.thumbnail:hover,
.thumbnail.active {
opacity: 1;
transform: scale(1.05);
}
.product-info h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
color: #111827;
}
.product-brand {
color: var(--primary-color);
font-weight: 500;
margin-bottom: 15px;
}
.product-rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.stars {
color: #fbbf24;
font-size: 18px;
}
.rating-count {
color: #6b7280;
font-size: 14px;
}
.product-price {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.current-price {
font-size: 36px;
font-weight: 700;
color: #111827;
}
.compare-price {
font-size: 20px;
color: #9ca3af;
text-decoration: line-through;
}
.discount-badge {
background: #dc2626;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
}
.short-description {
color: #4b5563;
margin-bottom: 25px;
font-size: 16px;
}
.product-options {
margin-bottom: 25px;
}
.option-group {
margin-bottom: 20px;
}
.option-label {
font-weight: 600;
margin-bottom: 10px;
color: #374151;
}
.option-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.option-btn {
padding: 10px 20px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.option-btn:hover,
.option-btn.selected {
border-color: var(--primary-color);
color: var(--primary-color);
}
.quantity-selector {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.qty-btn {
width: 40px;
height: 40px;
border: 2px solid #e5e7eb;
background: white;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.qty-input {
width: 60px;
height: 40px;
text-align: center;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
}
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 25px;
}
.btn-cart {
flex: 1;
min-width: 150px;
padding: 16px 32px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.btn-cart:hover {
background: var(--primary-hover);
}
.btn-buy {
flex: 1;
min-width: 150px;
padding: 16px 32px;
background: #111827;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.btn-buy:hover {
background: #374151;
}
.secondary-actions {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.action-link {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
text-decoration: none;
font-size: 14px;
cursor: pointer;
}
.action-link:hover {
color: var(--primary-color);
}
.stock-status {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #dcfce7;
color: #166534;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: #f9fafb;
border-radius: 10px;
}
.feature-icon {
font-size: 24px;
}
.feature-title {
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
.feature-desc {
font-size: 14px;
color: #6b7280;
}
/* Tabs Section */
.tabs-section {
padding: 60px 0;
border-top: 1px solid #e5e7eb;
}
.tabs-nav {
display: flex;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 30px;
overflow-x: auto;
}
.tab-btn {
padding: 15px 25px;
background: none;
border: none;
font-size: 16px;
font-weight: 500;
color: #6b7280;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
}
.tab-btn:hover,
.tab-btn.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.long-description {
color: #4b5563;
max-width: 800px;
}
.long-description h3 {
color: #111827;
margin: 25px 0 15px;
}
.specs-table {
width: 100%;
max-width: 600px;
border-collapse: collapse;
}
.specs-table tr {
border-bottom: 1px solid #e5e7eb;
}
.specs-table td {
padding: 15px 0;
}
.specs-table td:first-child {
font-weight: 500;
color: #374151;
width: 40%;
}
.specs-table td:last-child {
color: #6b7280;
}
/* Reviews */
.reviews-summary {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 30px;
padding: 25px;
background: #f9fafb;
border-radius: 12px;
}
.avg-rating {
text-align: center;
}
.avg-rating-number {
font-size: 48px;
font-weight: 700;
color: #111827;
}
.review-card {
padding: 25px;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 20px;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.review-author {
font-weight: 600;
color: #111827;
}
.review-date {
color: #9ca3af;
font-size: 14px;
}
.review-stars {
color: #fbbf24;
margin-bottom: 12px;
}
.review-text {
color: #4b5563;
}
/* FAQ */
.faq-item {
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 15px;
overflow: hidden;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #f9fafb;
cursor: pointer;
font-weight: 500;
}
.faq-answer {
padding: 20px;
color: #4b5563;
display: none;
}
.faq-item.open .faq-answer {
display: block;
}
/* Related Products */
.related-section {
padding: 60px 0;
background: #f9fafb;
}
.section-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 30px;
color: #111827;
}
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
@media (max-width: 768px) {
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.related-card {
background: white;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.related-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.related-card-info {
padding: 15px;
}
.related-card-title {
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.related-card-price {
color: var(--primary-color);
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<nav class="breadcrumb">
<a href="/">Home</a> / <a href="/category">Electronics</a> / Premium Wireless Headphones
</nav>
<section class="product-section">
<div class="product-gallery">
<div class="product-badge">Best Seller</div>
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22600%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22600%22 height=%22600%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2224%22 fill=%22%23999%22%3EProduct Image%3C/text%3E%3C/svg%3E" alt="Premium Wireless Headphones" class="main-image" id="mainImage">
<div class="thumbnail-gallery">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22600%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22600%22 height=%22600%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2224%22 fill=%22%23999%22%3EProduct Image%3C/text%3E%3C/svg%3E" alt="Premium Wireless Headphones" class="thumbnail active" onclick="changeImage(this)">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22400%22 height=%22400%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2216%22 fill=%22%23999%22%3EView 2%3C/text%3E%3C/svg%3E" alt="Premium Wireless Headphones view 2" class="thumbnail" onclick="changeImage(this)">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22400%22 height=%22400%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2216%22 fill=%22%23999%22%3EView 3%3C/text%3E%3C/svg%3E" alt="Premium Wireless Headphones view 3" class="thumbnail" onclick="changeImage(this)">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22400%22 height=%22400%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2216%22 fill=%22%23999%22%3EView 4%3C/text%3E%3C/svg%3E" alt="Premium Wireless Headphones view 4" class="thumbnail" onclick="changeImage(this)">
</div>
</div>
<div class="product-info">
<p class="product-brand">TechAudio</p>
<h1>Premium Wireless Headphones</h1>
<div class="product-rating">
<span class="stars">★★★★☆</span>
<span class="rating-count">4.5 (128 reviews)</span>
</div>
<div class="product-price">
<span class="current-price">$149.99</span>
<span class="compare-price">$199.99</span>
<span class="discount-badge">-25%</span>
</div>
<p class="short-description">Experience crystal-clear audio with our premium wireless headphones featuring active noise cancellation and 30-hour battery life.</p>
<div class="option-group">
<p class="option-label">Color</p>
<div class="option-buttons">
<button class="option-btn selected" onclick="selectOption(this)">Black</button>
<button class="option-btn" onclick="selectOption(this)">White</button>
<button class="option-btn" onclick="selectOption(this)">Navy Blue</button>
</div>
</div>
<div class="quantity-selector">
<span class="option-label">Quantity:</span>
<button class="qty-btn" onclick="updateQty(-1)">−</button>
<input type="number" class="qty-input" value="1" min="1" id="qtyInput">
<button class="qty-btn" onclick="updateQty(1)">+</button>
</div>
<div class="action-buttons">
<button class="btn-cart">Add to Cart</button>
<button class="btn-buy">Buy Now</button>
</div>
<div class="secondary-actions">
<a class="action-link">❤️ Add to Wishlist</a>
<a class="action-link">📤 Share</a>
</div>
<div class="stock-status">
✓ In Stock (50 available)
</div>
<div class="features-grid">
<div class="feature-item">
<span class="feature-icon">🎵</span>
<div>
<p class="feature-title">Hi-Fi Sound</p>
<p class="feature-desc">40mm premium drivers</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon">🔇</span>
<div>
<p class="feature-title">Noise Cancellation</p>
<p class="feature-desc">Advanced ANC technology</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon">🔋</span>
<div>
<p class="feature-title">30hr Battery</p>
<p class="feature-desc">All-day listening</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon">📱</span>
<div>
<p class="feature-title">Bluetooth 5.3</p>
<p class="feature-desc">Seamless connectivity</p>
</div>
</div>
</div>
</div>
</section>
<section class="tabs-section">
<div class="tabs-nav">
<button class="tab-btn active" onclick="showTab('description')">Description</button>
<button class="tab-btn" onclick="showTab('specifications')">Specifications</button>
<button class="tab-btn" onclick="showTab('reviews')">Reviews</button>
<button class="tab-btn" onclick="showTab('faq')">FAQ</button>
</div>
<div class="tab-content active" id="description">
<div class="long-description">
Immerse yourself in your favorite music with our flagship wireless headphones. Featuring advanced 40mm drivers, active noise cancellation, and premium memory foam ear cushions for all-day comfort. The intuitive touch controls and voice assistant integration make operation effortless.
</div>
</div>
<div class="tab-content" id="specifications">
<table class="specs-table">
<tr>
<td>Driver Size</td>
<td>40mm</td>
</tr>
<tr>
<td>Frequency Response</td>
<td>20Hz - 20kHz</td>
</tr>
<tr>
<td>Battery Life</td>
<td>30 hours (ANC on)</td>
</tr>
<tr>
<td>Charging Time</td>
<td>2 hours</td>
</tr>
<tr>
<td>Bluetooth Version</td>
<td>5.3</td>
</tr>
<tr>
<td>Weight</td>
<td>250g</td>
</tr>
</table>
</div>
<div class="tab-content" id="reviews">
<div class="reviews-summary">
<div class="avg-rating">
<div class="avg-rating-number">4.5</div>
<div class="stars">★★★★☆</div>
<p>128 reviews</p>
</div>
</div>
<div class="review-card">
<div class="review-header">
<span class="review-author">John D.</span>
<span class="review-date">2024-01-15</span>
</div>
<div class="review-stars">★★★★★</div>
<p class="review-text">Amazing sound quality! The noise cancellation is incredible.</p>
</div>
<div class="review-card">
<div class="review-header">
<span class="review-author">Sarah M.</span>
<span class="review-date">2024-01-10</span>
</div>
<div class="review-stars">★★★★☆</div>
<p class="review-text">Very comfortable for long listening sessions. Battery life is great.</p>
</div>
</div>
<div class="tab-content" id="faq">
<div class="faq-item" onclick="toggleFaq(this)">
<div class="faq-question">
What is the warranty period?
<span>+</span>
</div>
<div class="faq-answer">2 years manufacturer warranty included.</div>
</div>
<div class="faq-item" onclick="toggleFaq(this)">
<div class="faq-question">
Is there a return policy?
<span>+</span>
</div>
<div class="faq-answer">30-day hassle-free returns.</div>
</div>
</div>
</section>
</div>
<section class="related-section">
<div class="container">
<h2 class="section-title">You May Also Like</h2>
<div class="related-grid">
<div class="related-card">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22300%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2214%22 fill=%22%23999%22%3ERelated 1%3C/text%3E%3C/svg%3E" alt="Related Product">
<div class="related-card-info">
<p class="related-card-title">Related Product 1</p>
<p class="related-card-price">$99.99</p>
</div>
</div>
<div class="related-card">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22300%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2214%22 fill=%22%23999%22%3ERelated 2%3C/text%3E%3C/svg%3E" alt="Related Product">
<div class="related-card-info">
<p class="related-card-title">Related Product 2</p>
<p class="related-card-price">$79.99</p>
</div>
</div>
<div class="related-card">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22300%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2214%22 fill=%22%23999%22%3ERelated 3%3C/text%3E%3C/svg%3E" alt="Related Product">
<div class="related-card-info">
<p class="related-card-title">Related Product 3</p>
<p class="related-card-price">$129.99</p>
</div>
</div>
<div class="related-card">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22300%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2214%22 fill=%22%23999%22%3ERelated 4%3C/text%3E%3C/svg%3E" alt="Related Product">
<div class="related-card-info">
<p class="related-card-title">Related Product 4</p>
<p class="related-card-price">$89.99</p>
</div>
</div>
</div>
</div>
</section>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Premium Wireless Headphones",
"brand": {
"@type": "Brand",
"name": "TechAudio"
},
"description": "Experience crystal-clear audio with our premium wireless headphones featuring active noise cancellation and 30-hour battery life.",
"sku": "SKU-WH-2024-001",
"image": "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22600%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22600%22 height=%22600%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-family=%22system-ui%22 font-size=%2224%22 fill=%22%23999%22%3EProduct Image%3C/text%3E%3C/svg%3E",
"offers": {
"@type": "Offer",
"url": "https://brix340.com/product-page-generator",
"priceCurrency": "USD",
"price": 149.99,
"availability": "https://schema.org/InStock"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.5,
"reviewCount": 128
}
}
</script>
<script>
function changeImage(thumb) {
document.getElementById('mainImage').src = thumb.src;
document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
thumb.classList.add('active');
}
function selectOption(btn) {
btn.parentElement.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
}
function updateQty(change) {
const input = document.getElementById('qtyInput');
const newVal = Math.max(1, parseInt(input.value) + change);
input.value = newVal;
}
function showTab(tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
function toggleFaq(item) {
item.classList.toggle('open');
}
</script>
</body>
</html>Product Page Best Practices
High-Quality Images
Use multiple high-resolution images showing the product from different angles. Include zoom functionality for detail viewing.
Compelling Descriptions
Write benefit-focused descriptions that answer customer questions. Include both short and detailed versions.
Social Proof
Display customer reviews and ratings prominently. Real testimonials build trust and increase conversions.
SEO Optimization
Include schema markup for rich snippets. Optimize title, description, and image alt text for search engines.
Clear Pricing
Display prices prominently with any discounts clearly shown. Include comparison pricing when available.
Stock & Shipping
Show real-time stock status and estimated shipping times. Urgency indicators can improve conversion rates.