Hardware-Produkt Website & Shop
Genesung ist das, was uns erlaubt, Grenzen zu überschreiten, über uns selbst hinauszuwachsen und bessere Menschen zu werden. Deshalb möchte Hydragun die Art und Weise verändern, wie sich unser Körper erholt - damit Sportler mehr erreichen können. So ist die Hydragun entstanden: Die Regenerationslösung der nächsten Generation für Bodybuilder, Läufer, Kampfsportler und alle, die ihren Sport auf das nächste Level bringen wollen.
Für das Unternehmen aus Singapur um Aloysius Chay haben wir die komplette Webpräsenz mit Webflow und einigen Custom Code Integrationen umgesetzt. Im Folgenden die zusammgefassten Highlights.
1. Custom Testimonial Slider
Um das positive Kundenfeedback von Hydragun passend zu visualisieren, haben wir einen Custom Slider implementiert. Dieser hat die besondere Funktionalität, dass mehrere Bilder aber stets nur eine Rezension angezeigt wird, und per Drag-und-Drop endlos Rezensionen durchgeblättert werden können. Mit Custom Code wurde hierfür der Slick-Slider eingebunden, da diese Anforderung nicht mit Webflow allein realisierbar war.
2. Produkt Lottie Animation
Video- und Bildmaterial sind die wichtigste Form der Visualisierung bei Hardware Produkten. Ein Interessent sieht im besten Fall nur das Bild-/ Videomaterial und verspürt sofort den Wunsch zu kaufen. Daher haben wir denkbar oft die Hydragun in Szene gesetzt. Auf technisch-anspruchsvolle Weise wurde ein 360° Video des Produktes in eine On-Scroll Lottie-Animation verwandelt, die das Produkt von allen Seiten zeigt.
3. Shopify Integration
Neben der Landing Page ist die Shop-Seite von Hydragun mit einigen Besonderheiten versehen. Grundsätzlich ist die gesamte Seite mit Webflow designed worden. Lediglich der Checkout Prozess, der Produkt-Slider und die Rezensionen werden live von Shopify abgerufen. So profitiert die Seite von der Funktionalität von Shopify und den Designmöglichkeiten von Webflow.
Hier geht es zu der Website von Hydragun.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.svg)
