Overview

Welcome to the E-commerce HTML Templates Pack. This comprehensive package provides 5 distinct, modern, and fully responsive e-commerce HTML templates built on the robust Bootstrap 5 framework.

Key Features
  • 100% Responsive & Mobile First
  • Bootstrap 5.3.x Base
  • SEO Optimized Semantic HTML
  • Clean & Commented Code
  • W3C Valid HTML
Developer Friendly
  • Easy Variable Customization
  • Organized Folder Structure
  • No jQuery Dependency
  • FontAwesome & Bootstrap Icons

Templates Included

This pack includes 5 unique designs tailored for specific niches.

# Template Name Font Family Ideal Use Case Files
1 Modern Retail Plus Jakarta Sans Electronics, General Retail HTML5
2 Fashion Dress Inter Clothing, Luxury Fashion HTML5
3 Grocery Store Inter Food Market, Supermarket HTML5
4 Fashion Footwear Outfit Shoe Shop, Sneakers HTML5
5 Fitness Store Inter Gym Equipment, Sports HTML5

Installation

Follow these simple steps to get your template up and running:

  1. Download the .zip package from the marketplace.
  2. Extract the files to a local directory on your computer.
  3. Navigate to the specific template folder you wish to use (e.g., fashion-dress).
  4. Open index.html in your preferred web browser (Chrome, Firefox, Safari, etc.).
  5. To deploy, simply upload the contents of the folder to your web hosting server.

Folder Structure

The package is organized logically to make finding files easy. Here is the hierarchy:

ecommerce-html-pack/
├── modern-retail/
│   ├── assets/
│   │   ├── css/
   │   ├── js/
│      └── images/
│   └─ index.html
├── fashion-dress/
│   └── ...
── grocery-store/
│   └── ...
├── fashion-footwear/
│   └── ...
├─ fitness-store/
│   └── ...
└── documentation.html

Libraries Used

Bootstrap 5 v5.3.2 Bootstrap Icons v1.11 Swiper Slider v11.0 AOS Animation v3.0

Fonts

We use high-quality Google Fonts across all templates. You can change them in the <head> section of each HTML file.

Importing Fonts
<!-- Plus Jakarta Sans -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Outfit -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Syne -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Images

Customization

Changing the Logo

Locate the .navbar-brand in your HTML file and replace the <img> source or text.

<a class="navbar-brand" href="#">
    <img src="assets/images/logo.png" alt="Your Logo" height="40">
</a>

Changing Colors (CSS Variables)

In the assets/css/style.css (or SCSS file), look for the :root variables.

:root {
  --primary-color: #4e45e5;   /* Change to your brand color */
  --secondary-color: #6c757d;
  --accent-color: #ffc107;
  --dark-color: #212529;
  --light-color: #f8f9fa;
}

Browser Support

Chrome

Edge

Firefox

Safari

Credits

A big thank you to the open-source community:

License

This template pack is distributed under the Envato Regular License.

One end product usage license. You cannot resell or redistribute these files as your own.