Building a Product Page in HTML

The product page is arguably the single most important page on any e-commerce website. It is the moment of decision. The point where a visitor either converts into a customer or leaves. A great product page makes it as easy as possible for the visitor to become a customer.

The Two-Column Split

Almost all modern product pages use a two-column CSS Grid layout for the main content area. The product images fill the left column, and all the details occupy the right column. This mirrors the natural way humans evaluate a purchase. First they look at the product visually, then they read the details.

The CSS for this setup might look like this:

Here's what that does:

The CSS grid layout is used to create a two-column layout with a gap of 48px between the columns.
The maximum width of the grid is set to 1100px and the grid is centered on the page.
The display property is set to grid to enable the grid layout.
The grid-template-columns property is set to 1fr 1fr to create two equal columns.
The gap property is set to 48px to create a gap of 48px between the columns.
The max-width property is set to 1100px to set the maximum width of the grid to 1100px.
The margin property is set to 40px auto to center the grid on the page (and provide 40px of space above and below the grid).

The Information Hierarchy

The order of elements in the right-hand details column of a product page is usually quite deliberate and directly mirrors a conversion decision sequence:

Stock Badge: "In Stock" conveys a sense of urgency and availability. The customer can have it now if they want to. But at the same time, it appears to be available in limited quantities and could sell out at any time. Better buy it quick!
Product Title: The h1 heading provides the name and primary SEO keyword.
Star Ratings: A quick visual signal of social proof from existing customers.
Pricing: Large, highly visible. A crossed-out "original" price next to the sale price makes any discount feel tangible.
Description: Concise benefits-focused prose, not a dry spec sheet.
Add to Cart: The primary CTA button. This must be visually dominant. It should be the largest, most colorful element in the column.
Trust Badges: A row of small reassurances below the CTA (free shipping, secure checkout, return policy, etc) to squash last-second hesitation.

Full Working Example

Below is a complete, production-ready product page for a fictional solar panel. It includes an image gallery, a full details column, and a customer review section at the bottom:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopKing Pro | Product Page</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #333; }

/* ---- NAV ---- */
  header { background: white; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
  .logo { font-weight: 800; font-size: 1.4em; color: #16a34a; }
  .cart-btn { background: #16a34a; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; }

/* ---- PRODUCT LAYOUT ---- */
  .product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1100px; margin: 40px auto; padding: 0 40px; align-items: start; }

/* ---- IMAGE GALLERY ---- */
  .image-main { border-radius: 12px; background: white; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  .image-placeholder { height: 400px; display: flex; align-items: center; justify-content: center; font-size: 8em; background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
  .image-thumbnails { display: flex; gap: 8px; padding: 12px; }
  .thumb { width: 64px; height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; cursor: pointer; background: #f0fdf4; font-size: 1.5em; }
  .thumb.active { border-color: #16a34a; }

/* ---- PRODUCT DETAILS ---- */
  .badge { display: inline-block; background: #dcfce7; color: #15803d; padding: 4px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 700; margin-bottom: 12px; }
  .product-title { font-size: 2em; font-weight: 800; line-height: 1.2; margin-bottom: 12px; color: #111; }
  .rating { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #facc15; font-size: 1.1em; }
  .rating span { color: #666; font-size: 0.85em; }
  .price-block { margin-bottom: 24px; }
  .price { font-size: 2.4em; font-weight: 800; color: #16a34a; }
  .price-original { font-size: 1.1em; color: #999; text-decoration: line-through; margin-left: 8px; }
  .price-saving { font-size: 0.9em; color: #dc2626; font-weight: 600; }
  .product-desc { color: #555; line-height: 1.8; margin-bottom: 28px; }
  .add-to-cart-btn { width: 100%; padding: 18px; background: #16a34a; color: white; font-size: 1.1em; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: background 0.2s, transform 0.2s; }
  .add-to-cart-btn:hover { background: #15803d; transform: translateY(-2px); }
  .wishlist-btn { width: 100%; padding: 14px; background: transparent; color: #333; font-size: 1em; font-weight: 600; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; margin-top: 12px; transition: border-color 0.2s; }
  .wishlist-btn:hover { border-color: #16a34a; }
  .trust-badges { display: flex; gap: 16px; margin-top: 24px; }
  .trust-badge { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #666; }

/* ---- REVIEWS ---- */
  .reviews-section { max-width: 1100px; margin: 0 auto 40px; padding: 0 40px; }
  .reviews-section h3 { font-size: 1.5em; margin-bottom: 20px; }
  .review { background: white; border-radius: 10px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
  .review-stars { color: #facc15; margin-bottom: 6px; }
  .review-author { font-weight: 700; margin-bottom: 4px; }
  .review-text { color: #666; }

/* ---- FOOTER ---- */
  .site-footer { background: #111827; color: #9ca3af; margin-top: 40px; }
  .footer-inner { max-width: 1100px; margin: 0 auto; padding: 48px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .footer-brand .footer-logo { font-weight: 800; font-size: 1.3em; color: #16a34a; display: block; margin-bottom: 10px; }
  .footer-brand p { font-size: 0.88em; line-height: 1.7; }
  .footer-col h4 { color: white; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 8px; }
  .footer-col a { color: #9ca3af; font-size: 0.88em; text-decoration: none; }
  .footer-col a:hover { color: white; }
  .footer-bottom { border-top: 1px solid #1f2937; padding: 18px 40px; text-align: center; font-size: 0.82em; }

@media (max-width: 720px) { .product-page { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } }
</style>
</head>
<body>

<header>
  <div class="logo">ShopKing</div>
  <button class="cart-btn">&#128722; Cart (0)</button>
</header>

<div>
    <div class="image-main">
      <div class="image-placeholder">&#9925;</div>
      <div class="image-thumbnails">
        <div class="thumb active">&#9925;</div>
        <div class="thumb">&#128721;</div>
        <div class="thumb">&#127970;</div>
      </div>
    </div>
  </div>

<div>
    <div class="badge">In Stock</div>
    <h1 class="product-title">ProSolar Panel X9 Ultra</h1>
    <div class="rating">
      &#9733;&#9733;&#9733;&#9733;&#9733;
      <span>(128 reviews)</span>
    </div>
    <div class="price-block">
      <span class="price">$249</span>
      <span class="price-original">$399</span>
      <div class="price-saving">You save $150 (38% off)</div>
    </div>
    <p class="product-desc">The most efficient residential solar panel on the market. Features a 25-year performance warranty, 23% efficiency rating, and weatherproof aluminium frame. Easy to install with our no-drill mounting system.</p>
    <button class="add-to-cart-btn">&#43; Add to Cart</button>
    <button class="wishlist-btn">&#10084;&#65039; Add to Wishlist</button>
    <div class="trust-badges">
      <div class="trust-badge">&#128666; Free Shipping</div>
      <div class="trust-badge">&#128737; 30-Day Returns</div>
      <div class="trust-badge">&#128274; Secure Checkout</div>
    </div>
  </div>

</div>

<div class="reviews-section">
  <h3>Customer Reviews</h3>
  <div class="review">
    <div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <div class="review-author">Margaret T.</div>
    <p class="review-text">Cut my electricity bill by 60% in the first month. Installation was a breeze with the included guide.</p>
  </div>
  <div class="review">
    <div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <div class="review-author">James W.</div>
    <p class="review-text">Excellent build quality and incredibly good value. Highly recommended for anyone looking to go solar.</p>
  </div>
</div>

<footer class="site-footer">
  <div class="footer-inner">
    <div class="footer-brand">
      <span class="footer-logo">ShopKing</span>
      <p>The home of premium solar energy solutions. Free shipping on all orders. 30-day no-fuss returns.</p>
    </div>
    <div class="footer-col">
      <h4>Shop</h4>
      <ul>
        <li><a href="#">Solar Panels</a></li>
        <li><a href="#">Batteries</a></li>
        <li><a href="#">Inverters</a></li>
        <li><a href="#">Accessories</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Support</h4>
      <ul>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Shipping Info</a></li>
        <li><a href="#">Returns Policy</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Company</h4>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2026 ShopKing Ltd. All rights reserved.</p>
  </div>
</footer>

</body>
</html>

View Output Full Screen Preview