InsideOut Hardware: BigCommerce Store Redesign & Conversion UX

Type

InsideOut Hardware

Role

BigCommerce Stencil · Handlebars.js · SCSS · Vanilla JS

Stack

BigCommerce Stencil · Handlebars.js · SCSS · Vanilla JS

Status

The Problem: A Generic Storefront With No Filtering or Stock Visibility

InsideOut Hardware sells cabinet handles, door knobs, hinges, bathroom hardware, lighting and more across hundreds of SKUs. The existing store lacked a premium brand identity, making it look generic against specialist hardware competitors. Category navigation was text-only and slow to scan. Category pages had no sidebar filters so customers had to scroll through dozens of products to find the right specification. Product pages did not show stock status, creating hesitation at the point of purchase. There was no add-to-cart confirmation — customers had no way of knowing their item was added without navigating to the cart manually.

The Solution: A Conversion-Focused BigCommerce Stencil Redesign

Codinative redesigned the full BigCommerce store with a bold navy and gold identity that positions InsideOut Hardware as a premium destination. A horizontal icon-based category navigation bar gives every customer an instant visual map of the product range. Category pages include subcategory filters and a price range slider so customers narrow to the right product in seconds. Product pages show live stock status, quantity selectors and three distinct purchase CTAs. An add-to-cart popup confirms item additions and drives immediate checkout conversion. A structured cart page with coupon input and a prominent Checkout Now CTA completes the purchase funnel.

Project Framework

InsideOut Hardware Store Redesign: Situation, Task, Action, Result

The Situation: No Premium Identity, Filtering, or Stock Visibility

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.

The Task: Redesigning Every Core Page on BigCommerce Stencil

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.

The Action: Custom Stencil Templates From Homepage to Cart

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.

The Result: A Complete Conversion Funnel From Landing to Checkout

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

Core Features of the BigCommerce Store Redesign

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

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

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

Deliverables

InsideOut Hardware Store Redesign: What Was Shipped

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

Common Questions

InsideOut Hardware BigCommerce Store Redesign FAQ's

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.

What is an installer network sign-up section on BigCommerce?

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.

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.