Custom interface implementation
Translate an externally designed, visually detailed automotive storefront into responsive HTML, SCSS and JavaScript.
ESP.
A storefront built for real customers.
A custom automotive parts storefront developed from supplied UI designs into a WordPress and WooCommerce website, delivered to the client in 2021.
- Role
- Frontend & WordPress Developer
- Period
- 2021
- Ownership
- Client Work / Automotive E-commerce
- Focus
- Automotive product discovery, bespoke WordPress theme & WooCommerce
ESP Auto Parts / original interface
01 / Context & ownership
Built for a client.
Engineered to sell.
A custom client storefront for an automotive spare-parts supplier, built from supplied UI designs with HTML, SCSS and JavaScript, then integrated into WordPress and WooCommerce for product discovery, shopping and editable content.
Developed the frontend HTML, SCSS and JavaScript implementation from externally provided UI designs. Built and integrated the custom WordPress theme and WooCommerce storefront views. Prepared product and article presentation templates for client-managed content.
Project context. Commissioned client work delivered in 2021. The UI designs were provided by another designer; I implemented the frontend and custom WordPress integration, with technical mentoring and review. The linked Vercel demo shows the template, while the client managed their own product and article content on the delivered website.
02 / Challenges
An existing design.
A working commerce system.
Product discovery
Support browsing by vehicle brand and model, product categories, sorting, filtering and product detail views.
Theme integration
Connect the frontend layout to reusable WordPress PHP templates and dynamic WooCommerce product data.
Content and handoff
Enable the client to manage products and articles through the WordPress administration experience.
03 / Technology & implementation
A focused stack. Built to deliver.
A categorized, period-accurate stack. Where useful, the implementation map connects the frontend with the project’s actual platform and data sources.
Technology map
Technologies actually used in the archived project, grouped by responsibility. Only relevant categories appear.
11entries
4
Core stack
The foundation the frontend runs on.
Language
Styling
In this project
Hover, focus, or tap a technology to see how it was used.
4
Interface & experience
Libraries and assets shaping what people see and feel.
UI libraries
Typography
In this project
Hover, focus, or tap a technology to see how it was used.
3
Data & tools
Integrations and tools used in the development workflow.
CMS
Commerce platform
CMS plugins
In this project
Hover, focus, or tap a technology to see how it was used.
From design handoff to managed commerce
Supplied UI designs
External visual direction translated into responsive HTML, SCSS and vanilla JavaScript.
WordPress + WooCommerce
Content, product records, pricing, catalog taxonomy and store management provided through the CMS and commerce platform.
ESP custom PHP theme
Reusable PHP templates, WordPress queries and tailored styles/scripts present catalog and content views.
Vehicle discoveryProduct listingsProduct detailsShopping flowBlog & articles
Architecture reflects the archived theme and the client-delivered store. The Vercel demo is a static frontend preview, not the source of the client product catalog.
04 / Page system
The original storefront.
05 / Reflection
From static UI
to client delivery.
Delivered a tailored WordPress and WooCommerce storefront for the client in 2021. The company maintained its own real catalog and editorial content; the separate Vercel link showcases the original frontend template. Technical mentoring and review supported the delivery.
06 / Shopping experience
Find the right part. Follow the path to purchase.
Product discovery was the central interaction challenge: the storefront brings vehicle-specific navigation, searchable catalog pages and detailed listings into one connected shopping experience.
- 01
Vehicle brands and models help visitors approach a large parts catalog from a familiar starting point.
- 02
Category, availability and pricing controls structure the product discovery process.
- 03
Product detail layouts bring together imagery, specifications, price information and purchasing actions.
Brand & model discoveryCatalog sortingCategory filtersProduct detailCart & checkout
Explore the original interface
Browse by car brand.
The original branded vehicle discovery interface, presented as an archived screenshot rather than a live widget.
Original project screenshots · Navigation here previews archived pages; it does not simulate a live data connection.
07 / From static UI to WordPress
A custom theme, not a prebuilt storefront.
The implementation began as an HTML/SCSS/JavaScript frontend and was integrated into an original WordPress theme. PHP templates, WordPress content queries and WooCommerce product information connected the design to editable business content.
- 01
Built the responsive template with semantic HTML, SCSS, JavaScript, Bootstrap and Swiper.
- 02
Integrated the layouts into a custom PHP theme with reusable navigation, page and content templates.
- 03
Connected product listings and detail views to WooCommerce; the client managed products and articles after delivery.
Custom PHP themeWP_QueryWooCommerceEditorial templatesClient-managed content
The original interface design was supplied. Frontend and WordPress development were my responsibility; technical mentoring and review supported delivery.