Shopify theme development
A collection page rebuilt without touching the rest of the store
A bike shop's helmet collection rebuilt to match a premium reference design, with filtering and sorting untouched. It switches on for one collection and off again from the Shopify admin.
Self-directed build on my own Shopify development store. No client, no customers, and no performance numbers to report.
The situation
A bike shop wanted its helmet collection page to look like a premium brand's rather than a default template. The design called for cards with a cut-out corner, a staggered layout so the rows do not line up, and a second photo that sweeps in when you hover.
What could have gone wrong
The page that lists products runs on the same code as search, the homepage, and the related-products strip. Change it carelessly and four parts of the store break at once, and you hear about it from customers rather than from testing. Themes also get updated over time, and a change made in the wrong place is exactly the kind that gets quietly overwritten at the next update.
What I did
I built the new layout as a separate, self-contained piece and switched it on for one collection only. Nothing in the existing theme was modified, so the other three places it appears could not be affected by the work. Filtering and sorting kept working the whole way through, and I checked that at every stage, including the case where a filter returns no results at all.
What you can do now
The helmet collection has the layout from the reference design, and shoppers can still filter and sort exactly as they could before. The hover effect runs on product photos, so the shop controls it from the admin by reordering images. Adding a second photo to a product switches the effect on for that product. No developer involved, and nothing to wait on me for.
How it comes undone
One setting in the Shopify admin. Switch the collection back to the standard template and the store is exactly as it was: no code change, no deployment, no waiting on me to be available. That was decided at the start of the build rather than tidied up at the end, which is the only reason it is a single setting instead of a project.
What is still open
- Two touch-device checks are still open. I had no physical device to test on.
- The hover effect is invisible to touch users. That is by design, not a defect, but it means phone shoppers see the simpler version.
- The cards carry no price or sold-out badge. A live store would want both before launch.
The visual reference came from landonorris.com, supplied in the brief as the look to match. The work here is the Shopify implementation, not the design.
If you want the engineering detail
There is a longer write-up of this project aimed at developers, covering the decisions, the defects found in testing, and the parts that did not work the first time.