Project Overviewlink

Mozzo is a Chinese frontend template designed for the food and beverage industry, suitable for restaurant websites, online ordering systems, food delivery platforms, and similar scenarios. The template offers 5 homepage layouts and a complete shopping flow (cart, checkout, order tracking), enabling quick setup of food-related websites.

Tech Stacklink

• HTML5 + CSS3 + Vanilla JavaScript
• Bootstrap 5 (Layout & Responsive)
• Font Awesome 6 (Icons)
• Swiper (Carousel)
• Magnific Popup (Modal)
• jQuery (Documentation page interactions)

Project Structurelink

mozzohtml-10/
├── documentation/          # Template documentation
│   ├── index.html
│   └── assets/
│       ├── css/             # Documentation styles (includes custom theme variables)
│       ├── fonts/           # ElegantIcons font
│       ├── images/          # Documentation images
│       └── js/              # Documentation interaction scripts
└── mozzo-template/          # Main template
    ├── buyer-file/mozzo/    # Buyer version (clean, no watermark)
    │   └── mozzo/
    │       └── *.html        # Page files
    └── mozzo/               # Full version (includes all examples)
        └── *.html            # Page files

Key Fileslink

• index.html — Main entry page with 5 homepage style options
• assets/css/main.css — Main template styles (CSS variables define theme colors, fonts, etc.)
• assets/css/bootstrap.min.css — Bootstrap 5 base framework
• assets/js/main.js — Mobile menu, scroll navigation, search filtering, and other interactions
• shop.html / shop-details.html — Product listing and detail pages
• cart-page.html / checkout.html — Shopping flow pages

Quick Startlink

1. Open mozzo-template/mozzo/index.html directly in your browser to preview
2. Recommended: Use VS Code with the Live Server extension for a better debugging experience
3. For production, copy files from the buyer-file/mozzo/ directory (watermark-free version)

Usage Tipslink

The template uses CSS variables to centrally manage theme colors (--primary-color, --theme-color). Modify the :root block at the top of style.css or main.css to quickly change the color scheme without searching for individual color values.