Doc’s Diesel sells automotive parts through Shopify, but customers often couldn’t tell which parts fit their vehicle. The catalog displayed hundreds of options, causing frustration, wrong purchases, and high return rates. The client wanted customers to save their vehicle, see only compatible parts, get instant fitment confirmation, and be protected from buying the wrong item.
Technical Solution
Backend: Node.js Service & Customer Metafields
Shopify doesn’t natively support storing custom per-customer data. We built a Node.js app with two endpoints:
- Save: Accepts vehicle selection (make, model, year, engine) and writes it to a Shopify customer metafield via Admin API.
- Retrieve: Reads the metafield and returns the stored vehicle for the frontend to prepopulate the selector.
Vehicle data is cached in localStorage to reduce API calls for logged-in users and serve guest users. On page load, localStorage is checked first, then the Node.js service syncs the result.
Frontend: Storefront API Collection Filtering
Shopify collections cannot filter by custom attributes. We implemented a custom filtering layer querying the Storefront API using the selected vehicle’s attributes. Results dynamically replace the product grid via client-side JS, keeping pagination and sorting intact.
Product Page: Fitment Verification
Each product’s compatibility data is encoded in structured Shopify tags (e.g., make:Ford, model:F-150, year:2020). Client-side JS compares the saved vehicle against these tags and shows fitment indicators, confirming compatibility or warning otherwise, without extra metafields.
Architecture Overview
| Layer | Technology & Role |
|---|---|
| Backend Service | Custom Node.js app / vehicle persistence via Shopify Admin API + customer metafields |
| Server Storage | Shopify customer metafield / per customer |
| Client Storage | Browser localStorage / session cache + guest support |
| Product Filtering | Storefront API queries filtered by vehicle attributes, client-side DOM replacement |
| Product Fitment | Client-side tag matching / vehicle selection compared against product tags |
| Frontend | Custom JS in Shopify theme / vehicle selector, filtered collections, fitment display |
Impact
- Faster discovery: Customers find compatible parts immediately with vehicle-filtered browsing.
- Fewer returns: Fitment verification prevents wrong purchases, reducing returns and support requests.
- Seamless repeat visits: Vehicle persistence allows returning customers to skip setup.
- Competitive edge: Vehicle-aware shopping experience beyond standard Shopify apps.
Conclusion
By combining a Node.js persistence layer, Shopify customer metafields, Storefront API-driven filtering, and client-side fitment matching, we transformed a large parts catalog into a smart, vehicle-aware shopping experience that Shopify’s native tools and existing apps could not provide.
