Shopify-Store für ein Design-Studio: Shegy Design, erst in Figma gestaltet

Die Website ist nicht aus einer fertigen Vorlage zusammengesetzt. Zuerst entstand das Design in Figma, abgestimmt auf die Markenvorgaben. Erst danach haben wir es in Shopify gebaut.

Jede Gestaltungsentscheidung musste zur Marke passen. In Figma wurden die Seiten gestaltet, bevor die Umsetzung begann. Technische Basis ist Dawn 15.4.1, darauf sitzen eigene Sections in Liquid mit eigenem Stylesheet. Abgestimmt wurde über markierte Ansichten der ganzen Seite.

• Design in Figma vor der Umsetzung
• Abgestimmt auf die Markenvorgaben
• Dawn 15.4.1 als technische Basis
• Eigene Sections in Liquid

Ganz oben läuft ein Video im Hintergrund. Darüber steht „Design it. Build it. Launch it.“ und ein Knopf, der zu den Leistungen führt. Darunter zeigt ein Slider sechs Leistungen für die persönliche Zusammenarbeit.

Der Einstieg spielt ein stummes Video in Schleife, mit Standbild als Vorschau beim Laden. Der Button scrollt zur nächsten Section, statt die Seite zu wechseln. Der Slider zeigt Sketches, Graphics, 3D Animations, Logo Design, Design & Collections und Manufacturing. Jede Karte führt direkt zur Kontaktseite.

• Video-Hintergrund mit Standbild als Vorschau
• Ein Button, der zu den Leistungen scrollt
• Sechs Leistungen als Slider mit Pfeilen
• Jede Karte endet in der Kontaktseite

Ein Abschnitt erklärt in drei Punkten, warum Kunden mit Shegy arbeiten: schnelle Lieferung, faire Preise, ein Ansprechpartner. Danach folgen Beiträge aus Instagram und ein Band mit Arbeiten aus dem Portfolio.

Die Section „Warum Shegy“ stellt drei kurze Versprechen nebeneinander und schließt mit einem Kontakt-Button. Die Instagram-Section zeigt Profilkopf und ein Raster aus Beiträgen mit Link zum Profil. Am Ende läuft eine Portfolio-Leiste als Endlosband mit Bildern aus dem Portfolio.

• Drei Versprechen statt Fließtext
• Instagram-Raster mit Link zum Profil
• Portfolio-Leiste als Endlosband

Auf der Kontaktseite stehen alle Wege nebeneinander: E-Mail, Instagram und WhatsApp. Daneben nennt die Seite die Antwortzeit. Im Formular wählen Besucher direkt aus, um welche Leistung es geht.

Die Seite ist eine eigene Section mit Kontaktkanälen, Hinweis auf die Antwortzeit und einer kurzen Kundenstimme. Das Formular läuft über das Shopify-Kontaktformular. Pflichtfelder sind Name, E-Mail, Service und Nachricht. Die Service-Auswahl unterscheidet Design Package, Learning Package, individuelle Zusammenarbeit, Produktion und Sonstiges.

• E-Mail, Instagram und WhatsApp auf einen Blick
• Service-Auswahl direkt im Formular
• Optionale Felder für Brand und Betreff

Die Produktseite zeigt Bilder, Preis inklusive Steuern und den Knopf zum Warenkorb. Darunter stehen drei kurze Versprechen: Sofort-Download, sichere Zahlung, Premium-Qualität. Weiter unten folgen passende Pakete aus dem Sortiment.

Galerie mit Vollbildansicht, darunter Akkordeons zu Details, Download und Support. Die eigene Upsell-Section „Kunden kauften auch“ zieht Produkte aus dem ganzen Sortiment und bietet sie direkt zum Hinzufügen an. Die Übersicht aller Produkte filtert nach Verfügbarkeit und Preis. Im Footer stehen die Zahlungsarten als Icons.

• Vertrauenszeile direkt unter dem Warenkorb-Button
• Akkordeons für Details, Download und Support
• Upsells mit direktem Hinzufügen
• Filter nach Verfügbarkeit und Preis

Der Store läuft auf Deutsch und Englisch, umschaltbar im Header. Wer auf Englisch unterwegs ist, bleibt beim Klicken auch auf Englisch. Bestellbestätigung und Download-Mail sind im Look der Website gestaltet.

Die englische Version liegt unter /en und ist per hreflang ausgezeichnet. Ein eigenes Snippet hängt das Sprachpräfix an interne Links in den Sections. Ohne das würde ein Klick zurück auf Deutsch springen. Die E-Mail-Vorlagen für Bestellung und Download nutzen schwarzen Grund und die Schrift Barlow.

• Deutsch und Englisch mit Sprachwahl im Header
• Interne Links behalten die gewählte Sprache
• E-Mail-Vorlagen im Markenlook