I built a comparison journey spanning product cards, product pages, a header counter and a dedicated comparison table. It supported filtering, sorting, differences-only views and aligned horizontal navigation.
Architecture and frontend implementation of the comparison system.
Build a connected product-comparison journey inside an existing Shopify theme. Selection controls, the header counter and a dedicated comparison page needed to remain consistent while users navigated and while new elements loaded dynamically.
I built a shared mechanism that retained the selected products between page visits and notified other components when the list changed. Buttons, the counter and the comparison page used the same state without depending directly on each other. The synchronisation also handled controls appearing after dynamic content loading.
The comparison system was released to production. I separated data preparation, filtering, comparison, rendering and carousel control into dedicated modules, with cleanup and recreation when the interface updated. My contribution also included configurable FAQ and company-content sections. No customer-conversion metric is claimed.
I built a shared mechanism that retained the selected products between page visits and notified other components when the list changed. Buttons, the counter and the comparison page used the same state without depending directly on each other. The synchronisation also handled controls appearing after dynamic content loading.
I loaded the selected products and built a feature table from Shopify metafields. Users could sort products, filter by characteristics, remove items and display only differences. I implemented loading and empty states, feedback after adding an item, and disabled actions when they were unavailable.
I linked the product-card and feature-table carousels so their columns stayed aligned during horizontal navigation, including on mobile. The implementation accounted for differing content lengths, changes to the selected products and rebuilding the interface at different screen sizes.
The comparison system was released to production. I separated data preparation, filtering, comparison, rendering and carousel control into dedicated modules, with cleanup and recreation when the interface updated. My contribution also included configurable FAQ and company-content sections. No customer-conversion metric is claimed.
Architecture and frontend implementation of the comparison system.
Have a project, a technical challenge, or a collaboration in mind? Send me a message.
