ProCannabis: BigCommerce Homepage Redesign & Conversion UX

Type

BigCommerce Homepage Redesign · Conversion Rate Optimisation

Role

BigCommerce Stencil · Handlebars.js · Catalog API · Vanilla JS · Custom CSS

Stack

BigCommerce Stencil · Handlebars.js · Catalog API · Vanilla JS · Custom CSS

Status

The Problem: No Product Discovery Structure or Visible Trust Signals

The ProCannabis homepage had no visual hierarchy. Products appeared without context, categories were buried in navigation menus, and there was no mechanism to connect a customer’s goal to the right product. A first-time customer had nowhere to begin. A returning shopper had to scan the full catalogue manually. The loyalty programme was invisible on the homepage. Trust signals like same-day delivery and free shipping thresholds did not appear above the fold. The homepage was processing traffic, not converting it.

The Solution: Six Conversion-Focused Homepage Sections

Codinative redesigned the full homepage with six custom BigCommerce Stencil sections. A campaign hero with mega navigation and trust bar converts first impressions into intent. An intent-based shopping grid with five outcome filters guides every customer type to the right product category in one click. A best-sellers carousel pulls live data via the Catalog API. A loyalty programme section turns visitors into members. A product FAQ block targets education queries for Google featured snippet capture.

Project Framework

ProCannabis Homepage Redesign Development: Situation, Task, Action, Result

The Situation: No Discovery Structure, Navigation Paths, or Trust Signals

The ProCannabis BigCommerce homepage lacked product discovery structure, clear intent-based navigation paths and visible trust signals. Users arrived and struggled to understand the product range, find relevant categories or see the value of shopping here rather than elsewhere.

The Task: Redesigning the Homepage for Fewest Clicks to Purchase

Redesign the full homepage on BigCommerce Stencil with a conversion-focused layout that guides every customer type from the landing moment to the right product in the fewest clicks possible without a third-party page builder app.

The Action: Six Custom Stencil Sections Built From Hero to FAQ

Designed and built six custom Stencil homepage sections: a campaign hero with mega navigation, a three-item trust bar above the fold, an intent-based shopping grid with five outcome filters linking to pre-filtered category URLs, a category grid with promotional banner, a best-sellers carousel via the Catalog API, and a loyalty programme section with brand story. Added a product FAQ block targeting customer education queries.

The Result: A Direct Path From Every Customer Type to the Right Product

Every customer type now has a direct path from the homepage to the right product. Trust signals appear before scrolling starts. The loyalty programme sign-up is a featured homepage section. The homepage works as a conversion surface across every device and screen size.

Core Features

Core Features: Six Sections, Every One With a Job to Do

Feature 01

Hero Section: Campaign Banner with Full Navigation Menu

The hero loads with an active campaign banner showing the current product promotion, benefit badges and a Shop Now CTA. Directly below it, a three-item trust bar confirms same-day New York delivery, free domestic shipping on orders over $59 and loyalty programme membership — all visible before any scrolling. The mega navigation gives customers eight category groups from the first moment they arrive on the page. Full-width campaign banner swappable per promotion via the BigCommerce theme editor Mega navigation with eight category groups including Shop by Concern Three-item trust bar covering delivery, shipping threshold and loyalty above the fold Announcement bar confirming discreet shipping on all orders Full-width campaign banner swappable per promotion via the BigCommerce theme editor Mega navigation with eight category groups including Shop by Concern Three-item trust bar covering delivery, shipping threshold and loyalty above the fold Announcement bar confirming discreet shipping on all orders

Feature 02

Trust Bar and Concern-Based Shopping: Targeted Product Discovery

Five outcome tiles Higher Tolerance, Feel Just Right, Lower Tolerance, Sleep Better, Relieve Your Body each link to a pre-filtered BigCommerce category URL. Built as a custom Stencil section in Handlebars.js. A first-time buyer discovery banner below the grid guides customers who are uncertain what to buy toward a starter pack CTA from $6.99. • Five intent tiles each linking to a pre-filtered BigCommerce category URL • Custom Stencil section configurable via the BigCommerce theme editor • First-time buyer discovery banner with starter pack CTA Five outcome tiles — Higher Tolerance, Feel Just Right, Lower Tolerance, Sleep Better, Relieve Your Body — each link to a pre-filtered BigCommerce category URL. Built as a custom Stencil section in Handlebars.js. A first-time buyer discovery banner below the grid guides customers who are uncertain what to buy toward a starter pack CTA from $6.99. Five intent tiles each linking to a pre-filtered BigCommerce category URL Custom Stencil section configurable via the BigCommerce theme editor First-time buyer discovery banner with starter pack CTA from $6.99 Matches how customers think about outcomes rather than product category names

Feature 03

Best Sellers Carousel: Top Products by Brand

A custom Stencil section queries the BigCommerce Catalog API for featured products. Each card renders product name, brand name, price, product image and a Shop Now CTA via Handlebars.js. Vanilla JavaScript handles carousel arrow navigation. The same section reflows to a single column on mobile without a separate mobile template or additional configuration. Live product data pulled directly from the BigCommerce Catalog API Brand name shown on every card to build supplier trust and recognition Two-by-two grid layout with JavaScript carousel arrow navigation Fully responsive — single column stack on mobile with no extra configuration

Feature 04

Category Grid and Promotional Banner: Shop by Product Type

Four category tiles — Flower, Vape, Edibles, Drinks — each with a distinct background colour and icon link directly to BigCommerce category pages. Below the grid a full-width promotional banner with a product image highlights a specific category campaign. Both sections are standalone Stencil sections configurable through the theme editor without code changes. Four category tiles each linking to a BigCommerce category URL Distinct colour and icon per category for fast visual recognition Promotional banner below the grid with swappable image and CTA Both sections fully configurable via the BigCommerce theme editor

Feature 05

Loyalty Programme Section: Rewards, Savings and Brand Story

The loyalty section shows 30K+ satisfied customers as social proof, explains the 100-points-per-$1 earning rate and presents a Sign Up Now CTA. The brand story section covers the full product range with an affordability value proposition. The product FAQ accordion targets common pre-purchase questions and is structured for Google featured snippet capture and AI Overview citation. Loyalty card with 30K users social proof badge, earn rate and Sign Up CTA Brand story section covering product range and affordability value prop FAQ accordion with four or more product education questions FAQ structured for featured snippet capture and AI Overview citation

Feature 06

Dispensary Overview and FAQ: Authority and Customer Education

The dispensary overview section introduces ProCannabis with a multi-image product showcase, a brand authority headline and a descriptive copy block that explains the product range, same-day delivery availability and compliance positioning. The FAQ accordion below it targets product education queries — edibles shelf life, THCa potency, mushroom supplement health information — adding E-E-A-T signals for Google and reducing pre-purchase hesitation for customers who need to learn before they buy. Multi-image product grid showcasing the full range from flower to edibles to wellness Brand authority headline and descriptive copy block with delivery and compliance messaging FAQ accordion with four or more dispensary education questions targeting search queries FAQPage schema structured for featured snippet capture and Google AI Overview citation

Deliverables

ProCannabis Homepage Redesign: What Was Shipped

Campaign hero banner with swappable image, headline, benefit badges and CTA

Mega navigation with eight category groups including Shop by Concern

Three-item trust bar covering same-day delivery, free shipping threshold and loyalty

Intent-based shopping grid with five outcome filters linking to pre-filtered category URLs

First-time buyer discovery banner with starter pack CTA from $6.99

Best-sellers carousel via Catalog API with brand names and JavaScript two-by-two grid

Category grid covering Flower, Vape, Edibles and Drinks with colour-coded tiles

Promotional banner below category grid with swappable campaign image and CTA

Loyalty programme section with 30K users social proof badge and earn rate

Brand story section covering product range and affordability value proposition

Product FAQ accordion with four or more education questions targeting search queries

Dispensary overview section with multi-image product grid and brand authority copy block

FAQPage schema structured for Google featured snippet capture and AI Overview citation

Fully responsive layout across desktop, tablet and mobile viewports

Common Questions

ProCannabis Homepage Redesign FAQ's

What is intent-based product discovery on a BigCommerce homepage?

Intent-based product discovery organises a homepage so customers navigate by what they want to achieve rather than by product category alone. On a BigCommerce store this means building custom Stencil sections that map outcome-labelled tiles to pre-filtered category URLs. Customers who know the result they want but not which product to buy reach the right products in one click without browsing the full catalogue.

How does a BigCommerce homepage redesign improve conversion rates?

A structured redesign reduces the number of clicks between landing and purchase. A trust bar showing same-day delivery and free shipping thresholds above the fold removes purchase hesitation before a customer starts browsing. Intent-based navigation matches customer goals to products without requiring them to know category names. A best-sellers carousel with brand attribution builds product credibility fast. Each section removes a specific friction point that previously caused visitors to leave without converting.

Does a BigCommerce homepage redesign require modifying Stencil theme files?

Yes. A full homepage redesign requires custom Stencil section templates built in Handlebars.js and CSS. Each section is a standalone Stencil file which means future edits are possible without touching the core theme layout. The product carousel pulls live data from the BigCommerce Catalog API so content stays current without manual updates after launch.

How is a best-sellers carousel built on BigCommerce Stencil?

The best-sellers carousel is a custom Stencil section that queries the BigCommerce Catalog API for featured products. Each card renders product name, brand name, price, product image and a Shop Now CTA via Handlebars.js. Vanilla JavaScript handles the carousel navigation. The section stacks to a single column on mobile without a separate mobile template or additional configuration.

Can this BigCommerce homepage layout be used for other online retail stores?

Yes. The architecture uses standalone Stencil sections and the Catalog API for live product data. The intent-based grid, category tiles and loyalty section are all configurable through BigCommerce custom fields and theme editor settings after the initial build. No code changes are required to update content, swap campaigns or add new intent categories.

How long does Codinative take to redesign a BigCommerce homepage?

A full BigCommerce homepage redesign covering a hero banner, trust bar, intent-based shopping grid, category grid, best-sellers carousel, loyalty section and product FAQ takes Codinative four to six weeks from discovery to live deployment. That timeline includes responsive QA across devices and browsers and full content population across all sections.

Codinative is a verified BigCommerce Partner. Every project is BigCommerce only — no split focus across platforms

Custom apps, B2B Edition, Stencil and Catalyst storefronts, REST API v3 integrations — built by
developers who work on BigCommerce every day.