I split a complex product page into focused controllers for variants, media, uploads and purchasing. I built multi-file personalisation and kept the main and sticky purchase controls in sync.
Frontend implementation and modularisation of an existing product page.
Rework an existing Shopify product page and its purchasing journeys while supporting variants, media, customer file uploads and related content. The page needed a structure that could accommodate these behaviours without concentrating them in one growing component.
I separated variants, cart operations, media, video, file uploads and supplementary product cards into independent parts. Within the gallery, I further separated DOM handling, slider management and data transformations. This let individual behaviours develop without continually expanding the main page controller.
The changes were released to production. The client positively assessed the work and subsequently brought another project to the team. My contribution was the modular product-page structure and its connected selection, personalisation and purchase journeys; no numerical sales improvement is claimed.
I separated variants, cart operations, media, video, file uploads and supplementary product cards into independent parts. Within the gallery, I further separated DOM handling, slider management and data transformations. This let individual behaviours develop without continually expanding the main page controller.
I synchronised the selected variant with the gallery and the included-items content. I handled unavailable variants, images and video, responsive navigation and slider reinitialisation. The included-items section was moved to metafields so its content could be managed in Shopify.
I implemented a file list showing selected files and their sizes, individual removal, count and size limits, required-input validation and error feedback. Files were submitted with the product as line-item properties. The exact values shown in the illustration are fictional demonstration data.
The main form and sticky purchase panel shared quantity and error feedback. The sticky panel appeared according to the main purchase block's visibility. I also built a configurable back-in-stock dialog for unavailable variants and worked on quick view, cart behaviour, upsells and reusable content sections.
The changes were released to production. The client positively assessed the work and subsequently brought another project to the team. My contribution was the modular product-page structure and its connected selection, personalisation and purchase journeys; no numerical sales improvement is claimed.
Frontend implementation and modularisation of an existing product page.
Have a project, a technical challenge, or a collaboration in mind? Send me a message.
