Project Overview
GearO is a static e-commerce HTML template designed for the office equipment sector, built on Bootstrap and offering a complete set of store pages. It includes 40+ pages covering product display, shopping cart, checkout, user account, blog, and more, making it suitable for quickly building office supplies or electronics retail sites.
Tech Stack
- Bootstrap 5.x (CSS framework)
- Swiper (carousel/slider)
- jQuery (interaction logic)
- Animate.css (animations)
- Fancybox (image lightbox)
- PhotoSwipe (gallery)
- SCSS (style preprocessing)
- PHP (contact form backend)
Project Structure
gearohtml-10/gearo-package/gearo/
├── index.html # Homepage
├── shop-*.html # Product listing pages (multiple layouts)
├── product-*.html # Product detail pages (multiple styles)
├── shopping-cart.html # Shopping cart
├── checkout.html # Checkout
├── my-account-*.html # User account center
├── blog-*.html # Blog list/detail
├── contact.html # Contact page
├── store-list.html # Store locator
├── faqs.html # Frequently asked questions
├── css/ # Stylesheets (includes bootstrap.min.css)
├── js/
│ └── main.js # Core interaction logic
├── scss/
│ └── app.scss # SCSS entry point
└── contact/
└── contact-process.php # Contact form processing script
Key File Descriptions
index.html— Homepage with top announcement bar, navigation, and carousel bannerjs/main.js— jQuery plugin encapsulation with 30+ features including quantity adjustment, variant selection, scroll-to-top, etc.scss/app.scss— Main SCSS entry point, importing variables, components, and responsive styles by modulecss/bootstrap.min.css— Core Bootstrap stylescontact/contact-process.php— Contact form email sending script (depends on server mail function)shop-*.html/product-*.html— Collection of product listing and detail page templates showcasing different filtering methods and product styles
Quick Start
The template consists of static pages. You can preview it by opening index.html directly in your browser.
To run with a local server:
# Python 3
python -m http.server 8080
# Node.js (npx)
npx serve .
Then visit http://localhost:8080/gearo/.
The contact form functionality requires deployment to a PHP-enabled web server with mail service configured.
Usage Recommendations
- For UI customization, primarily modify the
abstractsvariables in SCSS files andcss/styles.css; page content can be edited directly in the corresponding HTML files. - All JavaScript interactions depend on jQuery. Ensure
js/main.jsis loaded after jQuery.
