Overview

A complete HTML template for cannabis dispensaries, consulting firms, and CBD retail shops. Cannaweed combines a rich strain catalogue with a full e-commerce shop, informational pages, and a clean blog to serve the full spectrum of cannabis business needs.

What’s included

  • 4 homepage layout variations
  • Strain catalogue (grid, masonry, slider, detail)
  • Services and why-choose-us pages
  • Blog (grid, standard, detail)
  • Shop, product detail, cart, checkout
  • Team, FAQ, and contact pages
  • Fully responsive layout
📄 25 HTML files

Getting Started

Thank you for choosing Cannaweed. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — all files are ready to use as-is.

2. Deploy to a server

Upload the entire template folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All styling lives in assets/css/style.css. Edit colours, fonts, and spacing there. HTML pages are straightforward and well-structured — open any page in a code editor to modify content directly.

Tip: We recommend using VS Code with the Live Preview extension for the smoothest editing experience.

File Structure

Below is an overview of the key files and folders included in this template.

index.html / index-2 – 4.htmlHomepage layout variations
strain-grid.html / strain-slider.htmlStrain catalogue listings
strain-details.htmlSingle strain detail page
services.html / service-details.htmlServices pages
shop.html / shop-detail.htmlShop and product detail
cart.html / checkout.html (via shop)Cart and checkout flow
blog-grid.html / blog-standard.htmlBlog listing views
blog-details.htmlSingle blog post
team.html / team-details.htmlTeam pages
about.html / contact.html / faq.htmlAbout, contact, FAQ
assets/css/Stylesheets
assets/js/JavaScript files
assets/img/Images

Bootstrap 5 Guide

This template is built on Bootstrap 5.3.3. If you plan to add new components or customise existing ones, here is a quick reference for the most common Bootstrap 5 patterns.

Interactive attributes

Bootstrap 5 uses data-bs-* attributes. If you copy a component from an older Bootstrap 4 tutorial, update the attributes as shown:

Bootstrap 4
data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"
Bootstrap 5
data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"

Spacing & text utilities

Bootstrap 4
ml-* / mr-*pl-* / pr-*text-start / text-endfloat-start / float-end
Bootstrap 5
ms-* / me-*ps-* / pe-*text-start / text-endfloat-start / float-end

Common class changes

Bootstrap 4
..form-select.close.badge-primary.form-row
Bootstrap 5
.mb-3.form-select.btn-close.text-bg-primary.row.g-2
Need more? The full Bootstrap 5 migration guide is at getbootstrap.com/docs/5.3/migration/.

Accessibility (ARIA) — v1.2.0

Version 1.2.0 adds a full set of WCAG 2.1 AA accessibility enhancements. Every change is non-visual — the design, layout, and colours are identical to v1.1.0. Three files are touched per template: an HTML page, style.css, and the main JavaScript file.

Zero visual impact. All ARIA additions are invisible on-screen. They improve screen reader output and keyboard navigation without changing a single pixel of the design.

What was added

[HTML] Skip linkA "Skip to main content" link placed as the very first element inside <body>. Sighted keyboard users can Tab to it; screen reader users hear it immediately on page load.
[HTML] <main> landmark<main id="main-content"> now wraps all page body content between the closing </header> and the opening <footer>. Screen readers expose this as the primary content region.
[HTML] Image alt=""Decorative <img> tags that were missing an alt attribute have had alt="" added. This tells screen readers to skip them.
[CSS] Skip-link stylesThe skip link is hidden off-screen by default (top:-100%) and animates into view only when focused via keyboard. Added at the bottom of assets/css/style.css.
[CSS] :focus-visibleA 3px outline ring appears on interactive elements (a, button, input, etc.) only when navigated by keyboard. Mouse clicks are completely unaffected because :focus-visible never fires on pointer events.
[JS] ARIA auto-labelsA self-contained IIFE appended to main.js runs on DOMContentLoaded and assigns aria-label, role, aria-expanded, and tabindex to social links, slider arrows, nav togglers, back-to-top buttons, and close buttons.

1. Skip Navigation Link

The skip link is the first child of <body> on every HTML page:

<a class="skip-link" href="#main-content">Skip to main content</a>

How to edit the label — Change the visible text between the tags:

<!-- Example: French -->
<a class="skip-link" href="#main-content">Aller au contenu principal</a>

How to remove the skip link — Delete the <a class="skip-link"> line from every HTML page, and remove the .skip-link { … } and .skip-link:focus { … } blocks from assets/css/style.css.

2. <main> Content Landmark

Every page now wraps its body content like this:

</header>
<main id="main-content">

  <!-- all page sections go here -->

</main>
<footer> … </footer>

How to change the target ID — If you change id="main-content" on the <main> tag, also update href="#main-content" on the skip link so they stay in sync.

How to remove the landmark — Delete the <main id="main-content"> opening line and the matching </main> closing line from each HTML page. The skip link's href will no longer resolve — remove it too.

3. Focus Indicators (CSS)

At the bottom of assets/css/style.css you will find:

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

How to change the ring colour — Replace #0d6efd with any accessible colour. Use a colour that has at least 3:1 contrast ratio against the page background. Example using this template's green accent:

outline: 3px solid #89d32a; /* Cannaweed green */

How to remove focus indicators — Delete the entire a:focus-visible, button:focus-visible … { outline: … } block from style.css. Browser defaults will apply (usually a thin dotted outline).

Why :focus-visible and not :focus? The :focus pseudo-class fires on every click, causing visible rings around buttons whenever a mouse user clicks them. :focus-visible is smarter — browsers only apply it when the element was reached by keyboard or a non-pointer input, so mouse users never see the ring.

4. ARIA Labels — JavaScript Auto-Assignment

The ARIA init block at the bottom of assets/js/main.js runs once on page load and automatically assigns accessibility attributes to interactive elements. Here is what it does and how to override each part:

Social icon links
aria-label="Facebook"aria-label="Instagram"… etc.		 Any <a> containing a Font Awesome icon (e.g. <i class="fab fa-facebook-f">) that has no existing aria-label gets one automatically from the icon class name.

To override: Add aria-label="My Facebook Page" directly to the <a> tag in the HTML. The JS skips elements that already have aria-label.
Slider arrows
role="button"aria-label="Previous slide"aria-label="Next slide"		 Slick slider generates .slick-prev and .slick-next buttons at runtime. The JS sets role="button", the appropriate label, tabindex="0", and keyboard Enter/Space activation.

To override the label: After the page loads, use your own JS: document.querySelector('.slick-prev').setAttribute('aria-label','Go back');
Navigation toggle
aria-label="Toggle navigation menu"aria-expanded="false/true"		 Elements matching .navbar-toggler, .hamburger, .meanmenu-reveal, or [data-bs-toggle="collapse"] receive a label and a live aria-expanded toggle on click.

To customise the label: Add aria-label="Open menu" to the button in your HTML. The JS skips elements that already have the attribute.
Back-to-top
aria-label="Back to top"role="button"		 Elements matching .back-to-top, .go-top, .scroll-top, or .scrollup get labelled automatically. If the element is not a <button>, role="button" is also added.
Close buttons
aria-label="Close"		 Elements matching .btn-close, .close, .close-btn, or [data-bs-dismiss] get aria-label="Close" if they don't already have one.

Accessibility Widget

A floating trigger button (bottom-left, wheelchair icon) that opens a side panel. Visitors can adjust font size, line spacing, contrast, colour filters, cursor size, animations, and more. Settings persist across pages via localStorage.

Already installed. The widget is pre-installed in assets/accessibility/ and the script tag is already present before </body> on the homepage.

How to add the widget to additional pages — Add one line before </body> on any HTML page:

<script src="assets/accessibility/assets/js/accessibility.js"></script>

The script self-bootstraps — it injects its own CSS and loads the panel HTML automatically. No extra <link> tag needed.

How to remove the widget — Two steps:

HTMLDelete the <script src="assets/accessibility/assets/js/accessibility.js"></script> line from every HTML page that includes it.
FilesDelete the entire assets/accessibility/ folder. No other project files are modified by the widget.

How to change the trigger position — Open assets/accessibility/assets/css/accessibility.css, find the .acw-logo-trigger rule, and adjust bottom and left:

.acw-logo-trigger {
    bottom: 95px; /* distance from the bottom of the viewport */
    left: 0;      /* 0 = flush with the left edge */
}

How to change the panel colours — In the same CSS file, locate the :root block near the top and update the two main custom properties:

--acw-primary: #1e2a3b;   /* panel header & trigger background */
--acw-accent:  #00c4a1;   /* active-state & highlight colour  */

How to clear a user’s saved settings — Preferences are stored under the localStorage key acw-settings. To reset programmatically, add this anywhere in your page JS:

localStorage.removeItem('acw-settings');

5. Remove All ARIA Features

If you prefer to strip every accessibility addition, follow these four steps:

HTML (all pages)Delete the <a class="skip-link" …> line and the <main id="main-content"> / </main> pair from each .html file.
CSS — skip linkIn assets/css/style.css, find the block marked /* Skip Navigation Link */ and delete it along with the .skip-link:focus { … } rule below it.
CSS — focus ringIn the same file, find the block marked /* Keyboard Focus Indicators */ and delete it.
JS — ARIA initIn assets/js/main.js, find the comment block /* ARIA Accessibility Enhancements -- v1.1 */ and delete the entire IIFE below it (from the opening (function () { to the closing })();).
Tip: Search each file for the comment ARIA Accessibility Enhancements — it acts as a precise marker in both the CSS and JS files so you can locate and remove every addition in seconds.

Credits

This template is built using the following open-source libraries and resources.

  • Bootstrap 5.3.3
  • jQuery
  • Popper.js
  • Slick Slider
  • Magnific Popup
  • Font Awesome
  • WOW.js
  • Animate.css
  • Isotope

Fonts and icon packs are loaded locally — no external CDN calls are required once the template is deployed.

Support

If you have any questions or need help with the template, please reach out through our ThemeForest profile. We aim to respond within 24–48 hours.

For licensing information visit metropolitanhost.com/licenses.

Buy This Template Now