Overview
Dr Solar supplies and installs complete solar systems for homes and businesses. Its website turns that into something you can follow: one house moves from day to night as you scroll, the camera goes in on the panels, inverter and battery, and the power runs through the home until the lights stay on after sunset.
The challenge
Solar is a large purchase that buyers cannot see working. Spec sheets of kilowatts and phases do not tell a family whether the fans will run through load-shedding, so the site had to show the whole system, stay fast on phones, and let a small team run it without a custom server.
problem / solution
What we set out to fix
Problem
- Buyers cannot picture how panels, inverter and battery work together.
- Spec sheets do not answer how big a system a home needs.
- A rich 3D-style scene can easily become too heavy for a phone.
Solution
- One scroll scene that follows the power from the sun to every room.
- A seven-question calculator that works out the load and matches products.
- A canvas frame sequence on wide screens and light stills on phones, instead of a heavy live model.
- A Shopify theme the team can run, with a catalogue and quote form.
process
How we built it
01
Story
Ordered the scroll as the path of the power: panels, cable, house, then after sunset.
02
Scene
Photoreal day and night stills, a frame sequence and wires drawn on top as you scroll.
03
Catalogue
Products from Inverex, itel, Risen and Mustang, with what each one can carry worked out from its rating.
04
Ship
Packed as a Shopify theme and connected to GitHub, in three languages.
features
What it does
feature 01
The house that explains itself
- The camera moves in on each part of the system as you scroll.
- Wires draw themselves, and the house turns from day to night.
feature 02
From curiosity to a system size
- Seven quick questions work out the load.
- The result is matched to inverters, panels and batteries from the range.
feature 03
One company, the whole job
- Supply, fabrication, erection, electrical work, installation and after-sales service.
- Solutions for homes, shops, schools, clinics and factories.
stack.md
The tech stack, and why we used it
Shopify theme (Liquid)The business gets a store admin, contact forms and hosting it can run itself, without a custom server.Canvas frame sequenceOn wide screens a photoreal scene plays frame by frame as you scroll, and phones get two lighter stills. It reads as 3D without a live WebGL model to run.Vanilla JavaScriptNo framework to load: the scroll scene, sizing calculator and catalogue stay in one small script.WebP imagesEvery frame, still and product card is compressed, with separate images for phones.ops.md
How we build, ship and run it
Development
The page is written in plain source files and built by a small Python script into a Shopify theme, so one source produces the local preview, the single-file share copy and the live theme.
Deployment
The theme lives in a GitHub repository, and Shopify's GitHub integration keeps the repository and the store theme in sync in both directions.
Data
There is no custom database. The 32 products ship as a data file with the theme, and quote requests go through Shopify's contact form to the store's email.
Caching
Images and scripts use Shopify's asset URLs, served from its CDN. The 60 scroll frames load one at a time on wide screens only, and phones skip them and use two smaller stills.
users.md
Who uses it
Home and business owners
See how a system works, then answer seven questions to size one for their own load.
Dr Solar's team
Get quote requests by form with the product and city already filled in.
benefits.md
Benefits
- Solar stops being a technical purchase: the visitor follows the power from the panels to the house, day and night.
- The calculator turns appliances into a load, then matches it to real products from the range.
- English, Urdu and Roman Urdu, for the way customers actually read.
cost.md
Cost benefits
- Shopify covers hosting, the global CDN and form handling, so there is no separate server or database to pay for or look after.
- A catalogue and quote form with no cart keeps the build small, because price is agreed on the day.
screens · 8
Every screen
Scroll sideways through the product.
Typography
Aa
Albert Sans
Albert Sans keeps a technical purchase calm and readable, with light headlines over the photograph and clear numbers in the calculator.
colours
built with