Front-End for a Multilingual Bicycle Brand Catalogue with Filters and Product Comparison
Responsive front-end for CTM Bikes, Slovakia’s own bicycle and e-bike brand, featuring a multi-level mega menu, advanced catalogue filtering, side-by-side bike comparison, detailed product pages and an interactive dealer locator.
| Industry: | |
| Location: | Slovakia |
| Services: |
Business type / About Project
Sports & Cycling — Slovak manufacturer of bicycles, e-bikes, kids’ bikes and cycling accessories (Slovakia)
CTM Bikes is a Slovak bicycle brand that has been designing bikes and cycling accessories for 30 years, developing them from A to Z in Slovakia with its own in-house R&D team using 3D design software, 3D printing and virtual reality. Every model is tested by the internationally successful CTM Racing Team before launch, and in 2023 the company received the Slovak National Design Award. The range covers e-MTB, city and trekking e-bikes, enduro, trail, XC, gravel, dirt and kids’ bikes, as well as accessories, clothing and components, sold through a network of dealers in Slovakia, Czechia and Poland. The brand needed a modern, fast front-end that could present a large, technical catalogue clearly in several languages.
Challenges
- Organises hundreds of bikes and accessories into a deep, multi-level catalogue that stays easy to navigate
- Lets riders filter models by type, year, wheel size, frame size, price, gender, suspension and discounts
- Allows side-by-side comparison of bikes from any page of the site
- Presents detailed technical information: specifications, components, technologies, size guide, geometry and video
- Helps customers find the nearest dealer by region and type
- Works in four languages (SK, CZ, PL, EN) on desktop, tablet and mobile
Solution (what we did)
We developed the front-end of the CTM Bikes website, turning a complex product catalogue into a clear, responsive interface. Beyond standard layout, the project included several interactive modules that make choosing a bike as convenient online as in a store.
- Building a hover-based mega menu covering e-bikes, bikes, kids’ bikes by wheel size and rider height, and accessories, clothing and components, with a mobile version based on nested drill-down menus.
- Developing catalogue pages with a sliding filter sidebar (category, model year, wheel size, frame size, price ranges, gender, full or hardtail suspension, discounted items) with live result counts, active filter counters, reset buttons and sorting.
- Implementing a product comparison module: “Compare” buttons on cards and product pages, a floating comparison bar with add, open and clear actions, and a dedicated comparison page.
- Laying out detailed product pages with a colour selector that updates the gallery, Swiper sliders, a zoomable lightbox gallery, sale and model year badges, size selection, tabbed sections for details, specification, components, technologies, sizes and geometry tables, embedded video, recommended accessories and similar bikes.
- Creating a dealer locator with an interactive map, country and region switching, search and type checkboxes, plus content sections such as LIFE stories, CTM Riders and Racing Team, About Us with a company timeline, downloads and FAQ.
- Supporting a language switcher across SK, CZ, PL and EN and keeping every module fully responsive.
Impact
CTM Bikes received a fast, structured front-end that presents a large technical range in a clear and engaging way. Riders can narrow down the catalogue in a few clicks, compare models side by side, study every specification and find a dealer nearby, while the clean layout reflects the brand’s design-driven, sporty character in every language.
Result
The heaviest part of the project was not the page layouts themselves but the interactive modules around them: the filter sidebar with live counters, the cross-site comparison bar, colour-dependent product galleries and the map-based dealer search. Each was built as a reusable front-end component, so new models, categories and languages can be added without changing the interface.