So setzen Sie ein Menüdesign nach Bildvorlage auf Shopify um (Mega-Menü, Drawer, Tab-Leiste)
Sie haben einen Screenshot eines Menüs gefunden, das Sie unbedingt in Ihrem Shopify-Store nutzen möchten. Vielleicht stammt die Vorlage von einer bekannten Marke, aus einem Figma-Mockup Ihres Designers oder von Pinterest. Das Design überzeugt mit übersichtlichen Spalten, Kacheln für Kollektionsbilder, Werbebannern und Abzeichen. Doch im Shopify-Adminbereich folgt schnell Ernüchterung: Es gibt weder einen Knopf zum Hochladen fertiger Layouts noch Bildfelder innerhalb der Menüpunkte.
Ein Menübild ist eine Spezifikation, kein fertiges Bild: Zerlegen Sie es in Struktur, Inhaltsblöcke, Stil und Verhalten, bauen Sie jeden Teil mit dem passenden Werkzeug und gestalten Sie die Mobilversion gezielt. Wenn Sie das Bild in seine Bausteine zerlegen, lässt sich das Menü in Shopify deutlich leichter nachbauen.
Quick answer: how to turn a menu image into a working Shopify menu
Behandeln Sie das Bild als Spezifikation, nicht als starre Grafik. Notieren Sie Menütyp, Ebenen und Spalten, Inhaltsblöcke (Links, Bilder, Banner, Produkte), Stil und Mobilverhalten. Bauen Sie jeden Teil mit den Header-Einstellungen Ihres Themes, einer Menü-App oder individuellem Code und entwerfen Sie die Smartphone-Version separat.
Befolgen Sie diese fünf Schritte, um ein Menüdesign auf Shopify umzusetzen:
- Step 1: Break the image into a menu design spec: Erfassen Sie Ebenen, Spalten, Inhaltskarten, Markenfarben und Interaktionen (Hover oder Klick).
- Step 2: Choose the build route: theme settings, a menu app, or custom code: Wägen Sie Einrichtungsaufwand, Gestaltungsspielraum und Update-Risiken gegeneinander ab.
- Step 3: Map each part of the image to a building block: Ordnen Sie Bildbereiche Linkgruppen, Kollektionskacheln, Bannern oder Symbolen zu.
- Step 4: Translate the desktop design for mobile: Wandeln Sie Desktop-Raster in ein Drawer-Menü, eine feste Tab-Leiste oder Symbol-Raster um.
- Step 5: Match colors, fonts, and spacing to your brand: Nutzen Sie Ihre eigene Typografie, Farbpalette und barrierefreie Kontraste statt fremder Markenwerte.
Shopify-Menüs speichern Links; das Aussehen stammt vom Theme, einer App oder individuellem Code. Da Desktop-Layouts auf kleinen Displays nicht einfach schrumpfen können, erfordert die mobile Ansicht ein eigenes Bedienkonzept.
Why a Shopify menu rarely matches a design image out of the box
Wer ein Bilddesign nachbauen möchte, öffnet meist zuerst den Bereich Inhalt > Menüs und sucht nach visuellen Werkzeugen. Dort findet sich jedoch nur eine schlichte Liste von Textfeldern.
In Shopify sind Menüs hierarchische Linklisten. Laut Shopify Help Center zu Dropdown-Menüs kann ein Hauptelement maximal zwei Ebenen verschachtelter Dropdown-Menüs enthalten, was eine Gesamttiefe von drei Ebenen ergibt. Im Theme-Code wird jeder Eintrag als Liquid-Link-Objekt abgebildet. In der Shopify Liquid-Dokumentation ist ein Element lediglich “a link in a menu” mit Attributen wie title und url, verfügt jedoch über keine nativen Bildfelder.
Das Hinzufügen von Menüs unterstützt Kunden beim Stöbern im Shop und beim Auffinden wichtiger Seiten (Shopify Help Center). Haupt- und Dropdown-Menüs werden im Onlineshop je nach Theme an unterschiedlichen Stellen angezeigt. Ihr Adminbereich verwaltet reine Linkdaten. Die optische Darstellung—Farben, Schriften, Spalten und ob Dropdowns als schmale Listen oder breite Mega-Menüs erscheinen—wird durch das aktive Theme, eine App oder eigenen Code bestimmt.
Die meisten Screenshot-Vorlagen stammen von anderen Shops mit anderen Themes, individuellem Code oder Apps. Handelt es sich bei Ihrem Screenshot um die offizielle Demo Ihres aktuellen Themes, lesen Sie unseren Leitfaden, um Ihr Menü wie die Theme-Demo aussehen zu lassen. Wenn die Vorlage von einer fremden Website oder einem Designer-Mockup stammt, müssen Sie das Design eigenständig in Bausteine zerlegen.
Step 1: Break the image into a menu design spec
Concept illustration: Ein Designbild, zerlegt in Struktur, Inhaltsblöcke, Stil und Verhalten.
Bevor Sie Einstellungen anpassen oder Code schreiben, analysieren Sie Ihr Bild und erstellen Sie eine schriftliche Spezifikation für vier Bereiche: Struktur, Inhaltsblöcke, Stil und Interaktion.
Structure: levels and columns
- Menüfamilie bestimmen: Handelt es sich um eine Standard-Kopfzeile mit einfachen Dropdowns, ein mehrspaltiges Mega-Menü, einen seitlichen Drawer oder eine Tab-Leiste am unteren Bildschirmrand? Wenn Sie Orientierung benötigen, hilft unser Leitfaden, um den passenden Menütyp auszuwählen.
- Hauptelemente zählen: Notieren Sie, wie viele primäre Links in der Hauptleiste liegen (z. B. Neuheiten, Kollektionen, Über uns, Sale).
- Ebenen ermitteln: Prüfen Sie, ob Links direkt untereinander stehen oder unter fett gedruckten Zwischenüberschriften gruppiert sind. Beachten Sie das Shopify-Limit von maximal drei Ebenen.
- Spalten zählen: Zählen Sie, wie viele vertikale Spalten das Dropdown-Raster auf dem Desktop umfasst.
Content blocks: links, images, banners, products
Erfassen Sie alle unterschiedlichen Bausteine im Vorlagenbild:
- Text-Linkspalten: Einfache vertikale Listen von Kategorie- oder Seitenseiten.
- Gruppenüberschriften: Fett gedruckte Beschriftungen zur Zusammenfassung verwandter Links.
- Kollektions-Bildkacheln: Vorschaubilder mit Textbeschriftung für Kollektionen.
- Werbebanner: Grafische Bannerkarten für Aktionen, Rabattcodes oder Lookbooks.
- Produktkarten: Kompakte Produktkacheln mit Bild, Titel und Preisangabe.
- Icons neben Links: Kleine Symbole oder Badges neben dem Linktext.
- Buttons und CTAs: Hervorgehobene Schaltflächen (z. B. Jetzt entdecken).
Style: colors, fonts, spacing
Erfassen Sie den visuellen Eindruck qualitativ, ohne Pixel im komprimierten Bild exakt messen zu wollen:
- Farben: Bestimmen Sie Hintergrund (Weiß, Hellgrau, Dunkel), Linkfarbe, Hover-Akzente und Trennlinien.
- Typografie: Notieren Sie Schriftart (serifenlos oder Serife), Groß-/Kleinschreibung und Schriftstärken.
- Abstände: Wirkt das Menü luftig mit großzügigem Freiraum oder kompakt für ein großes Sortiment?
- Formen: Sind Bildkacheln kantig oder weisen sie abgerundete Ecken auf?
Behavior: hover, click, and mobile
- Öffnen: Öffnet sich das Menü beim Überfahren mit der Maus (Hover) oder erfordert es einen Klick?
- Untermenüs: Klappen Kategorien im Drawer als Akkordeon nach unten auf oder schieben sie sich seitlich ein?
- Mobilansicht: Zeigt die Vorlage eine Smartphone-Ansicht? Falls nicht, müssen Sie das mobile Konzept selbst festlegen.
Checkliste für die Menüspezifikation
Kopieren Sie diese Liste für Ihre Vorbereitung:
- Menütyp: Horizontale Leiste / Desktop-Mega-Menü / Mobiler Drawer / Mobile Tab-Leiste
- Anzahl Hauptelemente: (z. B. 5 Einträge)
- Hierarchietiefe: Ebene 1 / Ebene 2 / Ebene 3 (Shopify-Maximum: 3 Ebenen)
- Spaltenanzahl: (z. B. 4 Spalten im Desktop-Dropdown)
- Inhaltsblöcke: Linklisten / Kollektionskacheln / Banner / Produkte / Icons / Buttons
- Farbwerte (geschätzt): Hintergrund, Linktext, Hover-Farbe, Rahmen
- Schriftstile: Serifenlos oder Serife, Schreibweise, Schriftstärke
- Desktop-Interaktion: Hover mit Auslöseverzögerung / Klick
- Mobil-Strategie: Drawer-Menü / Akkordeon / Feste Tab-Leiste / Symbolleiste
Step 2: Choose the build route: theme settings, a menu app, or custom code
Nach Fertigstellung der Spezifikation wählen Sie den Umsetzungsweg. Auf Shopify stehen Ihnen drei Wege offen: integrierte Theme-Einstellungen, eine Menü-App oder individueller Code.
Vergleichen Sie die Optionen nach Aufwand, Gestaltungsfreiheit und Wartungsrisiko bei Theme-Updates:
| Umsetzungsweg | Einrichtungsaufwand | Gestaltungsfreiheit | Update-Risiko beim Theme | Am besten geeignet für |
|---|---|---|---|---|
| Theme-Einstellungen | Gering (direkte Konfiguration im Theme-Editor ohne Programmierung) | Eingeschränkt (strikt begrenzt auf Funktionen des aktiven Themes) | Gering: Anpassungen im Theme-Editor bleiben bei Updates erhalten | Standard-Dropdowns und einfache Mega-Menüs des jeweiligen Themes |
| Menü-App | Mittel (visueller Editor mit Drag-and-Drop) | Hoch (Spalten, Kollektionskacheln, Banner, Produkte und Tab-Leisten) | Gering bis Mittel: App-Embeds ändern keinen Theme-Code, Kompatibilität bei großen Updates prüfen | Shops, die flexible Layouts und Banner wünschen, ohne Code anzufassen |
| Individueller Code | Hoch (Entwicklung von Liquid, CSS, JavaScript und Schemablöcken) | Maximal (vollständige Kontrolle über Struktur, Effekte und Speziallogik) | Hoch: Eigener Code sollte vor Updates als Kopie gesichert werden und muss eventuell neu eingepflegt werden | Händler mit festen Frontend-Entwicklern oder technischer Agenturbetreuung |
Weg 1: Integrierte Theme-Einstellungen
Prüfen Sie zuerst Ihren Theme-Editor (Onlineshop > Themes > Anpassen). Öffnen Sie den Header-Bereich, um die verfügbaren Menüformate zu sehen. Einige Themes bieten integrierte Mega-Menü-Optionen, die verschachtelte Links aus Inhalt > Menüs mehrspaltig anzeigen.
Der größte Vorteil liegt in der Stabilität: Anpassungen, die über den Theme-Editor vorgenommen werden, werden bei Aktualisierungen auf das neue Theme übertragen (Shopify Help Center). Allerdings ist der Gestaltungsspielraum begrenzt. Wenn das Theme keine Bildkacheln oder Banner unterstützt, lässt sich dies über reine Einstellungen nicht erzwingen. Details dazu finden Sie in unserem Beitrag über die Grenzen von Shopify-Theme-Menüs.
Weg 2: Spezielle Menü-App
Enthält Ihre Bildvorlage Werbebanner, Kollektionskarten, Produktvorschauen oder eine feste mobile Tab-Leiste, die Ihrem Theme fehlen, ist eine Menü-App die praktische Wahl.
Moderne Shopify-Apps nutzen Theme-App-Erweiterungen. Wenn Apps Theme-App-Erweiterungen einsetzen, müssen Händler ihren Theme-Code nicht manuell bearbeiten (Shopify Developer Documentation). Sie gestalten das Menü im Editor der App und aktivieren es per App-Embed im Theme-Customizer.
Als Nachteil entstehen laufende App-Kosten, und Shopify weist darauf hin, dass einige Apps mit einem neuen Theme mit einem neuen Theme inkompatibel sein können (Shopify Help Center). Für viele Händler bietet eine App dennoch die beste Balance aus Freiheit und Code-Sicherheit.
Weg 3: Individueller Code
Benötigen Sie ein ganz spezifisches Layout oder außergewöhnliche Animationen, bietet maßgeschneiderter Code die größtmögliche Flexibilität. Ein Entwickler passt die Liquid-Dateien des Headers an, schreibt CSS und bindet Metafelder ein.
Das folgende Video zeigt ein Praxisbeispiel für den Code-Weg, bei dem Bilder über Code-Anpassungen und Metafelder in ein kostenloses Theme integriert werden:
Individueller Code erfordert jedoch kontinuierliche Pflege. Das Shopify Help Center mahnt: “Sie sollten immer eine Kopie jedes benutzerdefinierten Codes speichern, bevor Sie Ihr Theme aktualisieren” (Shopify Help Center). Da angepasster Code in einem aktualisierten Theme eventuell neu eingepflegt werden muss, sollten Sie eine Kopie aufbewahren und Ihr Menü nach jedem Update erneut prüfen.
Step 3: Map each part of the image to a building block
Haben Sie den Umsetzungsweg gewählt, weisen Sie jedem Element aus Ihrer Spezifikation den passenden Navigationsbaustein zu.
Die folgende Tabelle zeigt, wie sieben typische Menüelemente in Theme-Einstellungen, Menü-Apps und individuellem Code abgebildet werden:
| Element im Bild | Technische Funktion | Theme-Einstellungen | Menü-App | Individueller Code |
|---|---|---|---|---|
| Hauptebene-Links | Hauptmenüleiste für wichtige Einstiegsseiten | Integriert: Links aus Inhalt > Menüs im Header zugewiesen | Abhängig von der App: kann die Theme-Leiste ersetzen oder erweitern | Liquid-Schleife über linklists.main-menu.links im Header |
| Spalten mit Überschrift | Gruppierte Unterlinks unter hervorgehobener Kategorie | Abhängig vom Theme: verfügbar bei integriertem Mega-Menü | Abhängig von der App: auf einen Spalten-Editor mit Gruppentiteln achten | Verschachtelte Liquid-Schleifen (for child in link.links) mit CSS-Grid |
| Kollektions-Bildkacheln | Bildkarten mit Kollektionsfoto und Beschriftung | Abhängig vom Theme: manche Kauf-Themes laden Kollektionsbilder | Abhängig von der App: auf Bildkarten-Blöcke mit Kollektionsverknüpfung achten | Liquid-Abruf von collection.featured_image oder Metafeld-Bild |
| Werbebanner-Karten | Grafikbanner für Rabattaktionen oder Kampagnen | Abhängig vom Theme: manche Themes enthalten einen Promoblock im Header | Abhängig von der App: auf Bannerblöcke mit eigenen Bildern und Button-Links achten | Feste Schema-Blöcke mit Bildauswahlfeldern und Linkfeldern |
| Produktvorschauen | Minikarte mit Produktfoto, Titel und Preis | Abhängig vom Theme | Abhängig von der App: auf Produktblöcke achten | Liquid-Abfrage einzelner Produkte via all_products[handle] |
| Icons neben Links | Kleine Bildsymbole neben dem Text (z. B. Sale-Tags) | Abhängig vom Theme | Abhängig von der App: auf Icon-Auswahl oder eigene Icon-Uploads achten | Inline-SVG oder CSS-Pseudoelemente verknüpft mit Menüeinträgen |
| Aktions-Buttons (CTAs) | Als Button gestalteter Link (z. B. Termin buchen) | Abhängig vom Theme: manche Themes erlauben Button-Stil für Endlinks | Abhängig von der App: auf Button-Stile für einzelne Menüeinträge achten | Benutzerdefinierte CSS-Klasse für bestimmte Anker-Tags im Liquid |
Grundlagen für Mega-Menü-Layouts
Handelt es sich bei Ihrer Vorlage um ein breites, mehrspaltiges Dropdown, bauen Sie ein Mega-Menü. Laut Untersuchungen der Nielsen Norman Group sind Mega-Menüs besonders nutzerfreundlich, da viele Auswahlmöglichkeiten in einem zweidimensionalen Dropdown-Layout präsentiert werden. So können Kunden das gesamte Sortiment überblicken, ohne sich durch schmale Klappmenüs klicken zu müssen.
Die NN/g betont zudem, dass “Mega-Menüs es einfach machen, Bilder und Symbole zu verwenden, wenn es angemessen ist” (Nielsen Norman Group). Bilder beschleunigen die Orientierung. Allerdings sollten sie stets der Lesbarkeit dienen. Versehen Sie jedes Bild mit einer klaren Textbeschriftung, damit Kunden genau wissen, wohin der Klick führt.
Schließlich empfiehlt die NN/g, “Optionen in zusammenhängende Gruppen zu bündeln” (Nielsen Norman Group). Haben Sie viele Unterkategorien, reihen Sie diese nicht unstrukturiert aneinander. Teilen Sie sie in thematische Spalten mit deutlichen Überschriften auf. Vertiefende Hinweise finden Sie in unserem Leitfaden zu Best Practices für Mega-Menüs.
Step 4: Translate the desktop design for mobile
Concept illustration: Ein Desktop-Mega-Menü, übertragen in einen mobilen Drawer, ein Icon-Menü und eine untere Tab-Leiste.
Ein häufiger Fehler beim Nachbau nach Desktop-Bildern ist das Vernachlässigen von Mobilgeräten. Ein Desktop-Mega-Menü nutzt einen breiten Bildschirm, während ein Smartphone nur schmal ist. Sie können ein vierspaltiges Raster nicht einfach auf Handygröße stauchen.
Studien des Baymard Institute belegen diese Herausforderung: “Bei Usability-Tests beobachten wir regelmäßig, dass die mobile Navigation für Nutzer besonders schwierig ist.” Auf Smartphones kämpfen Nutzer mit kleiner Typografie und engen Touch-Zielen.
Baymard stellt fest, dass das mobile Menü meist standardmäßig eingeklappt und hinter einem Hamburger-Symbol verborgen ist (Baymard Institute). Das Ausblenden spart Platz, beeinträchtigt jedoch das Finden von Inhalten: Untersuchungen der Nielsen Norman Group ergaben, dass die Auffindbarkeit fast um die Hälfte sinkt, wenn die Hauptnavigation verborgen ist.
Deshalb rät die NN/g: “Wenn Ihre Website 4 oder weniger Hauptnavigationslinks hat, zeigen Sie diese als sichtbare Links an” (Nielsen Norman Group). Für mobile Shopify-Stores ergeben sich daraus drei Umsetzungsstrategien:
1. Das mobile Drawer-Menü
Für mittlere und große Sortimente bleibt das seitliche Drawer-Menü unverzichtbar. Tippt der Kunde auf das Hamburger-Symbol, fährt die Menüleiste ein. So übertragen Sie Ihr Mega-Menü in den Drawer:
- Wandeln Sie horizontale Spalten in vertikale Akkordeon-Listen um.
- Nutzen Sie Spaltenüberschriften als ausklappbare Zeilen.
- Ordnen Sie Unterlinks sauber eingerückt darunter an.
- Verwandeln Sie große Banner in kompakte Querstreifen oder blenden Sie sie mobil aus, um übermäßiges Scrollen zu vermeiden.
2. Die feste Tab-Leiste am unteren Bildschirmrand
Um wichtigste Shop-Ziele immer im Blick zu behalten, eignet sich eine Tab-Leiste am unteren Displayrand. Direkt in der Reichweite des Daumens platziert, bietet sie drei bis vier zentrale Einstiege (z. B. Start, Katalog, Suche, Warenkorb). Kunden wechseln mit einem Fingertipp zwischen den Bereichen, ohne den Drawer öffnen zu müssen. Details dazu lesen Sie in unserem Beitrag über mobile Navigation jenseits des Hamburger-Menüs.
3. Visuelle Kategoriesymbol-Leisten
Enthält Ihre Desktop-Vorlage Kollektionskacheln, übertragen Sie diese auf Mobilgeräten in eine Symbolleiste oben auf den Kollektionsseiten oder im Drawer. Kleine runde Kacheln mit Texten wie Kleider, Oberteile oder Schuhe ermöglichen visuelles Stöbern bei minimalem Platzverbrauch.
Geräteabhängige Navigationsstrukturen schaffen für alle Kunden das beste Einkaufserlebnis. Eine vollständige Anleitung finden Sie in unserem Leitfaden zum Erstellen separater Desktop- und Mobil-Menüs.
Step 5: Match colors, fonts, and spacing to your brand
Das Nachbauen eines Menüs bedeutet, Layoutstrukturen und Proportionen zu adaptieren—nicht, geschützte Markenwerte anderer Shops zu kopieren. Verwenden Sie niemals fremde Logos, urheberrechtlich geschützte Bilder oder lizenzierte Schriftarten. Übertragen Sie das Gestaltungsprinzip stattdessen auf Ihre eigene Markenidentität.
Theme-eigene Stile übernehmen
Stimmen Sie die Navigation auf Ihr Store-Design ab:
- Nutzen Sie die im Theme hinterlegten Schriftarten (Onlineshop > Themes > Anpassen > Theme-Einstellungen > Typografie), damit das Menü harmonisch ins Gesamtbild passt.
- Wählen Sie für Dropdown-Hintergründe die neutralen Grundtöne Ihres Themes (z. B. reines Weiß oder sanftes Creme).
- Setzen Sie Ihre Marken-Akzentfarbe für Hover-Zustände, Badges und Aktions-Buttons ein.
Weitere Anregungen zur Markenabstimmung bietet unser Leitfaden: So fühlt sich die Navigation nach Ihrer Marke an.
Barrierefreie Textkontraste sicherstellen
Attraktives Design muss stets lesbar bleiben. Screenshots in sozialen Medien zeigen häufig zartgraue Schrift auf weißem Grund oder weiße Schrift auf unruhigen Fotos. In der Praxis führt dies zu unleserlichen Menüs.
Barrierefreiheitsstandards definieren klare Untergrenzen. Laut den WCAG 2.2-Richtlinien der W3C Web Accessibility Initiative erfordert Standardtext ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, bei großem Text mindestens 3:1.
Beachten Sie bei der Gestaltung:
- Prüfen Sie, ob Ihre Linkfarben mindestens 4,5:1 Kontrast zum Dropdown-Hintergrund aufweisen.
- Wenn Text auf einem Bildbanner liegt, hinterlegen Sie eine feste oder halbtransparente Farbfläche, um den 4,5:1-Kontrast unabhängig vom Fotomotiv zu sichern.
- Achten Sie mobil auf ausreichende Zeilenabstände, damit Kunden Links fehlerfrei antippen können.
Trade-offs: what not to copy pixel for pixel
Wer nach einem Vorlagenbild arbeitet, möchte oft jeden Schlagschatten, Übergangseffekt und Pixelabstand exakt reproduzieren. Ein blindes Kopieren führt jedoch schnell zu Bedienproblemen und technischem Mehraufwand.
Vermeiden Sie diese drei Fehler:
1. Zu empfindliche Hover-Effekte
Mockups erwecken oft den Eindruck, Menüs öffneten sich im Bruchteil einer Sekunde bei jeder Cursor-Berührung. Im echten Betrieb führt dies zu Frust: Bewegt der Kunde die Maus zur Suche oder zum Warenkorb, öffnet sich ungewollt ein großes Panel und verdeckt den Bildschirm.
Die Nielsen Norman Group empfiehlt eine kurze Verzögerung: “Die Maus sollte 0,5 Sekunden lang stillstehen, bevor etwas angezeigt wird.” Diese Pause verhindert versehentliches Aufklappen bei flüchtigen Mausbewegungen.
Ebenso wichtig ist die Tastaturbedienung. Die W3C-Richtlinien für Flyout-Menüs besagen klar: “Untermenüs sollten sich beim Navigieren durch das Menü mit der Tab-Taste nicht automatisch öffnen.” Wenn Nutzer mit der Tab-Taste durch die Hauptlinks springen, darf kein Untermenü ungefragt aufklappen. Das Öffnen sollte nur durch bewusste Tastendrücke erfolgen.
2. Zu viele Spalten für ein kleines Sortiment
Stammt Ihr Vorlagenbild von einem großen Modehändler mit vielen Spalten und dutzenden Unterkategorien, sollten Sie ein kleines Sortiment nicht in dasselbe Raster pressen. Zu viele Spalten erzeugen leere Flächen und Einzel-Link-Spalten, die den Shop unvollständig wirken lassen. Passen Sie die Struktur der realen Katalogtiefe an.
3. Exotische Layouts, die Wartungsschulden erzeugen
Ungewöhnliche Menüs mit asymmetrischen Formen oder aufwendigen JavaScript-Effekten mögen im Designer-Portfolio glänzen. Auf Shopify erfordern sie jedoch komplexen, fehleranfälligen Code.
Wie in der Shopify-Dokumentation zu Theme-Updates beschrieben, sollten Sie vor jeder Theme-Aktualisierung immer eine Kopie von angepasstem Code speichern. Stark individualisierte Menüs müssen nach Updates eventuell erneut geprüft und neu eingepflegt werden.
Keine Software und kein Theme garantiert eine hundertprozentige Deckungsgleichheit mit jeder beliebigen Grafik. Das Ziel ist kein Pixelklon, sondern ein zuverlässiges, übersichtliches Navigationssystem für Ihre Kunden.
Where Navi+ fits
Wenn Ihre Bildvorlage Spaltenlayouts, Kollektionskacheln, Banner oder eine mobile Tab-Leiste zeigt, die Ihr Standard-Theme nicht mitbringt, müssen Sie keinen individuellen Code beauftragen. Hier setzt Navi+ an.
Navi+ ist eine Navigations-App für Shopify, mit der Händler Menü-Layouts visuell umsetzen können:
- Desktop-Mega-Menüs: Erstellen Sie mehrspaltige Dropdowns mit Produkten, Kollektionen, Bildern, Symbolen und flexiblen Spaltenbreiten (Shopify App Store), passend zu den Spalten und Bannern Ihrer Vorlage.
- Mobile Menüs und Drawer: Richten Sie eigenständige Mobil- und Drawer-Menüs ein (Shopify App Store), die entweder die Desktop-Struktur übernehmen oder eine speziell optimierte mobile Hierarchie abbilden.
- Feste Tab-Leisten am Displayrand: Fügen Sie eine App-ähnliche Tab-Leiste mit Icons und Beschriftungen am unteren Rand hinzu (Shopify App Store), um die wichtigsten Einstiege immer erreichbar zu halten.
- Kategoriesymbol-Menüs: Nutzen Sie Bildsymbol-Leisten für schnelles, visuelles Stöbern auf Mobilgeräten.
- Ohne Programmieraufwand: Erstellen Sie Menüs mithilfe von Vorlagen, KI-Unterstützung und Drag-and-Drop, ohne Theme-Dateien bearbeiten zu müssen (Shopify App Store).
- Sichere Theme-Einbindung: Die App nutzt Shopify-Theme-App-Erweiterungen (Shopify Developer Documentation), sodass Liquid-Dateien im Theme unberührt bleiben.
- Standard-Hierarchie: Unterstützt bis zu drei Menüebenen und fügt sich nahtlos in die Shopify-Architektur ein.
Vorlagen bieten einen schnellen Startpunkt; Sie verknüpfen dennoch Ihre eigenen Kollektionen, Produkte, Fotos und Farben. Navi+ liest keine Bilddatei automatisch ein, um daraus Menüs zu generieren, sondern stellt die flexiblen Bausteine bereit, mit denen Sie das gewünschte Layout zügig aufbauen.
Wenn Ihr Theme die Spalten, Bildkacheln oder die mobile Tab-Leiste aus Ihrer Vorlage nicht unterstützt, können Sie diese in Navi+ anhand einer Vorlage nachbauen und anschließend an Ihr Sortiment und Ihre Marke anpassen.
Pre-publish checklist
Gehen Sie vor der Veröffentlichung Ihres neuen Menüs diese Prüfliste durch:
- Spezifikation prüfen: Vergleichen Sie das Live-Menü mit Ihrer Spezifikation aus Schritt 1 auf Vollständigkeit aller Spalten und Blöcke.
- Links testen: Klicken Sie alle Links, Kollektionskarten und Banner an, um 404-Fehlerseiten auszuschließen.
- Bilder optimieren: Stellen Sie sicher, dass Bilddateien komprimiert sind und aussagekräftige Alt-Texte tragen.
- Gerätetests durchführen: Prüfen Sie die Darstellung im Desktop-Browser und auf einem echten Smartphone.
- Tastatur-Navigation testen: Vergewissern Sie sich mit der Tab-Taste, dass Untermenüs nicht ungefragt aufklappen (W3C Flyout-Menüs).
- Kontraste kontrollieren: Prüfen Sie, ob Link- und Bannertexte den Mindestkontrast von 4,5:1 einhalten (WCAG 2.2).
- Mobil-Layout prüfen: Stellen Sie sicher, dass Drawer und Tab-Leiste sauber passen, ohne horizontales Scrollen auszulösen.
- Theme-Code sichern: Falls Sie Liquid- oder CSS-Code angepasst haben, speichern Sie eine Kopie Ihres angepassten Codes (Shopify Help Center).
- Updates einplanen: Testen Sie das Menü nach jedem größeren Theme-Update oder nach der Installation neuer Apps (Shopify Help Center).
- App-Vorschau prüfen: Wenn Sie Navi+ nutzen, prüfen Sie Desktop-Mega-Menü und mobile Tab-Leiste im Editor vor dem Live-Schalten.
FAQ
Can I add images to a Shopify menu without an app?
Standardmäßige Shopify-Menüs unter Inhalt > Menüs verwalten lediglich Linktitel und Ziel-URLs als Liquid-Objekte (Shopify Developer Documentation). Ob Bilder im Dropdown-Menü dargestellt werden können, hängt davon ab, ob Ihr Theme über integrierte Bildblöcke verfügt (Shopify Help Center); fehlt diese Funktion, ist eine Menü-App oder individueller Code erforderlich.
How many levels can a Shopify menu have?
In der Menüstruktur von Shopify kann ein Hauptelement maximal zwei Ebenen untergeordneter Dropdown-Menüs enthalten (Shopify Help Center). Daraus ergibt sich eine Gesamttiefe von drei Ebenen (Hauptebene > Unterkategorie > Detaileintrag).
What should my desktop mega menu become on mobile?
Ein Desktop-Mega-Menü braucht auf dem Smartphone meist ein eigenes Layout, etwa einen ausziehbaren Drawer mit aufklappbaren Zeilen. Da die mobile Navigation für Nutzer anspruchsvoll ist (Baymard Institute) und versteckte Links die Auffindbarkeit senken, sollten Shops mit vier oder weniger Hauptzielen diese sichtbar halten (Nielsen Norman Group), zum Beispiel über eine feste Tab-Leiste am unteren Rand.
Will a custom-coded menu survive theme updates?
Alle Anpassungen, die über den Theme-Customizer vorgenommen werden, bleiben bei Theme-Aktualisierungen erhalten (Shopify Help Center). Eigener Code, der direkt in Liquid- oder CSS-Dateien geschrieben wurde, sollten Sie jedoch vor jedem Update als Kopie sichern; eventuell müssen Sie ihn im aktualisierten Theme neu einpflegen.
Should I copy the image exactly?
Nein. Übernehmen Sie die strukturelle Aufteilung, das Spaltenraster und die Interaktionsprinzipien, nutzen Sie aber eigene Fotos, Logos und Schriften. Achten Sie auf barrierefreie Kontraste von mindestens 4,5:1 (W3C WCAG 2.2) und bündeln Sie Links in sinnvolle Gruppen, die zu Ihrem tatsächlichen Sortiment passen (Nielsen Norman Group).
Sources
- Shopify Help Center — Drop-down menus: https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links: https://help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Updating themes: https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Developer Documentation — Link Liquid object: https://shopify.dev/docs/api/liquid/objects/link
- Shopify Developer Documentation — Theme app extensions: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well: https://www.nngroup.com/articles/mega-menus-work-well/
- Nielsen Norman Group — Hamburger Menus and Hidden Navigation: https://www.nngroup.com/articles/hamburger-menus/
- Baymard Institute — Navigation Menu Usability: https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- W3C Web Accessibility Initiative — Contrast Minimum (WCAG 2.2): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C Web Accessibility Initiative — Flyout Menus Tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/
- Shopify App Store — Navi+ Navigation Design: https://apps.shopify.com/pronavi-navigation-design
Themen entdecken
Dieser Leitfaden verlinkt auf gezielte Artikel — vertiefen Sie jedes Thema.