Rockbottom Northampton

rockbottomnorthampton.co.uk - Builders merchant & trade supplies with custom paint tools

The Brief

Rockbottom Northampton is a comprehensive builders merchant and trade supplier based in Northampton, stocking everything from electrical and plumbing supplies to hand tools, fixings, and paint. They needed a Shopify store that could handle a massive product range across dozens of trade categories, but the real challenge was the paint department - they wanted customers to be able to browse 3,000+ paint colours, visualise them on their own walls, and match colours from photos, all within the Shopify storefront.

What We Built

The Paint Colour Browser

A fully custom colour browsing system built as a Shopify section with dedicated JavaScript modules:

3,000+ Paint Colours - Complete colour database loaded from custom asset files (color-data.js), searchable by name, code, or hex value.
Colour Family Filtering - Filter by colour family (reds, blues, greens, neutrals, etc.) and by collection, with dynamic result counts.
Grid & List Views - Toggle between visual grid view showing colour swatches and detailed list view. Paginated at 24 colours per page.
Product Integration - Selecting a colour opens a modal showing all available paint products in that colour (matt emulsion, silk emulsion, eggshell, gloss, satin, masonry paint, woodstain, primers), with product images loaded dynamically from the Shopify catalogue.

The Paint Visualiser

This is the standout feature - a fully interactive, canvas-based room painting tool built entirely in custom JavaScript:

Room Photo Upload - Users upload a photo of their own room directly in the browser.
Intelligent Wall Detection - The tool analyses the uploaded image to detect wall areas, making it easy to paint large surfaces with a single tap.
Tap-to-Paint - Select a colour from the 3,000+ colour library, then tap any wall in the photo to instantly see it painted in that colour.
Brush Tool - For more precise painting, switch to brush mode with an adjustable brush size slider (5-50px) for detailed work around edges, trim, and features.
Eraser Tool - Remove paint from specific areas to reveal the original photo underneath.
Undo & Reset - Full undo history and one-click reset to start over.
Mobile Zoom Controls - Pinch-to-zoom and dedicated zoom buttons on mobile for precision painting on smaller screens.
Multi-Colour Support - Paint different walls in different colours and see them all together. A colour bar tracks every colour used in the design.

The Colour Matcher

A second tab in the visualiser lets users match colours from any photo:

Photo Upload & Tap-to-Match - Upload any image (a fabric swatch, a piece of furniture, an inspiration photo) and tap anywhere to sample the colour.
Nearest Paint Match - The tool finds the closest matching paint colour from the 3,000+ colour database, showing the match percentage, colour name, and hex code.
Use or Buy - One tap to use the matched colour in the room painter, or buy the paint directly.

PDF Generation

Create PDF - Generate a PDF document showing the painted room preview alongside all colours used, with colour names, codes, and QR codes linking to the products.
Save & Share - Download the painted room as an image, or share directly via the Web Share API on mobile.

The Store

Custom Shopify Theme - Clean, professional design using Montserrat headings and Nunito Sans body text.
100+ Product Categories - Comprehensive trade catalogue covering electrical, plumbing, hand tools, fixings, building materials, automotive, garden, cleaning, kitchen, and more.
Trade Account System - Custom trade account application page for B2B customers.
Delivery & Collection Badges - Custom corner ribbon banners on product cards indicating delivery-only or collection-only items.
Payment Integration - Apple Pay, Google Pay, and standard card payments.
Google Analytics & Tracking - Full GA4 implementation with conversion tracking.

Key Features

Platform	Shopify
Theme	Custom built
Standout Feature	Interactive paint visualiser with room upload, wall detection, brush tools, colour matching, and PDF generation
Paint Colours	3,000+
Product Categories	100+
Custom Tools	Colour browser, paint visualiser, colour matcher, PDF generator
B2B	Trade account application system
Payments	Apple Pay, Google Pay, card payments

The Paint Visualiser - How It Works

Open the Visualiser - A pastel purple banner sits above the colour browser inviting users to Paint Room or Match Colour. Tapping either opens the tool.
Upload a Room Photo - Users select a photo of their room from their device. The image loads onto an HTML5 canvas element.
Choose a Colour - A prominent purple Choose Colour button opens a full-screen colour picker popup with family tabs (scrollable on mobile), a search bar, and a grid of colour swatches.
Paint the Walls - With a colour selected, tap any wall in the photo. The tool detects the wall boundary and flood-fills it with the chosen paint colour, blending naturally with the room lighting.
Refine with Brush & Eraser - Switch to brush mode for detailed painting with adjustable size, or use the eraser to clean up edges. Full undo support throughout.
Try Multiple Colours - Paint different walls in different colours. A Colours Used bar appears showing every colour applied, with a Buy Paint button next to each.
Match a Colour - Switch to the Match tab, upload any inspiration photo, and tap to sample a colour. The tool finds the nearest paint match with a percentage accuracy badge.
Save or Create PDF - Download the painted room image, share it via mobile, or generate a PDF with the room preview, all colours used, product codes, and QR codes linking to the shop.

Try the Paint Visualiser →

Visit rockbottomnorthampton.co.uk →

← Back to Portfolio

Rockbottom Northampton - Portfolio