ProCannabis BigCommerce Homepage Redesign and 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

App Dev Framework
REST API v3
OAuth 2.0
Webhooks
BigDesign
React
Node.js
PostgreSQL

01 The Problem

BigCommerce ships every merchant the same registration form. It collects a name, an email, and a password, and it creates an account on the spot no review, no qualification, no custom data.

That works for a standard retail store. It breaks immediately for merchants running wholesale programs, trade pricing, B2B onboarding, or members-only access. They need to know who is signing up before granting access. They need custom fields company name, trade pricing eligibility, purchase intent, tax ID. They need an approval step that sits between the application and the account.

Without a solution built for BigCommerce, merchants were stitching together generic form plugins with no real platform integration, creating customers manually inside the admin, and managing approvals through email threads. Submission data lived in spreadsheets. Nothing connected back to the customer record in BigCommerce. The process was slow, inconsistent, and entirely dependent on someone remembering to follow up.

02 The Solution

Codinative built a custom BigCommerce app that replaces the default registration flow with a controlled, branded, fully automated onboarding pipeline.

It installs natively into the merchant’s BigCommerce control panel through the App Development Framework, authenticated via OAuth 2.0. Customer creation on approval goes through the REST API v3. The active form injects into the storefront through the Scripts API. Every state change fires through Webhooks that trigger the correct branded email the moment a decision is made.

Merchants build forms visually without writing code. Every submission enters an approval queue. Approvals create a real customer in BigCommerce with all submitted data attached. Rejections and resubmission requests send the right branded email automatically. The entire pipeline lives in one dashboard inside the control panel. No spreadsheets. No manual emails. No developer needed after install.

Project Framework

Situation · Task · Action · Result

S Situation

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.

T Task

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.

A Action

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.

R Result

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

Six sections. Every one with a job to do.

01 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

02

03 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

04

05 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

06

01 Feature 01

Visual Form Builder

The builder splits into a field palette and a real-time live preview. Drag a field in, the preview updates immediately. Thirteen field types across four groups.

Basic Inputs — Text · Email · Phone · Number
Selection Fields — Textarea · Select · Radio · Checkbox
Address Fields — Country · State/Province
Special Fields — Date · File · URL

A theme editor handles form colors, typography, and button styles — no CSS needed. First Name, Last Name, Email, and Password are locked because BigCommerce requires them to create a customer through the REST API v3. Desktop and Mobile viewport toggles let merchants verify the form renders correctly before it goes live.

Core Features

Architecture

Registered through the BigCommerce App Development Framework. OAuth 2.0 handles authentication through a standard handshake identical to every app in the BigCommerce App Marketplace. Customer creation uses the REST API v3 Customers endpoint. The active form injects into the storefront through the Scripts API. Submission and approval events fire through Webhooks that trigger email dispatch the moment a status changes. The dashboard runs on BigDesign tokens for native control panel styling with custom React components for the form builder and preview.

Layer	Technology
App Framework	App Framework
Authentication	OAuth 2.0
Customer Creation	BigCommerce REST API v3
Storefront Injection	Scripts API
Event Layer	Webhooks
Admin UI	BigDesign + React
Backend	Node.js
Database	PostgreSQL
Email	Transactional Email API

What Was Shipped

Deliverables

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

BigCommerce app with OAuth 2.0 install flow and native control panel integration

No-code visual form builder — 13 field types, live preview, theme editor

Multi-form library with independent configurations and one-click exclusive activation

Approval workflow engine — Pending · Approved · Rejected · Resubmission

Filterable, searchable request management queue

Applicant detail view with full submission data and instant action buttons

Five branded transactional email templates — merge variables, Custom HTML, live preview

Analytics dashboard with real-time approval rate and recent submissions

Native BigDesign UI throughout — matches BigCommerce admin exactly

Common Questions

Frequently Asked Questions

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.

What is a custom signup form app for BigCommerce?

It replaces the native BigCommerce customer registration with a configurable form that routes every submission into a merchant-controlled approval workflow. The merchant collects whatever data the business needs, reviews applications from a centralized dashboard, and approves or rejects them before a customer account is created in BigCommerce through the REST API v3. It installs directly into the control panel through the App Development Framework no third-party dashboard, no separate login.

Why does this need to be a BigCommerce app and not a script or plugin?

A script tag renders a form in the storefront but cannot create customers, listen to Webhooks, or build an admin UI inside the BigCommerce control panel. The App Development Framework provides OAuth 2.0 authentication and authorized REST API v3 access both required for an approval workflow that produces real customer records with full attribute data in BigCommerce. Any solution not built on the App Development Framework has no reliable path to the customer API.

What OAuth scopes does the app request?

Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here

Does this app support B2B and wholesale onboarding on BigCommerce?

Three at install. store_v2_customers to create approved customers through the REST API v3. store_themes_manage to inject the active form into the storefront via the Scripts API. store_v2_information_read_only for store context currency, locale, platform name. No payment, order, catalog, or financial data scopes are requested.

Can merchants switch between different signup forms for different campaigns?

Yes. The approval workflow, custom fields for business qualification trade pricing eligibility, company type, purchase intent, order volume and the applicant detail view with instant actions make this a direct fit for wholesale gating, trade pricing programs, B2B Edition onboarding, and any merchant who needs to qualify buyers before granting account access.

What happens the moment a merchant approves an applicant?

Yes. Every saved form keeps its own field configuration and theme independently. Merchants build once, deactivate after the campaign, reactivate next time with one toggle. Nothing is rebuilt. Wholesale forms, seasonal forms, and standard forms all live in the same library and switch in a single click.

Can this be built as a private app for one store instead of a marketplace app?

Yes. Codinative builds both App Marketplace apps and private single-client apps. A private app installs into one store only, carries the merchant's branding throughout, and bypasses the marketplace review timeline. It is the right choice when the app handles logic specific to one merchant's operation.

How long does it take to build a BigCommerce app like this?

Six to ten weeks from discovery to App Marketplace submission. That covers OAuth setup, REST API v3 integration, dashboard UI, cross-device QA, and the BigCommerce security review. Private apps without the marketplace review run slightly faster.

Codinative is a verified BigCommerce Partner.

Codinative designs and builds custom BigCommerce storefronts. Stencil homepages, conversion-focused layouts, category UX, B2B Edition and REST API v3 integrations. BigCommerce only. Every project, every developer, every day.