InsideOut Hardware BigCommerce Store Redesign and Conversion UX

Type

InsideOut Hardware

Role

BigCommerce Stencil · Handlebars.js · SCSS · Vanilla JS

Stack

BigCommerce Stencil · Handlebars.js · SCSS · Vanilla JS

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

InsideOut Hardware’s BigCommerce store lacked a premium brand identity, had no visual category navigation, no sidebar product filters and no stock status indicators. Customers browsing large hardware categories had no efficient path from landing to the right product, and the generic design failed to communicate brand credibility.

T Task

Redesign the full BigCommerce store with a premium navy and gold visual identity. Build custom templates for the homepage, category pages, product pages and cart. Introduce icon navigation, sidebar filters with price slider, stock visibility, add-to-cart confirmation and a structured checkout flow — all on BigCommerce Stencil without a page builder app.

A Action

Designed a navy and gold brand system and implemented it across every Stencil template. Built a nine-tile icon category navigation bar as a custom Stencil section. Redesigned category pages with subcategory filter buttons and a JavaScript price range slider. Built product pages with a live stock status badge from the Stencil context object, quantity selector and three CTAs. Added a vanilla JS add-to-cart popup with order summary. Redesigned the cart with coupon input, order summary panel and prominent checkout CTA.

R Result

InsideOut Hardware now has a premium brand identity that matches the quality of the products it sells. Customers navigate nine product categories in one glance, filter by subcategory and price in seconds, see live stock availability on every product page and receive instant add-to-cart confirmation. The store functions as a complete conversion funnel from landing page to checkout.

Core Features

Five page templates. One premium hardware store.

01 Feature 01

Homepage: Hero Banner and Icon Category Navigation

The homepage opens with a free shipping promotional bar, a full navigation header with search and utility icons, and a nine-tile icon category navigation row that gives every visitor an instant visual map of the product range. Below the icon row a full-width hero banner promotes the current campaign with a Shop Now CTA. Built as custom Stencil sections — the icon nav is a Handlebars.js partial, each tile linking directly to a BigCommerce category URL. Nine icon category tiles — Cabinet Handles, Knobs, Hinges, Door Levers, Knobs, Hardware, Bathroom, Lighting, Home Hardware Each tile is a custom Stencil section partial linking to a BigCommerce category URL Full-width hero banner with campaign headline, sub-copy and Shop Now CTA Free shipping promotional bar — dismissable, configurable via theme editor Header with product name and brand search, wishlist, quote pad, cart and hamburger

Feature 02

Category Page: Lighting Products with Sidebar Filters and Price Slider

Every category page has a two-column layout — a sidebar on the left and a product grid on the right. The sidebar contains a text search filter, subcategory buttons (Indoor Lighting, Outdoor Lighting) and a JavaScript price range slider with min/max inputs and an Update button. The product grid controls — Sort By, Per Page, and Display Type column selector — sit above the product cards. Built entirely in BigCommerce Stencil with Handlebars.js and vanilla JavaScript. Sidebar text search — filters products by name, SKU or attributes in real time Subcategory filter buttons — Indoor Lighting and Outdoor Lighting as active/inactive toggles Price range slider with min/max dollar inputs and an Update button Sort By, Per Page and Display Type grid controls above the product listing Product cards showing product name, brand name and price — clean and scannable

02

03 Feature 03

Product Detail Page: Stock Status and Purchase Options

The product detail page template shows the product image, full product title, brand name, star rating with a Write a Review link, price, SKU, a live stock status badge and a quantity selector. Three distinct purchase CTAs give customers flexibility: Add to Cart for standard add-and-continue behaviour, Buy Now for direct checkout, and Ask Questions for pre-purchase support. The In Stock and Ready To Ship badge is rendered from the Stencil product.stock_status context variable without JavaScript. Live In Stock and Ready To Ship badge from the Stencil product context object Quantity selector with decrement and increment controls Three purchase CTAs: Add to Cart, Buy Now and Ask Questions Star rating display with Write a Review link SKU, brand name and price displayed clearly before the fold

Feature 04

Add-to-Cart Popup: Order Summary and Checkout Prompt

When a customer clicks Add to Cart, a confirmation popup appears over the current page without a redirect. It shows the item added, brand name, product title, quantity and price, a Proceed to Checkout primary CTA and a View Cart secondary link. The popup auto-closes after 8 seconds. Built by intercepting the Stencil cart.js add event and rendering a vanilla JavaScript modal — no redirect, no page reload, no library required. Popup shows item added, quantity, price and brand name immediately on add Proceed to Checkout CTA drives direct checkout from the product page View Cart secondary link for customers who want to continue shopping Auto-closes after 8 seconds — configurable delay, no manual dismiss required Built with vanilla JavaScript intercepting the Stencil cart event — zero libraries

04

05 Feature 05

Cart Page: Order Summary, Coupon Code and Checkout Flow

The cart page shows the full item list with product image, brand, name, price and quantity controls on the left. An order summary panel on the right shows subtotal, shipping estimate input, coupon code entry and grand total. A prominent Check Out Now button with a lock icon signals payment security. A You May Also Like upsell row below the cart items provides a cross-sell opportunity before checkout. Built as a custom BigCommerce Stencil cart template. Cart item list with product image, brand name, title, price and quantity controls Order summary panel with subtotal, shipping estimate and coupon code input Grand Total displayed prominently before the checkout CTA Lock icon on Checkout Now button — visual security signal at the conversion point You May Also Like upsell row below cart items for cross-sell revenue

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

Navy and gold brand identity system applied across all BigCommerce Stencil templates

Nine-tile icon category navigation bar as a custom Stencil section on the homepage

Full-width hero banner with campaign headline, sub-copy and Shop Now CTA

Free shipping promotional bar — dismissable and configurable via theme editor

Category page template with sidebar text filter, subcategory buttons and price range slider

Sort By, Per Page and Display Type grid controls on all category pages

Product page with live stock status badge from Stencil context — no JavaScript required

Three product page CTAs: Add to Cart, Buy Now and Ask Questions

Add-to-cart popup with product confirmation, Proceed to Checkout and auto-close after 8 seconds

Cart page with item list, order summary panel, coupon code input and grand total

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 icon-based category navigation on a BigCommerce store?

Icon-based category navigation replaces text-only navigation links with visual icon tiles displayed in a horizontal row below the header. On BigCommerce this is built as a custom Stencil section with Handlebars.js, each tile linking directly to a category URL. Customers identify the product category they need in one glance without reading a dropdown menu — particularly useful for stores with many distinct product types like InsideOut Hardware.

How does a BigCommerce category page price slider filter work?

A price range slider on a BigCommerce category page uses a custom JavaScript range input that filters displayed products by minimum and maximum price. The slider updates the URL query string and re-renders the product grid without a full page reload. Subcategory filter buttons above the slider let customers narrow by product type before applying the price range. Both controls are built in vanilla JavaScript and integrated with the BigCommerce Stencil category template.

Yes. A full BigCommerce store redesign requires a custom Stencil theme built in Handlebars.js and SCSS. Each page template — homepage, category, product, cart — is customised independently. Custom sections, global CSS variables for the brand colour system and Stencil component overrides give the store its distinct visual identity without relying on a third-party page builder app.

What is an add-to-cart popup on BigCommerce and how is it built?

An add-to-cart popup is a confirmation modal that appears after a customer clicks Add to Cart. It shows the product added, quantity, price, a Proceed to Checkout button and a View Cart link. On BigCommerce it is built by intercepting the Stencil cart.js add-to-cart event and rendering a custom modal with vanilla JavaScript and CSS. It auto-closes after a configurable delay and removes the need for a full page redirect to the cart.

How does the BigCommerce product page show live stock status?

BigCommerce Stencil exposes inventory data through the product context object in Handlebars. The product template reads the stock status and renders a green In Stock and Ready to Ship badge when inventory is available. The badge is a custom Stencil partial that checks the product.stock_status context variable and outputs the correct indicator without any JavaScript required.

How long does Codinative take to redesign a full BigCommerce store?

A full BigCommerce store redesign covering a custom homepage, category pages with sidebar filters, product pages with stock indicators, an add-to-cart popup and a cart page with coupon and checkout flow takes Codinative eight to twelve weeks from discovery to live deployment, including responsive QA across devices and browser testing.

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. Full store redesigns, Stencil theme development, conversion optimisation, category UX, B2B Edition and REST API v3 integrations. BigCommerce only. Every project, every developer, every day.