Columns
4+
Compatible Browsers
IE11, Firefox, Safari, Opera, Chrome, Edge
Compatible With
Bootstrap 5.x, Bootstrap 4.x
High Resolution
Yes
Layout
Responsive
Themeforest Files Included
HTML Files, CSS Files, JS Files
Last Updated
Mar 2026
Cannaweed is a premium Cannabis Dispensary HTML5 Template built with Bootstrap 5.3.8, delivering 23 fully designed pages across 4 unique home layouts, 4 strain gallery layouts, 4 shop pages, 3 blog layouts, services, team, FAQ, and contact systems. It is the only cannabis HTML template on ThemeForest that ships with a built-in 30-feature accessibility widget, full ARIA 1.2 compliance, keyboard navigation support, and an 8-colour runtime theme switcher—giving your clients and end-users a level of inclusivity and personalisation found nowhere else in this niche.
Every competing cannabis template on ThemeForest - Cannabify, Canabro, Goldie, Muva - offers zero WCAG compliance, zero accessibility tooling, and zero runtime colour switching. Cannaweed stands alone. If you are building a website for a cannabis dispensary, medical marijuana clinic, hemp wellness brand, recreational shop, or CBD retailer, Cannaweed provides the most complete, accessible, and flexible HTML foundation available today.
Key Features
- 23 fully designed HTML pages, pixel-perfect and production-ready
- 4 distinct home page layouts to match different brand styles
- Bootstrap 5.3.8—latest stable release, modern utility classes, no legacy debt
- 30-feature accessibility widget—the only one in any cannabis HTML template on ThemeForest
- ARIA 1.2 compliant—skip link, main landmark, focus-visible, keyboard nav, aria-expanded
- 8 runtime colour themes switchable without page reload, persistent via localStorage
- 4 strain gallery layouts: grid, masonry, slider, and detail page
- Full e-commerce shop system: shop grid, left sidebar, product detail, cart
- 3 blog layouts: standard, grid, and detail
- Services section with dedicated service details page
- Team grid and individual team member detail pages
- Why Choose Us, FAQ, and Contact pages
- Oswald + Roboto Google Fonts pairing optimised for cannabis branding
- CSS custom properties (—mht-primary,—mht-accent) for instant theme control
- Clean, well-commented HTML5, CSS3, and jQuery code
- SEO-ready meta tags and Open Graph markup on all pages
- Retina-ready and fully responsive on all screen sizes
- Cross-browser tested: Chrome, Firefox, Safari, Edge
30-Feature Accessibility Widget (UNIQUE IN CANNABIS NICHE)
- The accessibility widget is bundled in two files:
assets/accessibility/accessibility.cssandassets/accessibility/accessibility.js - Self-bootstrapping: the JS file auto-injects its own CSS—zero configuration required
- One-line integration on every page:
<script src="assets/accessibility/accessibility.js"></script> - Settings persist across page loads via
localStoragekeyacw-settings - Fixed trigger tab at bottom-left of the screen, above WhatsApp button, z-index 99999
- Panel slides in from the left at 380px wide, fully keyboard navigable
- Accessibility Profiles (one-click presets):
- Seizure Safe Profile—stops flashing, reduces motion
- Vision Impaired Profile—increases font size and contrast
- ADHD Friendly Profile—reduces distractions, calms layout
- Cognitive Disability Profile—simplifies fonts and spacing
- Keyboard Navigation Profile—enhances focus outlines
- Blind Users Profile—enables screen reader optimisations
- Content Adjustments: font size increase/decrease, line height, letter spacing, word spacing
- Colour and Contrast Adjustments: high contrast, inverted colours, greyscale, low saturation, colour blind modes (Protanopia, Deuteranopia, Tritanopia)
- Cursor and UX Adjustments: big cursor, big black cursor, reading guide, reading mask, focus highlight, highlight links, highlight headings
- Animation Controls: pause all animations, reduce motion
- Typography: switch to dyslexia-friendly font (OpenDyslexic)
- NO competitor cannabis HTML template on ThemeForest has any accessibility widget. Cannaweed is exclusively positioned in this regard.
ARIA and Keyboard Compliance
- Skip navigation link on every page—allows keyboard users to bypass the header
<main>landmark element wraps page content on all 23 pages- Focus-visible 3px green outline on all interactive elements—meets WCAG 2.4.7
- Social icon links: descriptive
aria-labelattributes auto-injected via JS for screen reader compatibility - Slider/carousel elements:
role="button"with Enter and Space key activation support - Mobile navigation toggle:
aria-expanded="true/false"reflects open/closed state - Back-to-top button:
aria-label="Back to top"for screen reader announcement - All form fields have associated
<label>elements - Semantic HTML5 elements throughout:
<header>,<nav>,<main>,<section>,<article>,<footer> - Colour contrast ratios verified for all text/background combinations in the default lime green theme
4 Unique Home Layouts
- Home 1—Full-width hero slider with product highlights and featured strains section
- Home 2—Video background hero with dispensary-focused layout and CTA buttons
- Home 3—Split hero layout with image and text columns, minimal and modern aesthetic
- Home 4—Animated parallax hero, lifestyle-focused photography layout
- All 4 homes share: sticky header, mega menu ready navigation, colour switcher panel, accessibility widget trigger, WhatsApp float button, and back-to-top
- Each home layout is independently swappable—rename any file to
index.htmlto use it as your main landing page
8 Colour Theme System
- 8 ready-made colour themes, each loaded as a standalone CSS file (
color1.cssthroughcolor8.css) - All colours are defined via CSS custom properties
--mht-primaryand--mht-accent—change one value and the entire template updates - color1: Lime Green #89d32a (default—cannabis brand classic)
- color2: Red #E53935 (dispensary / pharmacy accent)
- color3: Forest Green #2E7D32 (organic / natural wellness)
- color4: Purple #6A1B9A (premium / luxury strain branding)
- color5: Orange #E65100 (recreational / energetic vibe)
- color6: Teal #00695C (medical / clinical calm)
- color7: Blue #1565C0 (corporate / franchise dispensary)
- color8: Slate #37474F (dark, editorial cannabis magazine)
- Runtime switcher panel: fixed to the left edge of the screen, toggled by a gear icon, changes theme without any page reload
- Selected theme persists in
localStorageviajquery.cookie.js—returning visitors see their preferred colour - No other cannabis HTML template on ThemeForest offers a runtime multi-colour switcher system
4 Strain Gallery Layouts
- Strain Grid—Classic equal-column grid layout for browsing cannabis strains with filter options
- Strain Masonry—Pinterest-style masonry layout for a dynamic, editorial strain catalogue feel
- Strain Slider—Full-width carousel presentation for featured or promoted strains
- Strain Details—Individual strain page with full description, effects, flavours, THC/CBD percentages, and related strains
- Strain cards include: strain image, name, category badge (Indica/Sativa/Hybrid), THC/CBD callouts, and CTA button
- Strain detail page supports: tabbed content (description, lab results, reviews), star ratings, related strains grid
- No competitor cannabis template offers multiple strain archive layout options—Cannaweed is the only template with 4
E-Commerce Shop (4 pages)
- Shop Grid—Default product listing with right-side filter panel, sort bar, and pagination
- Shop Left Sidebar—Alternative layout with filter/category sidebar on the left
- Shop Product Detail—Full product page with gallery, description, quantity selector, add-to-cart, and related products
- Shopping Cart—Cart summary table with quantity control, remove item, subtotal, and checkout CTA
- Product cards: image with hover overlay, product name, price, add-to-cart button, wishlist icon
- Designed to integrate with WooCommerce or any custom backend—HTML/CSS structure is backend-agnostic
- Filter sidebar includes: category checkboxes, price range slider, tag cloud
Services System
- Services Page—Grid of service cards covering dispensary offerings: consultations, strain selection, delivery, medical assessments
- Service Details Page—Individual service page with full description, icon/image, process steps, and related services sidebar
- Service cards include: icon or image, title, short description, and read-more link
- Easily extendable—duplicate the service card HTML block to add unlimited services
- Ideal for dispensaries offering: online ordering, in-store consultation, cannabis delivery, loyalty programmes, medical marijuana registration
Team Pages System
- Team Grid—Responsive grid of team member cards with photo, name, role, and social links
- Team Member Detail—Full profile page with biography, specialisations, certifications, and contact information
- Team cards feature smooth hover effects revealing social media links
- Suitable for: dispensary staff, budtenders, medical consultants, cannabis educators, delivery team
- Social link icons include accessible
aria-labelattributes as part of the ARIA v1.2 compliance pass
Blog System (3 layouts)
- Blog Standard—Classic vertical list layout with large featured image, excerpt, author, date, and category
- Blog Grid—Two or three-column card grid layout for a magazine-style cannabis content hub
- Blog Post Detail—Full article page with featured image, author bio, tags, social share, and related posts sidebar
- Sidebar widgets: recent posts, categories, tags, search box
- Blog system supports: educational cannabis content, strain reviews, industry news, wellness articles, dispensary announcements
- Author meta and post date are structured for easy schema.org Article markup integration
Why Choose Us Page
- Why Choose Us—Dedicated page with icon feature blocks, statistics counter section, testimonial slider, and CTA banner
- Features icon grid: quality assurance, lab-tested products, discreet delivery, licensed dispensary, expert staff, community trust
- Statistics counter animates on scroll: patients served, strains available, years in business, 5-star reviews
- Testimonial slider with customer quotes, name, and star rating
- Ideal for building trust signals for new dispensary customers or medical patients
FAQ System
- FAQ Page—Accordion-style frequently asked questions with smooth open/close animation
- FAQ categories cover: ordering online, in-store pickup, age verification, payment methods, medical cards, delivery zones, product safety
- Accordion built with Bootstrap 5.3.8 Collapse component—no custom JS needed
- Easily customisable—add, remove, or reorder question/answer pairs by editing simple HTML list items
- Important for cannabis businesses that must proactively address legal and compliance questions from customers
Contact System
- Contact Page—Contact form, Google Maps embed, dispensary address, phone, email, and opening hours
- Contact form fields: name, email, phone, subject, message—all with accessible label elements
- Opening hours table for dispensary trading hours by day
- Map section sized for full-width embed with responsive iframe
- Contact info icons use Font Awesome 6 and include aria-hidden=”true” on decorative icons
- Form is frontend-only HTML/CSS—connect to any PHP mailer, Formspree, Netlify Forms, or backend API
SEO and Open Graph Meta
- Every page includes a unique, descriptive
<title>tag following the pattern: Page Name | Cannaweed | Cannabis Dispensary - Every page includes
<meta name="description">with page-specific content for search engine snippets - Open Graph tags on all pages:
og:title,og:description,og:image,og:url,og:type - Twitter Card meta tags:
twitter:card,twitter:title,twitter:description,twitter:image - Canonical
<link rel="canonical">on each page to prevent duplicate content signals - Semantic heading hierarchy (single H1 per page, logical H2/H3 structure) supports search engine content parsing
- Image alt attributes on all images for both SEO and accessibility compliance
Typography and Design
- Oswald (Google Fonts) for all headings—bold, impactful, and widely associated with cannabis brand aesthetics
- Roboto (Google Fonts) for body text—clean, highly legible at all sizes on screens
- Default primary colour: Lime Green #89d32a—instantly communicates cannabis brand identity
- Dark background sections use deep charcoal and near-black tones for premium dispensary feel
- Consistent spacing system using Bootstrap 5.3.8 spacing utilities (pt, pb, mt, mb classes)
- All design elements use CSS custom properties for instant global restyling without hunting through files
- Icon library: Font Awesome 6—used for service icons, social links, contact details, and UI elements
- High-quality placeholder images sized correctly for each section—easy to swap with real photography
Navigation and UX
- Sticky header that reduces in height on scroll for maximum content visibility
- Full Bootstrap 5.3.8 navbar with responsive mobile hamburger toggle
- Dropdown menus for multi-page sections (Strains, Shop, Blog)
- Mobile navigation includes aria-expanded state management for assistive technology
- Back-to-top button: appears after scrolling 200px, smooth-scrolls to top, labelled for screen readers
- WhatsApp floating button for direct customer messaging (fixed bottom-right)
- Colour switcher panel (fixed left edge) for live theme switching without reload
- Accessibility widget trigger tab (fixed bottom-left) above WhatsApp button
- Smooth scroll behaviour on all anchor links
- Active navigation state highlights the current page section
Performance and Code Quality
- HTML files are cleanly structured with consistent 2-space indentation and logical section comments
- CSS is organised by component with clear section headers—easy to find and override any style
- JavaScript uses IIFE pattern for scope isolation:
(function($){ 'use strict'; })(jQuery); - All scripts placed before
</body>for non-blocking page load - CSS loaded in
<head>for render-blocking prevention and FOUC avoidance - Images use descriptive file names and alt attributes for both performance caching and SEO benefit
- Google Fonts loaded with
display=swapto prevent invisible text during font load - No unused CSS frameworks or bloated dependencies—every library included has a specific purpose
- Bootstrap 5.3.8 CDN or local file—your choice, both included in the package
- Minified versions of all vendor assets used in production where available
Cross-Browser and Device Compatibility
- Tested and confirmed working in: Google Chrome (latest), Mozilla Firefox (latest), Apple Safari (latest), Microsoft Edge (latest)
- Fully responsive across all viewport sizes: mobile (320px+), tablet (768px+), laptop (1024px+), desktop (1280px+), wide (1920px+)
- Bootstrap 5.3.8 grid system ensures correct column stacking at all breakpoints
- Touch-friendly sliders and carousels using Swiper.js or compatible touch event handlers
- Retina/HiDPI display ready—icons use scalable SVG or Font Awesome vector fonts, no blurry bitmap icons
- Mobile navigation collapses cleanly with smooth animation on all tested mobile browsers
- Colour switcher and accessibility widget tested and functional across all supported browsers
Use Cases
- Cannabis Dispensary: Full site for retail dispensaries selling recreational or medical cannabis products
- Medical Marijuana Clinic: Services and team pages ideal for clinics with consultants and prescription services
- Hemp Wellness Brand: Clean, professional layout suitable for CBD oil, hemp supplements, and wellness products
- Online Cannabis Retailer: Shop system with cart page ready for backend integration with any e-commerce platform
- Strain Review Site: 4 strain layout options perfect for editorial cannabis content and strain encyclopaedia sites
- Cannabis Blog or Magazine: 3 blog layouts support a full content publishing operation
- Recreational Shop: Vibrant colour themes and lifestyle photography slots for recreational market branding
- Cannabis Franchise: 8 colour themes allow each franchise location to have a unique colour identity within one template purchase
- ADA/WCAG Accessible Site: Built-in accessibility widget and ARIA compliance make Cannaweed suitable for clients with accessibility obligations
Strain Catalogue Features
- Strain cards display: high-quality image, strain name, type badge (Indica / Sativa / Hybrid), THC percentage, CBD percentage, and action button
- Grid layout supports filtering by type, effect, or flavour using filter buttons
- Masonry layout creates visual hierarchy with varying card heights for editorial interest
- Slider layout allows featured or promoted strains to be showcased prominently above the fold
- Strain detail page sections: hero image, effect tags (Relaxed, Happy, Euphoric, Creative, Sleepy), flavour tags (Earthy, Sweet, Citrus, Pine), terpene profile, lab test panel, growing info, and customer reviews
- Related strains grid at the bottom of strain detail pages for internal linking and session depth
- All strain data is HTML/static—integrate with any headless CMS, JSON API, or WordPress/WooCommerce backend
Shop and Cart Features
- Product cards include: product image with hover second image effect, product name, price, sale badge, add-to-cart button, and wishlist icon
- Sort bar on shop listing pages: sort by popularity, price ascending/descending, newest
- Filter sidebar: category tree, price range with dual-handle slider, brand/tag checkboxes
- Product detail page: multi-image gallery with thumbnail strip, quantity input, variant selector (e.g. weight: 1g / 3.5g / 7g), product description tabs (Details, Reviews, Lab Results)
- Star rating display on product detail and in product cards for social proof
- Cart page: itemised table with product thumbnail, name, unit price, quantity stepper, line total, remove button
- Cart summary panel: subtotal, shipping note, coupon code field, and Proceed to Checkout CTA
- All cart interactions are frontend UI only—connect to Shopify Buy Button, WooCommerce REST API, Snipcart, or any custom checkout backend
Compliance and Legal Readiness
- Age verification gate included—customisable modal overlay that blocks access until the user confirms they are 18+ or 21+ (jurisdiction-configurable text)
- Cookie consent banner included—accepts or declines non-essential cookies, dismisses and remembers preference via localStorage
- Footer includes placeholder sections for: Privacy Policy link, Terms and Conditions link, Disclaimer, Licensing information
- FAQ page template includes pre-written question slots for: age verification requirements, legal purchasing limits, prescription requirements, and delivery regulations
- Accessibility widget and ARIA compliance support ADA Title III compliance readiness for US-based dispensary clients
- All placeholder content is written as neutral, non-medical-advice copy—safe to publish while your legal team prepares final text
- Note: this is an HTML template only. It is the developer’s responsibility to ensure the final deployed site complies with all applicable cannabis laws in their jurisdiction.
Pages Included
- Home 1—Primary hero slider home page
- Home 2—Video background home page
- Home 3—Split layout home page
- Home 4—Parallax/lifestyle home page
- About—Company story, mission, values, and dispensary overview
- Why Choose Us—Features, stats counter, testimonials, CTA
- Services—Service grid with icon cards
- Service Details—Individual service full page
- Strain Grid—Cannabis strain archive, grid layout
- Strain Masonry—Cannabis strain archive, masonry layout
- Strain Slider—Cannabis strain archive, slider/carousel layout
- Strain Details—Individual strain detail page
- Shop—Product listing grid with right sidebar
- Shop Left Sidebar—Product listing with left filter sidebar
- Shop Product Detail—Single product detail page
- Cart—Shopping cart summary and checkout CTA
- Blog Standard—Blog listing, standard vertical layout
- Blog Grid—Blog listing, card grid layout
- Blog Details—Single blog post full page
- Team—Team member grid with hover social links
- Team Details—Individual team member profile page
- FAQ—Accordion FAQ page
- Contact—Contact form, map, hours, and address
Credits and Sources
- Bootstrap 5.3.8
- https://getbootstrap.com -MIT License - jQuery 1.12.4
- https://jquery.com -MIT License - Font Awesome 6
- https://fontawesome.com -Font Awesome Free License (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT) - Google Fonts: Oswald + Roboto
- https://fonts.google.com -SIL Open Font License - Swiper.js
- https://swiperjs.com -MIT License - jquery.cookie.js
- https://github.com/carhartl/jquery-cookie -MIT License - OpenDyslexic Font (accessibility widget)
- https://opendyslexic.org -SIL Open Font License - Demo images: Unsplash
- https://unsplash.com -Unsplash License (free for commercial use, no attribution required) - Demo images: Pexels
- https://www.pexels.com -Pexels License (free for commercial use, no attribution required) - All demo images are for preview purposes only and are NOT included in the purchased download. Replace with your own licensed images before publishing.
v1.2 10/03/2026 - ARIA compliance pass applied to all 23 pages - Skip navigation link added to every page - main landmark element wrapping all page content - focus-visible 3px green outline on all interactive elements - Social icon aria-label attributes auto-injected via JS - Slider and carousel elements: role="button" with Enter/Space keyboard activation - Mobile nav toggle: aria-expanded state management added - Back-to-top button: aria-label="Back to top" added - 30-feature accessibility widget bundled (assets/accessibility/) - Accessibility widget: self-bootstrapping, one-line integration, localStorage persistence - Accessibility profiles: Seizure Safe, Vision Impaired, ADHD, Cognitive, Keyboard Nav, Blind - Accessibility features: font size, line height, letter spacing, contrast, greyscale, invert, colour blind modes, big cursor, reading guide, reading mask, focus highlight, dyslexia font, pause animations v1.1 27/02/2026 - Bootstrap upgraded from 4.5.0 to 5.3.8 - Popper upgraded to @popperjs/core 2.11.8 - data-toggle attributes migrated to data-bs-toggle - data-target attributes migrated to data-bs-target - data-dismiss attributes migrated to data-bs-dismiss - Spacing utilities ml-* / mr-* migrated to ms-* / me-* - bootstrap-compat.css shim added for any residual v4 class references
