Advanced Shopify Web Development for Aerofoils GmbH
Custom Shopify development based on Figma layouts with a perfect mobile version and easy website management.
Client:
Role of DITS.agency
Services
Project Overview
Aerofoils GmbH, a premium electric hydrofoil brand, requested a major frontend and UX update for their Shopify website to perfectly match new Figma designs. Their main goal was to ensure the site looks and works flawlessly across mobile phones, tablets, and desktops. The client needed to optimize key areas of the store, including the shopping cart experience, an interactive events calendar, the blog, and product sections. Additionally, they required a highly flexible setup within the Shopify admin so their content managers could easily update and change all website sections without needing a developer.
Project Challenges
- We had to completely rewrite the core theme code instead of just tweaking styles because a ready-made Shopify template could not handle the custom Figma design.
- The layout drastically changed depending on the screen size so we had to build completely different structures and element orders for phones, tablets, and desktops.
- We needed to set up a tricky data pipeline with Shopify metaobjects to pull event information out of the main sections and show it correctly inside pop-up windows.
- Everything from the sliding shopping cart to the calendar and filters had to react instantly and smoothly without forcing the user to wait for a page reload.
- We had to fix a messy scrolling bug where floating sidebar blocks inside the blog articles would slide down too far and overlap with the website footer.
What Was Done
We focused on four key areas to upgrade the storefront frontend and deliver a premium user experience.
- Developed a custom Shopify Metaobjects events platform with multi-parameter filtering, a custom calendar, deep-linking, and Figma-matched responsive modals.
- Upgraded the cart to an AJAX drawer with seamless quantity updates, auto-open functionality, and zero page reloads.
- Optimized blog layouts by resolving sticky sidebar overlapping during scroll and automating reading-time calculations.
- Built flexible, code-free product and app sections editable directly from the Shopify Admin panel (backgrounds, overlays, border-radii).
- Integrated responsive interactive sliders for compatible brands/boards along with pixel-perfect CTA blocks.
Technologies
Results
The updated website matches the Figma layouts perfectly, runs smoothly for customers, and takes minimal effort to manage.
- Flawless layout responsiveness across smartphones, tablets, and desktops
- Smart custom logic for the event listings and pop-up windows
- Instant shopping cart updates without annoying page refreshes
- Clean structure for all blog posts and article pages
- Flexible page sections that are easy to customize in the Shopify admin
- Better user experience for every interactive button and link
- Consistent visual style throughout the entire storefront
SEO-ready
Modular UI
High Performance
Desktop Version
Mobile Version
Looking for a modern, high-performance website that truly represents your brand? At DITS.agency, we specialize in building scalable digital solutions with flexible architectures and flawless UX. Let’s collaborate to turn your vision into a powerful technical reality.
“The website turned out fast, convenient, and perfectly suited to our needs. The DITS.agency team worked efficiently and professionally.”
Screenshots
Our recent works
