Cannabis Web Design and UX That Ranks and Converts

What a cannabis website has to do

A cannabis website has to get found in search and get a ready buyer to act, two jobs most designs split. Paid ads for THC products are off the table on the big platforms, so organic traffic and the site that receives it carry more of the load than they would for a shoe store. A visitor lost to a slow page or a buried menu is hard to buy back.

Dispensary traffic is local and impatient. The person searching at 8:40 on a Friday night wants to know whether you close at 9 or 10, how far away you are and what you carry. Brand traffic is more cautious: a first-time CBD buyer wants proof the product is tested and the company is real. The page that answers the visitor's question in the first screen keeps them. The one that opens with a mission statement over a stock greenhouse photo sends them back to the results.

Design choices also decide what Google can read. A redirect age gate, a menu that lives only inside an iframe, filters built as script handlers and a "load more" button with no linked pages can each hide hundreds of products from the index. That is why the sections below mix layout advice with crawl checks.

Age gates done right

An age gate is the first thing most cannabis visitors see, and how it is built decides whether it costs you rankings, sales or neither. Build it as a JavaScript overlay on top of the real page. The page loads at its real URL with its content in the HTML, people tap through the layer, and crawlers read the full page underneath.

The version that damages a site is the redirect gate, which sends every visitor and every crawler to a separate verification URL first. Googlebot does not click "Yes, I am 21." If verification stands between the crawler and your pages, the verification page is what gets indexed, and direct links to products bounce through the gate and lose their destination.

Use one tap. A birthdate form asks for three fields of typing on a phone to establish what a "Yes, I am 21 or older" button establishes: an unverified self-certification. Unless your jurisdiction calls for date entry, two large buttons do the job with less drop-off. Rules differ by state; our guide to age-verification requirements for cannabis sites covers where stricter checks apply.

Remember the visitor and keep it light. Set a cookie when someone passes so they never see the gate again that session; 30 days is a common setting for returning visitors. Brand the overlay, keep the copy to one plain line, make it appear instantly, and don't stack a newsletter signup or location prompt into the same moment. Google's guidance on intrusive interstitials exempts dialogs shown for legal obligations and names age verification as an example, so an overlay gate carries no mobile penalty.

Mobile-first layout

Mobile-first design means drawing the phone layout before the desktop one, because most dispensary traffic arrives on a phone held in one hand. Google also indexes the mobile version of your pages, as its mobile-first indexing documentation explains. Shrinking a wide desktop design is how sites end up with a three-across grid that stacks into a mile-long scroll. Every page needs the viewport meta tag (width=device-width, initial-scale=1).

Size everything for a thumb. Make tap targets about 44 by 44 pixels with space between them, so a shopper reaching for Add to cart doesn't hit the strain link beside it. Keep primary actions in the lower and middle third of the screen. On long product pages, a single sticky button pinned to the bottom keeps Order now one tap away. Two or three sticky buttons eat the screen and make the choice harder.

Keep a sticky header short and still. Cap it near 56 to 60 pixels on mobile and fit three things in it: logo, menu toggle and cart. Never let it resize on scroll in a way that moves the page. Say a 96-pixel header collapses to 64 mid-scroll: the product grid jumps 32 pixels and people tap the wrong strain. Hold one height, or animate any shrink with a CSS transform. Set scroll-margin-top on headings to the header height so in-page links don't land under the bar.

Tighten spacing on purpose. Generous desktop margins can push the buy button below the fold on a phone. Sections 32 pixels apart with 48-pixel side margins on desktop might drop to about 20 and 16 on mobile, keeping Add to cart in the first screen. Then try to finish a purchase one-handed on a real mid-range Android.

A homepage that starts orders

A dispensary homepage has one job in the first screen: get a nearby shopper to start an order. Pick that action before any layout work; for most stores it is Shop the menu or Order pickup. The brand story, blog and rewards pitch sit further down for people who scroll.

Put the local signals above the fold: open status with today's hours, the address linked to Google Maps, a tap-to-call number, and whether pickup or delivery is available. These must match your Google Business Profile exactly, including the name format the profile guidelines require. Mismatched hours are the classic trust killer: the profile says open until 10, the footer says 9, and someone ends up at a locked door. Change holiday hours in both places the same day.

A single-location layout that works:

• Top bar: open status and hours, the address linked to a map, the phone number.
• Hero: store name, one line on what the shop is known for, a large Shop the menu button with a smaller Order pickup button beside it.
• Below: today's deals, then top categories linking to real category pages.
• Trust block: license number, photos of the actual storefront, recent reviews.

A full-screen mood photo with a slogan looks good and gives a shopper who wanted the menu nothing to do. Move it below the fold and the story stops blocking the door.

Navigation, structure and the footer

Cannabis site navigation should get a first-time visitor to products in one click. Hold the top nav to five to seven items and make Menu or Shop the most prominent, ideally first and styled as a filled button. If you run more than one store, add a location switcher, because menus, hours and delivery all depend on which store the shopper picks.

Keep the structure shallow. Aim to keep every product and guide within about three clicks of home. A strain page reachable only through home, shop, flower, indica and page four of pagination barely gets crawled. Pick ten products and ten articles, start from the homepage and count clicks; anything deeper needs a shortcut. Let demand set the structure: if pre-rolls outsell everything, they belong in the top nav even if a tidy taxonomy would nest them under flower.

Organize topics as hubs and spokes. A main edibles page covers the topic and links to gummies, chocolates, onset times and beginner dosing, each of which links back. Fifty scattered edibles posts compete with each other; one cluster supports itself.

Add breadcrumbs everywhere. A Home, Shop, Edibles, Gummies trail orients a visitor who landed mid-site and gives a one-click path up. Add BreadcrumbList structured data so Google can show the trail in results. Short URLs that echo the hierarchy help too, but don't rebuild existing URLs for tidiness alone, since each change needs a 301.

Use the footer for money pages. The footer repeats on every URL, so a footer link to Flower is a link from every page. Keep it to what a person would click: top categories, location pages, deals and a couple of cornerstone guides, plus a name, address and phone block per storefront in the same format as your Business Profile. A footer with 60 near-duplicate city links or anchors like "buy weed online cheap" reads as spam to Google and clutter to shoppers.

Menus, embeds and site search

A cannabis menu should put the categories shoppers want at the top and reach any product in one or two taps. Order categories by sales. If Accessories sits first only because the menu was built that way while flower, the best seller, sits fourth, swapping them cuts taps for most visitors with no new products at all. Use plain names and revisit the order each quarter.

Know what your embed does. Most dispensaries run menus through Dutchie or Jane. The embeds handle inventory and compliance well, but products inside an iframe usually count toward the provider's domain, and the frame can load slowly or hide category structure. The page around the embed has to carry your SEO in crawlable text, backed by real category pages on your own domain. Our answer on how menu platforms like Dutchie affect dispensary SEO explains the options, and our guide to handling JavaScript rendering on cannabis sites shows how to check what Google actually sees.

Put search inside the menu. Shoppers who know the strain or brand leave if they have to scroll for it. A search box serves them and doubles as a keyword research feed: turn on GA4 site search tracking and a month later you have the exact words paying customers use. They type "carts," "pens," "dabs," nicknames and misspellings, so build a synonym list from that data. Read the zero-results report monthly. Each blank result is a product search missed (fix the synonym), a product you don't stock (purchasing data), or a question like "how long do edibles take" (write the page). If "delivery" keeps showing up in product search, delivery info belongs in the header.

Category pages and filters

A cannabis category page works like a shelf, so products come first. Someone who taps Edibles wants edibles, with no banner carousel or farm story in the way. Open with a grid showing photo, name, price, potency and package size, and keep every card identical: same crop, same data order, same button. A card that breaks the pattern gets skipped, and so does its product.

Give big subcategories their own pages. Gummies, cartridges and pre-rolls each carry search demand, and a filter state can't rank for any of it. Give them crawlable URLs with their own title tags, linked from the parent as a tile row above the grid.

Make every link a real link. Each card, tile and pagination step needs a plain HTML href, as Google's crawlable links guidance describes. A "load more" button with no linked page URLs strands everything past the first screen. Try opening a card, a tile and page two in a new tab; whatever refuses to open is what Google can't reach.

Place copy for both audiences. Write two or three sentences above the grid naming the category and who it suits, and put the longer buying guide below the products. Picture 120 edibles behind a "load more" button, rebuilt with five subcategory tiles, a best-seller sort and plain links: six indexable pages where one stood.

Design filters people can use. Order the panel the way your shoppers narrow, usually category, effect, THC or CBD range, brand and price, and confirm it in your analytics. Filter on attributes buyers think in (effect, format, potency), show applied filters as removable chips with a clear-all, update the count as each applies, and grey out options that would return nothing. Then point the canonical tag on filtered views to the main category and index only the few combinations with real search demand.

Product page layout

A cannabis product page should show the product, answer the shopper's questions and make buying obvious. The top pairs your own photo of the actual jar or package with the name, category, potency and buy controls; on a phone it stacks image first.

• Price, stock and the button above the fold, with any size or weight selector right beside the button. A page that pushes Add to cart below a long strain description makes decided shoppers scroll and leave.
• The COA link near the potency numbers, by batch or lot, where the safety question comes up.
• An effects and terpene block near the top of the description, which moves flower and vapes more than marketing prose.
• Reviews below the buy zone with a star rating by the title, and related products at the very end.

Steer attention with size, contrast and position. Give Add to cart the brand's one accent color, use it nowhere else, and leave clear space around the button. Run the squint check: blur your eyes, and whatever still stands out is what the page emphasizes. If that is a promo banner, the layout points shoppers at the wrong thing.

Show proof a shopper can check. "4.6 stars from 214 reviews" beats "loved by thousands," and a new product should say "4.8 stars from 6 early reviews" honestly. Mirror the same numbers in your Product structured data. The FTC's Endorsement Guides apply to dispensaries like any store: no staff-written reviews, disclosed incentives, and no hiding honest negatives. A three-star review answered publicly with a fix reassures the next shopper.

Trust signals and copy for first-time buyers

Trust on a cannabis website comes from concrete evidence placed where hesitation happens. Four signals do most of the work: your state license number in the footer and on About and Contact, COAs linked from product pages, an address and phone that match your Business Profile, and real photos of your store, staff and products. The same stock nug turns up on a hundred menus and shoppers read it as filler; phone photos of real jars on a plain backdrop beat it.

Give newcomers a start-here page. First-time buyers don't know a cart from a tincture. A "New to cannabis? Start here" link in the nav leads to one page covering the main formats, what ID to bring (valid government ID showing 21 or older, or your state's medical rules), how payment works and start-low dosing basics framed as general education. Regulars skip it and lose nothing.

Keep health claims out of every string. Don't say a product treats, cures or relieves any condition, in copy, buttons, testimonials or review replies. The FDA's page on cannabis-derived products explains the risk, and our guide on how to avoid health claims in cannabis content covers the wording.

Write for the curious visitor. Aim product and store copy at about a sixth to eighth grade reading level, in short paragraphs. Define jargon on first use: "high in myrcene, the terpene linked to heavier, more relaxing effects." Put the direct answer in the first sentence under each heading; that shape gets lifted into featured snippets and quoted by ChatGPT, Claude, Gemini, Perplexity, and Google AI. Use microcopy where worry peaks: "Ships in plain, unbranded packaging" beside Add to cart, and form errors that name the fix ("Enter a ZIP code we deliver to") in place of "Invalid input."

Speed and Core Web Vitals

Speed on a cannabis store is scored through Core Web Vitals: Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less, and Cumulative Layout Shift at 0.1 or less, as Google's Web Vitals documentation sets out. Each one is a shopper experience: how long until the main content shows, how fast a tap responds, whether things jump under a finger. Run your homepage, menu and top category through PageSpeed Insights, mobile first, and write the numbers down.

Fix image weight first. Resize each file to its display size, convert to WebP or AVIF, and compress. Set width and height on every image so the browser reserves the space. Add loading="lazy" below the fold so a 60-product menu loads its first row on arrival, but never lazy load the hero, since that delays exactly what Google times.

Cut fonts and scripts. Use a system font stack or one family in two weights. Count the scripts (chat widget, review embed, heat map, age gate, two analytics tags) and remove anything nobody checks. Skeleton loaders make a page feel faster while it fills in.

Say a menu page weighs 4.6 MB with a 6-second LCP, mostly images plus a hero exported as a 2,000-pixel PNG. Exporting the hero at 800 pixels as WebP takes it from over a megabyte to well under 100 KB. Batch-convert the grid, lazy load below the first row and drop an unused font and two idle scripts, and pages like this routinely land under 2.5 seconds with no redesign. Recheck monthly.

Accessibility that also helps SEO

Accessibility on a cannabis website gets most of its benefit from four fixes: descriptive alt text, text contrast of at least 4.5:1, a menu and cart that work with a keyboard, and a visible focus outline. The Justice Department's guidance on web accessibility and the ADA explains why businesses open to the public should take this seriously. Three of the four also help Google: alt text gives words to images it can't see, per its image SEO best practices; semantic headings and buttons give crawlers the outline a screen reader uses; and link text like "Shop live resin" tells both where a link goes.

Check the gray-on-white trap. Soft #999 gray on white lands at about 2.8:1. Darkening it to #595959 clears 7:1 with no layout change. Button labels need the same 4.5:1, so pale green text on a slightly paler green button fails in sunlight.

Use real buttons. Indica, Sativa and Hybrid toggles built as clickable divs work for a mouse and nothing else. Rebuilt as button elements with labels and a focus style, they work for keyboards and screen readers with no visual change.

Test it in ten minutes: complete a purchase with only Tab, Shift-Tab and Enter, run a product page through a contrast checker, and listen to the menu with your phone's screen reader.

Conversion paths for dispensaries and brands

A conversion path is the route from a visitor's first page to an order, sign-up or store visit, and in cannabis, lifting conversion is often cheaper than finding more traffic. Give every page one primary action and make it the loudest element: Shop the menu on a category page, Get directions on a location page, Join rewards on a loyalty page. A category hero with four equal buttons scatters clicks; one bold Shop the menu button with the rest as a quiet text row gives the path to the menu nothing to compete with. Name the value on the button: Reserve my pickup order feels like progress, Submit feels like a chore.

For dispensaries, order-ahead is the money action. Buy something on your own site on a phone and note every pause. Common leaks are forced account creation (offer guest checkout and save details afterward), selectors that reset, and payment surprises. Card processing is restricted for cannabis, so say how payment works (cash, debit, ACH or a specific app) on the product page and at the start of checkout, and tell people what ID they'll need at pickup or delivery. Expected friction gets tolerated. A surprise at the last step gets abandoned.

Build for people who come back. A Buy it again row for signed-in customers turns a six-tap reorder into two. Put loyalty on the site with a page titled your brand plus "rewards" that leads with the perks, spells out earning and redemption, and keeps sign-up to one or two fields wired to Springbig, Alpine IQ or your tool of choice.

Collect contacts the legal way. Ask only for fields you will use, and add a 21-or-older checkbox. Texts fall under the Telephone Consumer Protection Act (47 U.S.C. 227), so put an unchecked SMS consent box beside the phone field; email needs honest opt-in and a working unsubscribe under CAN-SPAM. Our guide to cannabis SMS and push notification rules covers each channel.

For brands, the path runs through landing pages and the blog. Write the H1 to match the search. A live resin page headed "Premium Extracts" with three sentences and equal-weight Buy now and newsletter buttons gives Google nothing. Retitled "Live Resin Cartridges," with a short section on how it's made, the batch COA under the potency and reviews beside one buy button, the same page can rank and sell. In blog posts, link products where they come up and close with a category call to action matched to intent: explainers point to education or a broad category, comparisons can link straight to products. Brands without direct sales keep a crawlable, current where-to-buy page.

Measuring and testing the design

Measuring a cannabis site's design starts with finding the step that leaks. Build a GA4 funnel for product view, add to cart, begin checkout and purchase. If eighty percent of add-to-carts never begin checkout, look at the cart and the payment reveal before touching product pages. Use path exploration to find high-traffic posts that never send anyone to a product. Read engagement rate in place of the old bounce rate, judged against each page's purpose. Our guide to tracking conversions from cannabis organic search covers the events to set up.

Test one change at a time. GA4 plus a simple split tool covers most stores. Change one element per test, such as Add to cart against Add to order, and keep tests to presentation: layout, button color and label, image order. Showing crawlers different indexed text than shoppers see is cloaking under Google's spam policies. Cannabis traffic is lower than mass-market ecommerce, so let tests run for weeks until the gap holds steady, then ship the winner and start the next.

If you want an outside read on where your site loses shoppers and rankings, our cannabis SEO audit checks the age gate, crawl paths, page templates, speed and conversion steps together and ranks the fixes by impact.

Frequently asked questions

Does an age gate hurt SEO on a cannabis site?

Not if it is built as an overlay. A JavaScript overlay sits on top of the real page, so crawlers still read the content in the HTML. A redirect gate that sends every visitor to a separate verification URL can leave Google indexing only the gate. Google's interstitial guidance also exempts age verification dialogs required by law.

Should a dispensary use a Dutchie or Jane menu embed?

Embeds handle inventory and compliance well, and most dispensaries use one. Products inside an iframe usually do not count as content on your domain, so keep crawlable category pages and descriptive text on your own site around the embed, and make the menu button easy to find on every page.

What Core Web Vitals scores should a cannabis site hit?

Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less, and Cumulative Layout Shift at 0.1 or less, measured on mobile. Oversized product images cause most failures, so resizing, converting to WebP and lazy loading below the fold usually fixes the biggest problems.

What should go above the fold on a dispensary homepage?

Open status with today's hours, the address linked to a map, a tap-to-call phone number, pickup or delivery availability and one large Shop the menu or Order pickup button. The brand story, deals and blog can sit lower for people who scroll.

How do I explain cannabis payment limits without losing sales?

State the accepted payment methods on the product page and again at the start of checkout, with a short FAQ explaining why cards may not work. Shoppers accept a limit they hear about early. The orders you lose are the ones where it appears for the first time on the final screen.