Overview

Alpine is a responsive Bootstrap 5 Ecommerce template designed for fashion-focused online stores. It features a “Ken Burns” effect on the homepage slideshow, angled banners, and a custom image hotspot banner with popout product cards. The template has large product images on category pages and provides easy navigation throughout the website. Alpine has a clean and minimal design that is easy to modify and integrate with custom Ecommerce applications. It is free to use.

Features

• Homepage slideshow using Swiper.js
• Built with Bootstrap 5
• Fully responsive design
• Brand logo component
• Homepage featured products slideshow component using Swiper.js
• Image Hotspot component with popout product card using Tippy.js
• Instagram slideshow component
• Category listing card showing sale badge and discount percentage
• Custom pagination component
• Header Megamenu
• Customer review component
• Company review component
• Related products slideshow component
• Offcanvas category filter display
• Header cart offcanvas display

Installation

Requirements

• Node.js - download from here if not already installed.

Quick Start

1. Download the latest release or clone the repo by running the following command in your command line:

   git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.git
   

2. Install Node.js if you don’t already have it on your system.

3. Open the project root in your command line.

4. Run the following command in your command line to install the required dependencies:

   npm install
   

5. To start the Webpack dev server, run the following command:

   npm start
   

   This will also recompile the template files and output them to the dist folder.

Template Pages

The template consists of 5 pages:

• Homepage
• Category page
• Product page
• Cart page
• Checkout page

Handlebars.js is used as the templating engine to minimize code repetition. Partials are used to quickly add the same code to different pages. The template also uses a Handlebars plugin for JSON data, allowing for the use of loops and outputting a single HTML code block instead of repeating the same HTML.

Summary

Alpine is a Bootstrap 5 Ecommerce template designed for fashion retail websites. It offers a range of features to enhance the user experience, including homepage slideshows, image hotspots, product cards, and more. The template is easy to install and customize, making it a great starting point for any fashion-focused online store.