Based on the FoodMart HTML template, this tutorial will guide you through building a professional e-commerce product detail page using Bootstrap 5. The template demonstrates a comprehensive product page with image galleries, product options, tabs, and related products.
Overview of the Product Detail Page Structure
The product detail page from FoodMart consists of several key sections:
- Product image gallery with thumbnail navigation
- Product information (title, price, description, options)
- Color and size selectors
- Quantity picker with add to cart functionality
- Tabbed content (Description, Additional Info, Reviews)
- Related products carousel
Prerequisites
Include these dependencies in your HTML:
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Swiper JS for carousels -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
Step 1: Create the Product Image Gallery
The template uses a dual Swiper slider setup: a thumbnail slider and a main image slider that work together.
HTML Structure for Image Gallery
<section id="selling-product" class="single-product mt-0 mt-md-5">
<div class="container-fluid">
<!-- Breadcrumb navigation -->
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Pages</a>
<span class="breadcrumb-item active">Single Product</span>
</nav>
<div class="row g-5">
<!-- Left Column: Product Images -->
<div class="col-lg-7">
<div class="row flex-column-reverse flex-lg-row">
<!-- Thumbnail Navigation Column -->
<div class="col-md-12 col-lg-2">
<div class="swiper product-thumbnail-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/product-thumbnail-1.jpg" alt="thumbnail" class="thumb-image img-fluid">
</div>
<div class="swiper-slide">
<img src="images/product-thumbnail-2.jpg" alt="thumbnail" class="thumb-image img-fluid">
</div>
<!-- Add more thumbnails as needed -->
</div>
</div>
</div>
<!-- Main Image Column -->
<div class="col-md-12 col-lg-10">
<div class="swiper product-large-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image-zoom" data-scale="2.5">
<img src="images/product-large-1.jpg" alt="product-large" class="img-fluid">
</div>
</div>
<!-- Add more main images matching thumbnails -->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<!-- Right Column: Product Info -->
<div class="col-lg-5">
<!-- Product details go here -->
</div>
</div>
</div>
</section>
JavaScript to Link Thumbnail and Main Sliders
// Initialize Swiper sliders
var productThumbnailSlider = new Swiper('.product-thumbnail-slider', {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var productLargeSlider = new Swiper('.product-large-slider', {
loop: true,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
thumbs: {
swiper: productThumbnailSlider,
},
});
Step 2: Build the Product Information Section
Product Title and Rating
<div class="product-info">
<div class="element-header">
<h2 itemprop="name" class="display-6">Cashew Butter 500mg CBD</h2>
<!-- Rating Stars -->
<div class="rating-container d-flex gap-0 align-items-center">
<div class="rating" data-rating="1">
<svg width="32" height="32" class="text-primary">
<use xlink:href="#star-solid"></use>
</svg>
</div>
<div class="rating" data-rating="2">
<svg width="32" height="32" class="text-primary">
<use xlink:href="#star-solid"></use>
</svg>
</div>
<div class="rating" data-rating="3">
<svg width="32" height="32" class="text-primary">
<use xlink:href="#star-solid"></use>
</svg>
</div>
<div class="rating" data-rating="4">
<svg width="32" height="32" class="text-secondary">
<use xlink:href="#star-solid"></use>
</svg>
</div>
<div class="rating" data-rating="5">
<svg width="32" height="32" class="text-secondary">
<use xlink:href="#star-solid"></use>
</svg>
</div>
<span class="rating-count">(3.5)</span>
</div>
</div>
<!-- Product Price -->
<div class="product-price pt-3 pb-3">
<strong class="text-primary display-6 fw-bold">$870.00</strong>
<del class="ms-2">$940.00</del>
</div>
<!-- Product Description -->
<p>Justo, cum feugiat imperdiet nulla molestie ac vulputate scelerisque amet.
Bibendum adipiscing platea blandit sit sed quam semper rhoncus.</p>
</div>
Step 3: Add Product Options (Color & Size)
<div class="cart-wrap py-5">
<!-- Color Options -->
<div class="color-options product-select">
<div class="color-toggle" data-option-index="0">
<h6 class="item-title text-uppercase text-dark">Color:</h6>
<ul class="select-list list-unstyled d-flex">
<li class="select-item pe-3" data-val="Green">
<a href="#" class="btn btn-light active">Green</a>
</li>
<li class="select-item pe-3" data-val="Orange">
<a href="#" class="btn btn-light">Orange</a>
</li>
<li class="select-item pe-3" data-val="Red">
<a href="#" class="btn btn-light">Red</a>
</li>
<li class="select-item" data-val="Black">
<a href="#" class="btn btn-light disabled">Black</a>
</li>
</ul>
</div>
</div>
<!-- Size Options -->
<div class="swatch product-select mt-3" data-option-index="1">
<h6 class="item-title text-uppercase text-dark">Size:</h6>
<ul class="select-list list-unstyled d-flex">
<li data-value="S" class="select-item pe-3">
<a href="#" class="btn btn-light">XL</a>
</li>
<li data-value="M" class="select-item pe-3">
<a href="#" class="btn btn-light">L</a>
</li>
<li data-value="L" class="select-item pe-3">
<a href="#" class="btn btn-light">M</a>
</li>
<li data-value="XL" class="select-item">
<a href="#" class="btn btn-light">S</a>
</li>
</ul>
</div>
</div>
Step 4: Create Quantity Selector and Add to Cart
<div class="product-quantity pt-3">
<div class="stock-number text-dark">
<em>2 in stock</em>
</div>
<div class="stock-button-wrap">
<!-- Quantity Input with Plus/Minus Buttons -->
<div class="input-group product-qty" style="max-width: 150px;">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus">
<svg width="16" height="16">
<use xlink:href="#minus"></use>
</svg>
</button>
</span>
<input type="text" id="quantity" name="quantity"
class="form-control input-number text-center"
value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus">
<svg width="16" height="16">
<use xlink:href="#plus"></use>
</svg>
</button>
</span>
</div>
<!-- Action Buttons -->
<div class="qty-button d-flex flex-wrap pt-3">
<button type="submit" class="btn btn-primary py-3 px-4 text-uppercase me-3 mt-3">
Buy now
</button>
<button type="submit" name="add-to-cart" class="btn btn-dark py-3 px-4 text-uppercase mt-3">
Add to cart
</button>
</div>
</div>
</div>
JavaScript for Quantity Selector
// Quantity plus/minus functionality
$(document).ready(function() {
$('.btn-number').click(function(e) {
e.preventDefault();
var fieldName = $(this).attr('data-field');
var type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
}
}
});
});
Step 5: Add Product Metadata
<div class="meta-product py-2">
<!-- SKU -->
<div class="meta-item d-flex align-items-baseline">
<h6 class="item-title no-margin pe-2">SKU:</h6>
<ul class="select-list list-unstyled d-flex">
<li class="select-item">1223</li>
</ul>
</div>
<!-- Category -->
<div class="meta-item d-flex align-items-baseline">
<h6 class="item-title no-margin pe-2">Category:</h6>
<ul class="select-list list-unstyled d-flex">
<li class="select-item">
<a href="#">Watch</a>,
</li>
<li class="select-item">
<a href="#">Screen touch</a>,
</li>
</ul>
</div>
<!-- Tags -->
<div class="meta-item d-flex align-items-baseline">
<h6 class="item-title no-margin pe-2">Tags:</h6>
<ul class="select-list list-unstyled d-flex">
<li class="select-item">
<a href="#">Classic</a>,
</li>
<li class="select-item">
<a href="#">Modern</a>
</li>
</ul>
</div>
</div>
Step 6: Create Tabbed Information Section
<section class="product-info-tabs py-5">
<div class="container-fluid">
<div class="row">
<div class="d-flex flex-column flex-md-row align-items-start gap-5">
<!-- Tab Navigation -->
<div class="nav flex-row flex-wrap flex-md-column nav-pills me-3 col-lg-3"
id="v-pills-tab" role="tablist">
<button class="nav-link text-start active" id="v-pills-description-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-description"
type="button" role="tab">Description</button>
<button class="nav-link text-start" id="v-pills-additional-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-additional"
type="button" role="tab">Additional Information</button>
<button class="nav-link text-start" id="v-pills-reviews-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-reviews"
type="button" role="tab">Customer Reviews</button>
</div>
<!-- Tab Content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Description Tab -->
<div class="tab-pane fade show active" id="v-pills-description"
role="tabpanel" tabindex="0">
<h5>Product Description</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.</p>
<ul class="list-unstyled ps-4">
<li>• Donec nec justo eget felis facilisis fermentum.</li>
<li>• Suspendisse urna viverra non, semper suscipit pede.</li>
<li>• Aliquam porttitor mauris sit amet orci.</li>
</ul>
</div>
<!-- Additional Info Tab -->
<div class="tab-pane fade" id="v-pills-additional"
role="tabpanel" tabindex="0">
<p>It is Comfortable and Best</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</div>
<!-- Reviews Tab -->
<div class="tab-pane fade" id="v-pills-reviews"
role="tabpanel" tabindex="0">
<!-- Review content goes here -->
</div>
</div>
</div>
</div>
</div>
</section>
Step 7: Add Customer Reviews Section
<div class="review-box d-flex flex-wrap">
<!-- Individual Review -->
<div class="col-lg-6 d-flex flex-wrap gap-3">
<div class="col-md-2">
<div class="image-holder">
<img src="images/reviewer-1.jpg" alt="review" class="img-fluid rounded-circle">
</div>
</div>
<div class="col-md-8">
<div class="review-content">
<!-- Review Rating -->
<div class="rating-container d-flex align-items-center">
<div class="rating"><svg width="24" height="24" class="text-primary">
<use xlink:href="#star-solid"></use></svg>
</div>
<!-- Add more stars -->
<span class="rating-count">(3.5)</span>
</div>
<div class="review-header">
<span class="author-name">Tina Johnson</span>
<span class="review-date">– 03/07/2023</span>
</div>
<p>Vitae tortor condimentum lacinia quis vel eros donec ac.</p>
</div>
</div>
</div>
</div>
<!-- Add Review Form -->
<div class="add-review mt-5">
<h3>Add a review</h3>
<form id="form" class="form-group">
<div class="pb-3">
<label>Your Review *</label>
<textarea class="form-control" placeholder="Write your review here"></textarea>
</div>
<div class="pb-3">
<label>Your Name *</label>
<input type="text" name="name" placeholder="Write your name here" class="form-control">
</div>
<div class="pb-3">
<label>Your Email *</label>
<input type="email" name="email" placeholder="Write your email here" class="form-control">
</div>
<button type="submit" class="btn btn-dark btn-large text-uppercase w-100">
Submit
</button>
</form>
</div>
Step 8: Create Related Products Carousel
<section id="related-products" class="product-store position-relative py-5">
<div class="container-fluid">
<div class="section-header d-flex justify-content-between my-5">
<h2 class="section-title">Related Products</h2>
<div class="d-flex align-items-center">
<div class="swiper-buttons">
<button class="swiper-prev products-carousel-prev btn btn-primary">❮</button>
<button class="swiper-next products-carousel-next btn btn-primary">❯</button>
</div>
</div>
</div>
<div class="products-carousel swiper">
<div class="swiper-wrapper">
<!-- Product Card -->
<div class="product-item swiper-slide">
<a href="#" class="btn-wishlist">
<svg width="24" height="24"><use xlink:href="#heart"></use></svg>
</a>
<figure>
<a href="product-single.html">
<img src="images/thumb-tomatoes.png" class="tab-image">
</a>
</figure>
<h3>Sunstar Fresh Melon Juice</h3>
<span class="qty">1 Unit</span>
<span class="price">$18.00</span>
<div class="d-flex align-items-center justify-content-between">
<div class="input-group product-qty">
<!-- Quantity selector -->
</div>
<a href="#" class="nav-link">Add to Cart</a>
</div>
</div>
<!-- Add more product items -->
</div>
</div>
</div>
</section>
JavaScript for Related Products Carousel
var productsCarousel = new Swiper('.products-carousel', {
loop: true,
slidesPerView: 1,
spaceBetween: 20,
navigation: {
nextEl: '.products-carousel-next',
prevEl: '.products-carousel-prev',
},
breakpoints: {
640: { slidesPerView: 2 },
768: { slidesPerView: 3 },
1024: { slidesPerView: 4 },
}
});
Complete Bootstrap Dependencies
Make sure to include these at the bottom of your HTML:
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Scripts -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
Key Bootstrap Classes Used
| Class | Purpose |
|---|---|
container-fluid |
Full-width container |
row / col-*
|
Grid system for responsive layout |
g-5 |
Global gutter spacing |
d-flex / flex-column
|
Flexbox utilities |
btn / btn-primary / btn-dark
|
Button styling |
form-control |
Form input styling |
input-group |
Grouped form controls |
nav-pills |
Tab navigation styling |
tab-pane / fade
|
Tab content with transitions |
badge / rounded-pill
|
Badge components |
swiper |
Carousel/slider container |
Summary
This tutorial walked through creating a complete Bootstrap product detail page based on the FoodMart template. The key components covered include:
- Product image gallery with thumbnail synchronization using Swiper
- Product information including title, price, rating, and description
- Product options for color and size selection
- Quantity selector with plus/minus controls
- Tabbed information for descriptions, specs, and reviews
- Customer reviews section with add review form
- Related products carousel for cross-selling
The template demonstrates how Bootstrap 5's grid system, components, and utilities combine with Swiper for a professional e-commerce product page that's fully responsive and user-friendly.
You can find tons of Free Ecommerce HTML Templates that you can use in your Web projects. Do check them out!
