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="/img/general/icons/loader-legacy.gif" data-src="https://images.weserv.nl/?default=https://themes.aedevstudio.com/img/general/pixel-1x1.png&url=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