Overview

A calm, botanical HTML template for CBD and hemp wellness shops: oils, gummies, edibles, hemp flower and balms, every batch lab-tested. Hempira ships three home pages, a light and a dark theme, right-to-left support, an age gate, and shop logic that is worked out rather than typed in: the milligrams in every drop and serving, the lab certificate of every batch read against its label and the THC limit, subscribe and save by frequency, and store pickup with live ready times.

What’s included

• 3 home pages, each with its own scroll moment: the lab certificate fills in line by line, a hemp leaf zooms into its cell structure, and a breathing circle swells and settles
• 18 products in 5 ranges, each with its CBD per drop, gummy, square, gram or ml, its serving and its strength band
• Lab results per batch (20 certificates): CBD against the label within 10%, delta-9 THC against the 0.3% limit, five safety panels
• Strength guide with a calculator, the three bands and a table of every product
• Subscribe and save (every 4 weeks 15%, every 6 weeks 12%, every 8 weeks 10%) with a suggested frequency and the next three dispatch days
• Store pickup at 3 stores: stock per store, open-now lines and the time an order would be ready
• Bag with a free-shipping meter, discount code, tax and a three-step checkout (delivery or pickup) with an order number; order tracking; an account with subscriptions to skip, pause or re-time
• An age gate (21+) remembered in the browser, a product finder, a FAQ with search
• Light and dark mode, right-to-left stylesheets with a flag language picker, a WebGL soft aurora and a single oil drop forming at a dropper in the footer
• Focus Pull preloader, Exhale reveals, a leaf shadow on card hover, Swiper sliders and Fancybox galleries
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open hempira/index.html in any modern browser. No build tools or server are required — the shop, the bag, the strength calculator, the lab lookup, subscriptions and pickup all work straight from the files.

2. Deploy to a server

Upload the contents of the hempira/ folder to your hosting provider using an FTP client or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Products, batches, stores, subscriptions and shop rules live in one place — see Shop Logic.

File Structure

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

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and hempira/, the template.

hempira/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── assets/
    ├── css/
    │   ├── style.css / style.rtl.css   all custom styles (and the right-to-left twin)
    │   ├── responsive.css / .rtl.css   breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    bootstrap (+ rtl), fancybox, swiper
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    bootstrap, gsap, jquery, fancybox, ScrollTrigger, swiper
    ├── fonts/theme-icons/              the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── art/                         11 files
        ├── banner/                      20 files
        ├── blog/                        5 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── gallery/                     14 files
        ├── icons/                       30 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── products/                    18 files
        └── team/                        6 files

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Colours used with transparency have an -rgb twin (for example --hp-amber-rgb) — change both together.

Night carries Home 1, the page titles, the night bands and the footer; ivory and sand are the light grounds and the product tiles. Amber fills the buttons (with night text) and the oil; its deeper partners write the large orange headline words and small amber text on light grounds. Leaf and rust are signals only: passed, under the limit and in stock; over a limit and sold out.

Fonts

Two Google Fonts: Prompt (headings, body, buttons, prices) and Castoro (its italic is the soft word inside a headline, the marquee and the big figures on the lab certificate). Swap them by editing the Google Fonts link and --hp-ff-head / --hp-ff-body / --hp-ff-serif.

Logo

The logo — a seven-leaflet hemp leaf with an oil drop in its centre leaflet beside the “HEMPIRA” wordmark — ships as PNG files in assets/img/logo/: logo.png (light grounds), logo-light.png (dark grounds and dark mode), the leaf alone (mark.png, mark-light.png) and favicon.png.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved under hempira-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on <html>.

The dark colours live in the [data-theme="dark"] block right after :root. The night bands and the footer stay dark in both themes; the line-art drawings and icons switch to their light ink.

Age Gate

On a first visit every page asks whether the visitor is 21 or older (to change the age, edit the gate’s text and minAge in the data block). “Yes” is remembered in the browser under hempira-age-v1; “No” shows a polite exit panel. The gate traps keyboard focus while open and appears after the preloader. Its markup is the .hp-age-gate block right after the footer on every page (JS block 20); delete that block from the pages to turn the gate off.

Shop Logic

Every figure comes from one data block, JS block 09 Hempira Data (var HEMPIRA) near the top of main.js. Edit it once and the cards, calculators, certificates, prices, dates and totals follow.

Products and strength

Each product has its range, spectrum (full, broad or isolate), cbd (mg in the pack), units (how many drops, gummies, squares, cookies, cups, grams or ml the pack holds; 1 ml of oil = 20 drops), serving (units in one serving; 0 for skin care, shown per ml), price (and was when on sale), its batch code and its stock at each store. A serving falls into one of three bands: Gentle up to 10 mg, Balanced up to 25 mg, Strong above.

Lab results per batch

Each entry in batches is one certificate: the measured cbd and the label’s claim in the same terms (mg per ml, per gummy, per square, per cup, or % by weight for flower), thc (delta-9, % by weight), the minor cannabinoids, terpenes and a status. A batch matches its label when it is within 10% of the claim (tolerance); THC must be at or under thcLimit (0.3%). The lab’s name and the five safety panels are lab and panels.

Subscribe and save

Every subscription line is the shelf price less the frequency’s saving (every 4 weeks 15%, every 6 weeks 12%, every 8 weeks 10%), in whole cents rounded half up. Full Spectrum Oil 1500 at $89.00 every four weeks is $75.65, about $174.03 saved a year. The page suggests the longest frequency that arrives before the first pack runs out at one serving a day: 60 days, so every 8 weeks. Subscriptions always ship free; customers skip, pause or re-time them on the account page.

Store pickup

Each store has its weekly hours (minutes from midnight, null when closed) and its stock of every product. An order is ready 60 minutes after it is placed in opening hours, rounded up to the next 15 minutes; outside hours, 60 minutes after the next opening. Orders are held for 5 days.

Shipping, discount and tax

Orders placed before 2:00 pm Monday to Friday ship that day; later ones the next working day. Parcels arrive 2 days after dispatch (Sundays skipped). Shipping is $6.50, free from $60.00, on any subscription and on store pickup. The code CALM10 takes 10% off; tax is 8.25% of the goods after the discount.

The bag, wishlist, discount code, orders, subscriptions and the pickup choice are kept in the browser (localStorage). The first visit starts with a small demo bag; set the demo lists in doShop() (block 29) to [] to start empty.

WebGL Layers

One small runner draws two fragment-shader layers: aurora — a soft, slow aurora of leaf green and amber behind the page titles, Home 1’s night bands, coming soon and 404 — and drop — the footer’s single oil drop, forming at the tip of a dropper, falling and settling, drawn as a metaball. Each is one canvas:

<canvas class="hp-gl" data-gl="aurora" aria-hidden="true"></canvas>

Colours come from --gl-1, --gl-2, --gl-3 and --gl-alpha on the section. A layer only runs while on screen; reduced motion gets one still frame.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the flag language picker lists the languages that read each way. Choosing Arabic stores the direction (hempira-dir) and reloads; the head script sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated. To make a page right to left for good, add dir="rtl" to its <html> and load bootstrap.rtl.min.css, style.rtl.css and responsive.rtl.css in place of the three LTR files.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, organised into 37 numbered blocks:

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Aurora & Oil Drop. The core every page shares: the Focus Pull preloader, the header, the Exhale reveals, the theme and direction switch and the WebGL aurora and oil drop.
• 09–10 — Hempira Data, Store Engine & Clocks. Hempira Data holds every figure; the Store Engine works out strength per drop and per serving, reads lab certificates, prices subscriptions and runs the store hours, pickup and dispatch clocks.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, counters, sliders, accordions, filters, grid search, newsletter, choice cards.
• 20–23 — Age Gate, Lab Certificate Fill, Leaf To Cell Zoom, Breathing Circle. The age gate and the three scroll moments: the lab certificate fills line by line, a leaf zooms into its cells, a breathing circle swells and settles.
• 24–37 — Search, Strength Guide, Lab Results, Product Finder, Contact Form, Shop Engine, Account Forms, Article Tools, Demo Forms, Subscribe & Save, Order Tracking, My Account, Launch Countdown, FAQ Search. The feature pages: search, the strength guide, lab results, the product finder, contact, the shop (bag, checkout, wishlist), accounts, articles, demo forms, subscribe and save, order tracking, the account, the launch countdown and the FAQ.

Each block is a self-contained doSomething() that skips pages without its section. Every animation respects prefers-reduced-motion.

Images

The package ships with neutral placeholder images at the correct dimensions. Replace them with your own using the same file names. Images are grouped inside assets/img/:

The logo files, the line-art drawings, the icons and the language flags are included. All demo photography on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form posts to sendmail.php, a lightweight AJAX mail handler; the message appears under the button without reloading the page. The newsletter, checkout, subscribe, comment and account forms are demo forms that confirm on screen. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs PHP mail() support. On a local computer or a static host it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the script with your site key:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Prompt, Castoro

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popup.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.