Tellason: BigCommerce Store Redesign & Premium Apparel Experience

Type

Tellason

Role

BigCommerce Stencil · Handlebars.js · Vanilla JS · SCSS

Stack

BigCommerce Stencil · Handlebars.js · Vanilla JS · SCSS

Status

The Problem: A Storefront That Didn't Match a Premium Denim Brand

Tellason makes premium denim and workwear — garment-dyed Italian-fabric trousers, heavyweight flannel shirts, selvedge jeans built for years of wear. The store did not reflect any of that. The homepage had no organised product discovery. Customers landing on the site could not instantly browse by collection type. Category pages lacked search and compare tools. Product pages had no clear purchase flow — no prominent size selector, no Afterpay messaging and no visual hierarchy guiding customers to Add to Cart. The cart and checkout felt generic, with no brand continuity from product page to order confirmation.

The Solution: A Full Editorial Redesign Across Every Page Template

Codinative redesigned every page of the Tellason BigCommerce store with a clean editorial aesthetic — high whitespace, bold uppercase typography and the brand’s orange as the single accent colour throughout. A tabbed collection grid on the homepage lets visitors switch between New Arrivals, Jeans, Other Pants, Tops and Accessories instantly. Category pages gained full-width search, Sort By and per-product comparison. Product pages display a vertical thumbnail gallery, size selector, quantity picker, Afterpay instalment calculation and a clear Add to Cart CTA. Cart and checkout were rebuilt with structured order summaries, coupon input, PayPal and multi-step accordion checkout.

Project Framework

Tellason Store Redesign Development: Situation, Task, Action, Result

The Situation: No Discovery Structure, Purchase Hierarchy, or Brand Continuity

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.

The Task: Redesigning Homepage, Category, Product, Cart and Checkout

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.

The Action: A Custom Editorial Stencil Theme Across Five Templates

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.

The Result: A Store That Matches the Quality of the Garments It Sells

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

Core Features: Five Page Templates, One Premium Denim Store

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 02

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

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

Deliverables

Tellason Store Redesign: What Was Shipped

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

Common Questions

Tellason Store Redesign FAQ's

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.

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.