Alpine Html Bootstrap

Alpine is a responsive Bootstrap 5 Ecommerce template with a "Ken Burns" effect on the homepage slideshow, angled banners, and a custom image hotspot banner with popout product cards.

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

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
```
Install Node.js if you don’t already have it on your system.
Open the project root in your command line.
Run the following command in your command line to install the required dependencies:
```
npm install
```
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.