Tile & surfaces catalogue with a custom quote calculator

Project Overview

Design and WordPress + WooCommerce build of a product catalogue for a Miami tile and surfaces showroom, with a custom calculator for boxes, pallets, delivery and price. Ongoing maintenance since 2024.

See all work Preview site

E-commerce / Products

Industry

2024–now

Year

Catalogue filter groups

WooCommerce, WordPress

Platform

Tile & surfaces catalogue with a custom quote calculator

Screens

Inside theproject.

01 / 06←→

Collection page

Screen 01 of 06

02 / 06←→

Product page & calculator

Screen 02 of 06

03 / 06←→

Customer dashboard

Screen 03 of 06

04 / 06←→

Rewards account

Screen 04 of 06

05 / 06←→

Wishlist folders

Screen 05 of 06

06 / 06←→

Wishlist sharing & PDF

Screen 06 of 06

07 / 07←→

Loyalty rewards program

Screen 07

08 / 08←→

Account on tablet & mobile

Screen 08

09 / 09←→

Mobile product & calculator

Screen 09

←→01 / 06

The Brief

The showroom carries a large range of tiles and surfaces sold by the box, by the square foot and on pallets. Customers kept asking the same questions: how many boxes do I need, will it fit on one pallet, and what will it cost? The site had to answer that on its own, present the range like a design catalogue, and give designers and homeowners a place to plan their projects and keep coming back.

The Approach

A calm black-and-white layout with Avenir type lets the colourful products carry the design, framed by warm clay and sage illustrations. I built a filterable WooCommerce catalogue (material, colour, use, type and price), detailed product pages with colour variants, and custom code for the calculator that turns square footage into boxes, pallets, delivery space and an estimated price. On top of the catalogue I designed a customer dashboard with wishlists grouped into colour-coded project folders that can be shared, downloaded as a PDF or sent to the sales team with one request, plus a loyalty rewards program with Bronze, Silver and Gold tiers.

The Outcome

A catalogue that customers can explore on any device, a calculator that removes guesswork from quoting, and wishlists that turn browsing into ready-to-quote project lists, saving the sales team repeated back-and-forth. The rewards program gives trade and retail customers a reason to return. The site keeps growing through ongoing maintenance and new features.

About the Project

A Miami showroom for designer tiles, stone and architectural surfaces needed a website that works like a curated catalogue rather than a typical online shop. Customers browse hundreds of products, compare colour options and request quotes for real projects.

I designed the site and built it in WordPress with WooCommerce set up as a catalogue. The heart of the project is a custom-coded calculator: enter the surface area and it works out how many boxes of tile are needed, how many pallets that makes, how much space oversized items take up for delivery, and the estimated price. Since 2024 I have also looked after the site, adding products and new features.

Deliverables

Website design: home, catalogue, product pages
WordPress + WooCommerce catalogue build
Custom tile & pallet calculator
Customer dashboard & wishlist system
Loyalty rewards program pages
Desktop, tablet & mobile layouts
Ongoing maintenance & new features

Features

Boxes, pallets & delivery calculator
Estimated price per project
Filters by material, colour, use & type
Colour variants on product pages
Wishlists in colour-coded project folders
Share, PDF download & request info
Loyalty points with Bronze, Silver & Gold tiers
Trade application & newsletter

Client feedback