Tellason BigCommerce Store Redesign and Premium Apparel Experience

Type

Tellason

Role

BigCommerce Stencil · Handlebars.js · Vanilla JS · SCSS

Stack

BigCommerce Stencil · Handlebars.js · Vanilla JS · SCSS

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

Tellason’s BigCommerce store did not reflect the premium positioning of the brand. The homepage lacked organised product discovery, category pages had no search or filter tools, product pages had no clear purchase hierarchy, and the cart and checkout felt disconnected from the brand identity built around craft, durability and editorial detail.

T Task

Redesign the full BigCommerce store with a clean editorial aesthetic that communicates brand quality immediately — tabbed homepage collection, searchable category pages, structured product pages with size selection and Afterpay, and a clear cart and checkout flow — all built on BigCommerce Stencil without a page builder.

A Action

Built a custom Stencil theme with high whitespace, bold uppercase typography and orange as the single accent. Delivered a tabbed homepage collection section with vanilla JavaScript tab switching, category pages with full-width search and Sort By, product pages with multi-image gallery, waist size selector, Afterpay instalment messaging and Add to Cart, a cart page with order summary and PayPal, and a multi-step accordion checkout with a live order summary column.

R Result

Tellason now has a BigCommerce store that matches the quality of the garments it sells. Homepage visitors reach every collection in one click. Product pages communicate value clearly with size options, Afterpay split and a single prominent CTA. The cart and checkout reduce friction with structured order summaries and multiple payment options available before and during checkout.

Core Features

Five page templates. One premium denim store.

01 Feature 01

Homepage: Tabbed Collection Grid and Navigation

The homepage centres on an Our Selection section with five category tabs — New Arrivals, Jeans, Other Pants, Tops and Accessories — displayed as orange pill buttons above a three-column product grid. Clicking a tab switches the product cards instantly using vanilla JavaScript with no page reload. Each product card shows the product image on white, product name, price and a Choose Options arrow CTA. A wishlist heart icon sits in the top right of every card. The Tellason Rewards loyalty widget appears as a persistent element across the store. Five collection tabs — New Arrivals, Jeans, Other Pants, Tops, Accessories — as orange pill buttons Vanilla JavaScript tab switching — product grid updates instantly without a page reload Three-column product grid with product image, name, price and Choose Options CTA Wishlist heart icon on every product card — persists to BigCommerce customer wishlist Tellason Rewards loyalty widget persists sitewide as a branded sticky element

Feature 01

Category Page: Product Listing with Sort and Search

Every collection category — Shop Our Collection, Jeans, Pants, Tops — has a clean white category page with a full-width search input above the product grid and a Sort By Featured Items dropdown anchored to the right. Product cards show the product photograph on white, product name in uppercase, price, a Choose Options orange CTA and a Compare checkbox below the CTA. A wishlist heart icon sits in the top right corner of the image area on each card. Built as a custom BigCommerce Stencil category template. Full-width search input — filters by product name in real time across the collection Sort By Featured Items dropdown — controls display order across the full product grid Three-column product cards with image, name in uppercase, price and Choose Options CTA Wishlist heart icon on every card — saves to BigCommerce customer wishlist Compare checkbox per card — lets customers compare multiple products side by side

02 Feature 03

Product Detail Page: Size Options, Pricing and Add to Cart

The product detail page template uses a three-column layout — vertical thumbnail strip on the left, large primary image in the centre and product information on the right. The information column shows the product title, a 5.0 star rating with a Write a Review link, a Waist Size required selector, a quantity picker, a Price and Add to Cart panel and Afterpay instalment messaging. A Details section below the fold provides the full product description and four bullet-point feature callouts. Clicking a thumbnail swaps the primary image via vanilla JavaScript. Vertical thumbnail strip with four images on the left — click to swap the primary image 5.0 star rating with Write a Review link displayed below the product title Waist Size required dropdown selector — marked with an asterisk, must be selected before add Quantity picker with decrement and increment controls Afterpay instalment messaging — 4 interest-free payments calculated from the live product price Details section with product description and four bullet-point feature callouts below the fold

Feature 04

Cart Page: Order Summary and Multi-Payment Checkout

The cart page shows a Shopping Cart heading with item count, then a two-column layout. The left column has the cart item with thumbnail image, product name in uppercase, price, selected variant, a Change link for variant editing, quantity controls and a remove button. The Order Summary panel on the right shows product line, total price, a shipping Add Info link, a Coupon Code field, Grand Total and a prominent orange Check Out button. PayPal and Pay Later appear as alternative payment options below the order summary. Cart item with image, product name in uppercase, price, selected variant and Change link Quantity controls with minus and plus buttons — quantity updates the order summary total Order Summary with product line, total price, shipping input and coupon code field Grand Total displayed clearly before the checkout CTA PayPal and Pay Later as alternative payment options below the Check Out button

04

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

Custom BigCommerce Stencil theme with high whitespace editorial design and orange accent sitewide

Free shipping promotional bar — "Free Shipping and Returns in the U.S. on Orders $150 plus" — sitewide

Tabbed homepage collection — New Arrivals, Jeans, Other Pants, Tops, Accessories — with vanilla JavaScript tab switching

Three-column homepage product grid with product image, name, price and Choose Options CTA

Category pages with full-width search input, Sort By dropdown and wishlist heart per card

Compare checkbox on every category product card for side-by-side product comparison

Product pages with vertical thumbnail strip, large primary image and vanilla JavaScript image swap on thumbnail click

Waist Size required dropdown selector, quantity picker and Price plus Add to Cart panel on product pages

Afterpay instalment messaging — 4 interest-free payments calculated from live product price

Cart page with order summary, shipping input, coupon code field, Grand Total and Check Out CTA

PayPal and Pay Later as alternative payment options on the cart page and inside checkout

Multi-step accordion checkout with Customer, Shipping, Billing and Payment steps and persistent order summary

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 a tabbed homepage collection grid on BigCommerce?

A tabbed homepage collection grid on BigCommerce is a custom Stencil section that displays product categories as tab buttons — New Arrivals, Jeans, Other Pants, Tops, Accessories — above a product grid. Clicking a tab swaps the product cards in the grid using vanilla JavaScript without a page reload. Each product card shows the product image, name, price and a Choose Options CTA. It gives homepage visitors immediate access to every collection without navigating away from the landing page.

How does Afterpay integration work on a BigCommerce product page?

Afterpay on a BigCommerce product page displays an instalment message below the product price — for example, 4 interest-free payments of $56.25 with the Afterpay logo and an information icon. BigCommerce has native Afterpay support through its payment provider integrations. The messaging renders via a Stencil product template partial that checks for Afterpay availability and outputs the instalment amount calculated from the product price.

How is the checkout page customised on BigCommerce?

BigCommerce checkout customisation is done through the Checkout SDK or by styling the native optimised one-page checkout. The Tellason checkout shows Customer, Shipping, Billing and Payment as collapsible accordion steps. The right column shows an Order Summary with itemised product, variant, subtotal, shipping, sales tax and total. PayPal Checkout and Pay Later buttons appear as alternative payment methods inside the Customer step.

How is the BigCommerce category page built for a premium apparel store?

+ A BigCommerce category page for a premium apparel brand uses a custom Stencil category template with a full-width search input above the product grid, a Sort By Featured Items dropdown on the right and three-column product cards. Each card shows the product image on white, product name in uppercase, price, a Choose Options CTA and a Compare checkbox. A wishlist heart icon sits in the top right corner of each card.

What is included in a BigCommerce cart page for a premium fashion store?

The Tellason BigCommerce cart page shows a Shopping Cart heading with item count, a product row with thumbnail image, product name in uppercase, price, size variant, a quantity selector with minus and plus controls and a remove button. The Order Summary panel on the right shows product price, shipping Add Info link, Coupon Code field, Grand Total and a prominent Check Out button. PayPal and Pay Later appear below the order summary as alternative payment options.

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

A full BigCommerce apparel store redesign covering a tabbed homepage collection, category pages with search and sort, product pages with size selector and Afterpay, cart with PayPal and multi-step checkout takes Codinative six to ten 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, editorial UX, B2B Edition and REST API v3 integrations. BigCommerce only. Every project, every developer, every day.