Butazzo Pizza Documentation

  • Name: Butazzo Pizza
  • Version: 5.2
  • Author: Alissio
  • Live Preview: View Demo
  • Support: alissioteam@gmail.com

Thank you for purchasing Butazzo Pizza.
You can find the detailed information about the template in this document.
If you have any questions that are beyond the scope of this help file,
please feel free to email via the Profile page
Thanks so much!

1. Introduction

You are a shining owner of a regular license based on Butazzo Pizza HTML Template.

We would like to thank you for choosing Butazzo Pizza and for being our loyal customer. You are entitled to get free updates to this product + exceptional support (as per market policy) from the author directly.

We made Butazzo Pizza from the ground-up with flexibility in mind.
Each element of Butazzo Pizza is extremely customizable, where you can make Butazzo Pizza to reflect your own branding styles.

The guide gives you detailed methodologies about how you can customize Butazzo Pizza and make it fit your brand perfectly!
Please go through the documentation carefully to understand how this product is made and how to edit this properly.
Basic HTML and CSS knowledge is required to customize.

1.1 What's Included

After purchasing Butazzo Pizza on themeforest.net with your Envato account, go to your Download page.
Do not directly upload the zip file you downloaded from Themeforest. To begin, unzip the Themeforest file you just downloaded which contains the following files:

  • documentation: contains what you are reading now.
  • home-v1, ... , home-v4: home version files.
  • src: contains assets files.

Key features:

  • Completely Responsive Design Optimized viewing on desktop, tablet and mobile devices.
  • Easy Customization Customize each slide to meet your unique requirements and preferences.
  • Beautiful Appearance on Any Device Great user experience on any screen size or resolution.
  • Advanced Animation Effects Eye-catching transitions between slides.
  • Cross-Browser Compatibility Seamless functionality on multiple browsers.
  • Fast Loading Speed Optimized user experience with fast loading times.
  • User-Friendly Interface Easy to use and navigate.

Other features:

  • Based on Bootstrap 5.3.3
  • Dark Mode / Light Mode toggle with system preference detection
  • W3C HTML valid code
  • Better Support (response within 24 hours)
  • Free Regular Updates
  • Well, Extensive Documentation
  • Easy to Setup

2. Files Organization

Ensure the project folder is well-structured:

  butazzo-pizza/
  β”œβ”€β”€ documentation/       # This Documentation File
  β”œβ”€β”€ home-v1/             # Home Version 1 Files (Dark Mode)
  β”œβ”€β”€ home-v2/             # Home Version 2 Files (Dark Mode)
  β”œβ”€β”€ home-v3/             # Home Version 3 Files (Dark Mode)
  β”œβ”€β”€ home-v4/             # Home Version 4 Files (Dark Mode)
  |   β”œβ”€β”€ index.html       # Demo HTML
  |   β”œβ”€β”€ assets/
  β”‚       β”œβ”€β”€ css/
  β”‚       β”‚   β”œβ”€β”€ style.css        # Main stylesheet
  β”‚       β”‚   β”œβ”€β”€ dark-mode.css    # Dark mode + theme toggle styles
  β”‚       β”œβ”€β”€ js/
  β”‚       β”œβ”€β”€ img/
  β”œβ”€β”€ src/
  β”‚   β”œβ”€β”€ assets/
  β”‚       β”œβ”€β”€ css/
  β”‚       β”‚   β”œβ”€β”€ dark-mode.css    # Dark mode styles for Home v1–v3
  β”‚       β”œβ”€β”€ js/
  β”‚           β”œβ”€β”€ dark-mode.js     # Dark mode toggle for Home v1–v3
  β”œβ”€β”€ source/              # Source Files (Unminified JS, CSS)
  └── README.txt           # Basic Info & Licensing

3. Usage Example

Basic HTML Structure for Butazzo Pizza:

  
  
  
  
    
  
...
...
...
...
...
...

4. Code Standards

  • Validate all HTML and CSS using tools like the W3C Validator.
  • Write clean, well-commented JavaScript code and follow best practices.

5. CSS Structure

   
    

    
    

    
    

    
        
  

6. Fonts Include

Google Fonts imported inside main.min.css file

  
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
  

7. JavaScript Structure

  
    

    
    

    
    
  

8.1 Change Site Title

To change your Site Title open the index.html in your editor and go to the title tag.

  
  
  Butazzo Pizza - Restaurant, Cafe, Fast Food business, Responsive, One Page Bootstrap Template
  

8.2 Supabase Reservation Form (Home v5)

The reservation form on home-v5/index.html is wired to Supabase β€” a hosted PostgreSQL backend. On submit, the form inserts a row directly into the public.reservations table. No server-side code is required.

Step 1 β€” Create the table. Run this SQL in the Supabase SQL Editor:

  
  create table public.reservations (
    id uuid primary key default gen_random_uuid(),
    full_name text not null,
    email text not null,
    date date not null,
    time text not null,
    guests text not null,
    seating text not null,
    created_at timestamptz not null default now()
  );

  alter table public.reservations enable row level security;

  create policy "anon can insert reservations"
    on public.reservations
    for insert
    to anon
    with check (true);
  

Step 2 β€” Replace the credentials. In home-v5/index.html, find the inline script at the bottom of <body> and update the two constants to match your own Supabase project:

  
  var SUPABASE_URL = 'https://your-project-id.supabase.co';
  var SUPABASE_KEY = 'your-publishable-anon-key';
  

How it works:

  • The Supabase JS client (@supabase/supabase-js@2) is loaded from the jsDelivr CDN β€” no npm or build step needed.
  • The publishable (anon) key is safe to expose in HTML. Row Level Security ensures anonymous users can only INSERT β€” they cannot read, update, or delete any rows.
  • On submit, the button is disabled, a pending message appears, then switches to a gold success message and the form resets, or a red error message if the insert fails.
  • All reservations are visible in your Supabase project under Table Editor β†’ public.reservations.

Note: Never expose the service_role key in HTML β€” use only the anon / publishable key.

9. Dark Mode

All home versions (Home v1–v4, ~130 pages) ship with a built-in dark/light theme toggle. The toggle button sits in the header on every page.

How it works:

  • On first visit the theme is set automatically from the visitor's OS/browser preference (prefers-color-scheme).
  • Clicking the moon/sun button switches themes instantly and saves the choice to localStorage.
  • The active theme is stored under the key butazzo-theme and restored on every subsequent page load.

Two implementations (both work identically):

  • Home v1, v2, v3 β€” loads src/assets/css/dark-mode.css and src/assets/js/dark-mode.js. Toggle button is placed inside .top-addr__right.search-block.
  • Home v4 β€” loads assets/css/dark-mode.css and assets/js/dark-mode.js. Toggle button is injected as a new .extra-nav cell in the header.

Inline script (added to <head> on every page β€” prevents flash of wrong theme):

  
  <link rel="stylesheet" href="assets/css/dark-mode.css">
  <script>
    (function(){
      try {
        var t = localStorage.getItem('butazzo-theme');
        if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        document.documentElement.setAttribute('data-bs-theme', t);
      } catch(e) {}
    })();
  </script>
  

The toggle button itself (at the bottom of each page's <body>) reads:

  
  <script>
  (function(){
    var btn = document.querySelector('.theme-toggle');
    if (!btn) return;
    btn.addEventListener('click', function(){
      var next = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-bs-theme', next);
      try { localStorage.setItem('butazzo-theme', next); } catch(e){}
    });
  })();
  </script>
  

10. Testing

  • Cross-Browser Compatibility: Tested on IE9, IE10, IE11, Chrome, Firefox, Edge, and Safari.
  • Responsiveness: Ensure it works seamlessly on mobile, tablet, and desktop devices.
  • Performance Optimization: Minify CSS/JS files and optimize assets for faster loading times.

11. Sources and Credits

The product uses following resources by third parties.

Plugins Fonts Images

12. Support

For any questions or issues, please contact our support team:

Email: alissioteam@gmail.com

Included in Free Support Scope:

  • Fixing bugs
  • Helping clients in changing site contents by sending instructions that couldn’t be covered by documentation

NOT Included in Free Support Scope:

  • Any type of custom changes
  • Any type of request to update clients’ site contents

Paid Support Scope:

Paid support is not a part of Free Support when you purchase the template from themeforest. We understand that some clients need custom changes while using our template. For that we kept an option for paid support which includes:

  • Custom change request
  • Custom pages
  • Custom features

We kept a flat rate for our paid support which is $35/hour.

Before seeking support, please...

  • Make sure your question is a valid item issue and not a customization request.
  • Make sure you have read through the documentation or any related video guides before asking support on how to accomplish a task.

13. Regular Updates

We’re always improving our skills and knowledge so we’re making changes regularly. From bug fixes to new awesome features, updates generally come at least twice a month.

  June 04, 2026: Butazzo Pizza v5.2.1
  ---------------------------------------
  - Fixed: Replaced Yandex Maps with OpenStreetMap embed β€” Yandex API was geo-blocked in many countries, causing loading overlay to never dismiss
  - Fixed: Added 5-second fallback timeout to loading overlay across all versions
  - Fixed: Demo links in landing page now use local relative paths for reliable Envato preview
  - Tweak: Updated Documentation

  June 02, 2026: Butazzo Pizza v5.2
  ---------------------------------------
  - Fixed: Phone number overlapping nav menu on tablet/laptop screens (1040px–1280px) β€” hidden below 1280px
  - Fixed: "Book a Table" button mispositioned next to logo on mobile β€” moved inside hamburger menu overlay
  - Tweak: Updated Documentation

  May 30, 2026: Butazzo Pizza v5.1
  ---------------------------------------
  - New: Supabase live reservation form (Home v5) β€” inserts directly into PostgreSQL via Supabase JS CDN
  - New: Row Level Security (RLS) policy β€” anon role INSERT-only, data protected from browser reads/deletes
  - New: Pending / success / error status messages on the reservation form
  - New: Menu item detail page (menu-item.html) with Swiper image + thumbnail gallery (Home v5)
  - Tweak: Updated Documentation

  May 29, 2026: Butazzo Pizza v5.0
  ---------------------------------------
  - New: Home version 5 β€” "Dark Fine Dining" (dark-first, premium restaurant design)
  - New: GSAP 3.x + ScrollTrigger scroll animations (reveals, parallax, horizontal menu)
  - New: Lenis smooth scroll integrated with GSAP ticker
  - New: Kinetic typography hero (word-split animation on page load)
  - New: Pinned horizontal menu scroll section with progress bar
  - New: Swiper 11 fade slider for reviews with custom gold pagination
  - New: Flatpickr date picker styled to dark palette (reservation form)
  - New: Choices.js custom select dropdowns (reservation form)
  - New: Animated stats counter on scroll
  - New: Marquee ticker with infinite CSS loop animation
  - Added: Dark Mode support with light/dark toggle across all home versions (Home v1–v4, ~130 pages)
  - Added: System preference detection (auto dark/light on first visit) on all pages
  - Fixed: Header layout two-row stacking issue on Home v4
  - Tweak: Updated Documentation

  May 07, 2025: Butazzo Pizza v4.0
  ---------------------------------------
  - New: Home version 4
  - Fixed: Main slider captions mobile view problem
  - Fixed: Home version 1 Menu and Menu Inner page img view problems
  - Tweak: Updated Documentation

  February 17, 2025: Butazzo Pizza v3.2.1
  ---------------------------------------
  - Updated: Bootstrap 4.5 to Bootstrap 5.3.3
  - Updated: Jquery 2.1.1 to Jquery 3.7.1
  - Updated: Fancybox 1.3.4 to Fancyapps 5.0.36
  - Updated: Font Awesome 4.7.0 to Font Awesome Free 6.7.2
  - Updated: SEO and Google Speed score
  - Imported: all used plugins inside one file
  - Minified: all used assets files
  - Added: source folder with contains unminify files
  - Added: LESS, SCSS, SASS files 
  - Added: extra options to date picker plugin
  - Fixed: AOS animation effects on scrooling page
  - Fixed: date time picker plugin view
  - Fixed: mobile menu auto close after navigate
  - Fixed: some responsive UI problems
  - Tweak: Updated Documentation

  September 08, 2024: Butazzo Pizza v3.1
  ----------------------------------------
  - Added: Menus and Category pages for Home v1
  - Fixed: Validation problems
  - Tweak: Improved Documentation

  January 11, 2024: Butazzo Pizza v3.0
  --------------------------------------
  - New: Home version 3
  - Updated: Preview link change.
  - Fixed: Optimization images for SEO.
  - Tweak: Improved Documentation

  April 13, 2021: Butazzo Pizza v2.6.2
  ------------------------------------
  - Update: Bootstrap Framework to 4.5.
  - Tested: Android (Samsung, Google, HTC) and iOS (iPhone 11, iPhone 6s, iPad (6th Generation), iPad Air 2) devices, Safari, Firefox, Chrome browsers.
  - Tweak: Improved Documentation

  October 13, 2020: Butazzo Pizza v2.5.1
  --------------------------------------
  - Fixed: "Our Menus" section tab click problem on iPhone devices.
  - Tested: Android (Samsung, Google, HTC) and iOS (iPhone 11, iPhone 6s, iPad (6th Generation), iPad Air 2) devices, Safari, Firefox, Chrome browsers. 
  - Tweak: Improved Documentation

  July 21, 2020: Butazzo Pizza v2.4.0
  -----------------------------------
  - New: Home version 2
  - Added: Yandex Map instead of Google Map
  - Tweak: Improved Documentation

  July 10, 2020: Butazzo Pizza v1.3.7
  -----------------------------------
  - Added: Chef personal social icons on slider
  - Fixed: Google Map API key source
  - Tweak: Improved Documentation

  May 04, 2020: Butazzo Pizza v1.3.6
  ----------------------------------
  - Added: New big size images for Menu and Gallery popup
  - Tweak: Improved Documentation

  May 03, 2020: Butazzo Pizza v1.3.5
  ----------------------------------
  - Added: Loading spinner for Gallery load more
  - Fixed: Go to top button work on footer
  - Fixed: Search input clear empty value
  - Tweak: Improved Documentation

  December 01, 2019: Butazzo Pizza v1.2.4
  ---------------------------------------
  - Added: Scroll up button functionality
  - Fixed: Header search clear button type
  - Fixed: Inputs type text autocomplete 
  - Tweak: Improved Documentation

  September 30, 2018: Butazzo Pizza v1.1.3
  ----------------------------------------
  - Fixed: Burger menu view on tablet devices
  - Fixed: Navbar fixed view 
  - Tweak: Improved Documentation

  July 08, 2018: Butazzo Pizza v1.1.2
  -----------------------------------
  - Added: loadMoreResults plugin for gallery photos
  - Added: Extra images for slider, menu and gallery sections
  - Fixed: Slider responsive view to medium devices
  - Fixed: Content of menu section  
  - Tweak: Improved Documentation

  July 07, 2018: Butazzo Pizza v1.0.1
  -----------------------------------
  - Updated: Fonts Loading Performance
  - Tweak: Improved Documentation

  June 02, 2018: Butazzo Pizza v1.0.0
  -----------------------------------
  - Initial release

14. Thanks

Once again thank you for purchasing one of our Templates.
If you love our product, please don’t forget rate ⭐️⭐️⭐️⭐️⭐️ stars and give feedback for a better update. Thank you ☺️

Best Regards
Alissio