So korrigieren Sie Bildgrößen in einem Shopify-Menü (Mega-Menü und Mobile Drawer)

Quick answer

Um Bildgrößen im Menü zu korrigieren, vereinheitlichen Sie jedes Menübild mit CSS aspect-ratio und wählen Sie object-fit: cover, um den Rahmen zu füllen (Ränder werden beschnitten), oder contain, um das gesamte Bild anzuzeigen. Laden Sie Quelldateien mindestens in Anzeigegröße hoch und prüfen Sie den mobilen Drawer separat.

1. Quellbilder vereinheitlichen: Wählen Sie ein einheitliches Seitenverhältnis für die gesamte Menüzeile.
2. Form per CSS erzwingen: Nutzen Sie aspect-ratio und object-fit auf Ihrem Theme-Selektor.
3. Beschnitt in Dawn beenden: Schalten Sie hintergrundbasierte Mega-Menü-Bilder auf contain um.
4. Unscharfe Bilder beheben: Laden Sie Bilder für hochauflösende Displays hoch und prüfen Sie Pfade.
5. Mobile Drawer prüfen: Testen Sie Drawer-Selektoren und Untermenüs auf mobilen Endgeräten.

Why menu images end up uneven, cropped or blurry

Bevor Sie Stylesheets anpassen, stellen Sie fest, ob Ihr Navigationsmenü direkt von Ihrem Shopify-Theme oder von einer installierten Navigations-App erzeugt wird. Themes und Apps nutzen unterschiedliche HTML-Strukturen; CSS-Regeln auf falschen Selektoren zeigen keinerlei Wirkung.

Fehlerhafte Menübilder lassen sich typischerweise auf drei Ursachen zurückführen:

Fehlt einem Bildcontainer eine feste Proportion, stellen Browser jedes Bild in seiner nativen Höhe dar. Ein Hochkantbild neben einer quadratischen Kachel erzeugt eine unregelmäßige Menüzeile. Erzwingt das Theme hingegen rechteckige Rahmen, werden Ränder quadratischer Bilder abgeschnitten. Die genaue Diagnose stellt sicher, dass Sie die passende Regel wählen.

Dieses Video zeigt, wie Bilder in ein Dropdown-Mega-Menü eingefügt werden; nutzen Sie es als Kontext dafür, wo das Größenproblem entsteht.

Step 1: Standardize your source images

Der sauberste Weg ist die Standardisierung der Seitenverhältnisse vor dem Upload zu Shopify. Wie in der Shopify-Dokumentation zu Theme-Bildern betont wird: „Sie müssen das richtige Bildseitenverhältnis verwenden“, damit Grafiken im Layout konsistent wirken.

Wählen Sie eine einheitliche Proportion für alle Bilder einer gemeinsamen Menüzeile:

• Quadratisch (1:1): Ideal für Kategorieseiten, Produkt-Thumbnails und symmetrische Raster.
• Querformat (wie 3:2 oder 16:9): Hervorragend geeignet für Werbebanner und redaktionelle Karten.

Exportieren Sie alle Bilder dieser Menüzeile im selben Verhältnis. Laden Sie Dateien hoch, die mindestens den physischen Pixelabmessungen der Desktop-Anzeige entsprechen. Für Bildschirme mit hoher Pixeldichte (wie Retina-Displays) exportieren Sie die Bilder idealerweise in doppelter Größe.

Vermeiden Sie pauschale Pixelangaben aus Foren. Da Spaltenbreiten je nach Theme variieren, gibt es keine universelle Pixelgröße. Zudem besagt die Shopify Liquid-Dokumentation: „Ein Bild kann niemals größer als seine Originalabmessungen skaliert werden.“ Zu kleine Quelldateien führen beim Hochskalieren unweigerlich zu Unschärfen.

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration: dieselben Menübilder mit object-fit cover und contain.

Wenn Ihr Shop bereits Bilder mit unterschiedlichen Proportionen enthält, erzwingen Sie mit CSS einheitliche Dimensionen. Die moderne Eigenschaft aspect-ratio, dokumentiert bei MDN Web Docs, „ermöglicht es Ihnen, das gewünschte Breiten-zu-Höhen-Verhältnis einer Elementbox festzulegen.“

Fügen Sie diese Regel in das Custom-CSS-Feld Ihres Themes oder in Ihr Haupt-Stylesheet ein:

/* Ersetzen Sie .your-menu-selector img durch den genauen Selektor Ihres Themes */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Hinweis: Ersetzen Sie .your-menu-selector img durch die spezifische Klasse Ihres aktiven Themes.

Hier füllt width: 100% die Spaltenbreite aus, aspect-ratio: 1 / 1 sperrt die Box als Quadrat und object-fit: cover füllt den Rahmen. Die Wahl bei object-fit steuert das Verhalten bei Formatabweichungen gemäß MDN Web Docs:

So finden Sie den richtigen Selektor in Ihrem Theme

Da CSS-Klassen je nach Theme variieren, ermitteln Sie die exakte Klasse Ihres Menüs:

1. Öffnen Sie Ihren Onlineshop im Desktop-Browser.
2. Bewegen Sie den Mauszeiger über das Menü, um das Mega-Menü aufzuklappen.
3. Klicken Sie mit der rechten Maustaste auf das fehlerhafte Bild und wählen Sie Untersuchen.
4. Suchen Sie in den DevTools das <img>-Element oder dessen übergeordneten Wrapper und lesen Sie den Klassennamen aus. Der Name unterscheidet sich von Theme zu Theme.
5. Gehen Sie im Shopify-Admin auf Onlineshop > Themes, wählen Sie Aktionen > Duplizieren als Backup und klicken Sie auf Anpassen.
6. Fügen Sie Ihr CSS in die Custom-CSS-Einstellung Ihres Themes ein, falls vorhanden, oder ans Ende des Haupt-Stylesheets Ihres Themes (zum Beispiel base.css in Dawn).

Step 3: Stop cropping in the Dawn mega menu

Shopifys Dawn-Theme verwirrt Händler leicht, denn im unten genannten Community-Thread werden die Mega-Menü-Bilder als CSS-Hintergrundbilder statt als <img>-Tags gezeichnet. In diesem Fall greift die object-fit-Regel aus Step 2 nicht.

In einer Shopify-Community-Diskussion zur Bildgröße im Dawn-Mega-Menü lautet der Lösungsvorschlag, den Hintergrund auf background-size: contain umzustellen, damit das ganze Bild sichtbar bleibt statt beschnitten zu werden. Das ist ein Community-Beispiel und keine offizielle Shopify-Anleitung; der Thread bestätigt nicht, dass das Problem damit gelöst wurde.

Um denselben Ansatz im Desktop-Mega-Menü von Dawn auszuprobieren, empfiehlt der Thread, diesen Code ans Ende Ihrer base.css zu setzen:

/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
  #MegaMenu-Content-2 li:before {
    /* contain shows the whole image; empty bands may appear */
    background-size: contain !important;
    background-position: center;
  }
}

Beachten Sie zwei zentrale technische Punkte:

1. Shopspezifische ID: Der Selektor #MegaMenu-Content-2 ist eine individuelle ID eines Menüeintrags. Je nach Menüreihenfolge lautet Ihre ID möglicherweise anders. Prüfen Sie den Selektor immer vorab in den Entwicklertools.
2. Geltungsbereich der Media Query: Die Regel steht in @media screen and (min-width: 767px), gilt also nur für breitere Bildschirme und behebt nicht das mobile Drawer-Menü (siehe Step 5).

Dieses Video zeigt die Struktur eines Dawn-Mega-Menüs mit Bildern als Referenz vor der Größenanpassung.

Step 4: Fix blurry menu images

Ein Bild, das auf dem Desktop scharf wirkt, kann auf mobilen Displays oder hochauflösenden Bildschirmen unscharf erscheinen. In den Shopify-Community-Beiträgen zu unscharfen Menübildern liegen dem Problem meist zwei Ursachen zugrunde:

Ursache 1: Quellbildabmessungen sind kleiner als der Anzeige-Container

Hat das Quellbild weniger Pixel als die Anzeigebox, streckt der Browser die Grafik, um den Platz zu füllen. Laut Shopifys Liquid-Dokumentation gilt: „Ein Bild kann nie auf mehr als seine Originalmaße vergrößert werden.“ Smartphone-Displays mit hoher Pixeldichte machen das besser sichtbar. Wie web.dev von Google erklärt: „Dichte-Deskriptoren dienen dazu, je nach Pixeldichte des Geräts unterschiedliche Bilder auszuliefern.“ Faustregel: Laden Sie Quellbilder in etwa doppelter Anzeigegröße hoch.

[!WARNING] Verwenden Sie object-fit: none nicht gegen Unschärfe. Im Community-Thread ließ es Menübilder in Rohgröße stehen und sie verloren ihre Form, statt das Problem zu lösen.

Ursache 2: Das Menü ruft weiterhin eine ältere Bilddatei ab

Wenn Sie eine Grafik ersetzen, nutzt das Menü womöglich weiter die alte. Im selben Community-Thread lag es daran, dass das neue Bild eine .png war, aber noch eine alte .gif verwendet wurde. Klicken Sie mit rechts auf das Bild, wählen Sie Bild in neuem Tab öffnen und prüfen Sie die URL in der Adressleiste. Taucht ein älterer Dateiname auf, aktualisieren Sie das Bild an der Quelle, damit das Menü auf die neue Datei verweist.

Step 5: Check mobile and the menu drawer

Concept illustration: eine Desktop-Mega-Menü-Korrektur neben einem mobilen Drawer-Menü, das eine eigene Prüfung braucht.

Ein häufiger Fehler besteht darin, Bildanpassungen ausschließlich auf Desktop-Bildschirmen zu testen. CSS-Regeln innerhalb einer reinen Desktop-Media-Query greifen im mobilen Ausklappmenü nicht. Zudem nutzen Themes für den mobilen Drawer oft völlig andere HTML-Struktur und Klassen.

Im Dawn-Theme verwendet der mobile Drawer beispielsweise .menu-drawer__menu. Selektoren können je nach Theme-Version abweichen, prüfen Sie daher immer Ihr eigenes Theme. Wenn Sie nur Desktop-Klassen ansprechen, bleibt der mobile Drawer ungleichmäßig oder beschnitten.

So stellen Sie eine saubere mobile Anzeige sicher:

• Untermenüs prüfen: Öffnen Sie den mobilen Drawer und klappen Sie Untermenüs der zweiten Ebene auf, um sicherzustellen, dass Thumbnails nicht die Bildschirmbreite überdehnen.
• Breiten testen: Testen Sie schmale Smartphone-Breiten im Geräte-Modus der DevTools oder direkt auf einem echten Smartphone.
• Separate Drawer-Konfiguration: Benötigt Ihr mobiler Drawer ein anderes Layout, konfigurieren Sie separate Desktop- und Mobilmenüs, damit Desktop-Änderungen die mobile Anzeige nicht stören.

Common mistakes (fixed widths, wrapped labels)

Beim Versuch, Menübilder manuell zu vereinheitlichen, treten häufig vier typische Layoutfehler auf:

1. Feste Breiten in Pixeln oder Prozentwerten erzwingen

In einer Shopify-Community-Diskussion zur Bildgrößenanpassung setzte ein Lösungsvorschlag eine feste Breite von 18% pro Menüeintrag – ein Wert, der an das Theme dieses Shops gebunden ist. Feste Breiten können den Zeilenumbruch der Spalten stören, sobald sich die Zahl der Menüeinträge ändert. Setzen Sie width: 100% am Bild und lassen Sie den Spalten-Container die Breite verteilen.

2. Mehrzeilige Textbeschriftungen übersehen

Selbst bei identischen Bildquadraten geraten Menüzeilen in Schieflage, wenn Titel über mehrere Zeilen umbrechen. Hat ein Eintrag zwei Zeilen und der Nachbar nur eine, verschiebt sich die Grundlinie. Um die Zeilen auszurichten, können Sie den Stil Ihres Navigationsmenüs ändern, indem Sie Abstände und Schriftgrößen harmonisieren.

3. Übermäßiger Einsatz von !important

Regeln mit !important können responsive Theme-Klassen überschreiben, sodass mobile Menüs nicht mehr reagieren. Möchten Sie die Gesamtproportionen verändern, sollten Sie die Größe des gesamten Menüs anpassen, statt einzelne Bild-Tags mit Brute-Force-Deklarationen zu übersteuern.

4. Codeänderungen ohne Theme-Backup durchführen

Direkte Anpassungen in base.css auf einem aktiven Theme bergen Risiken. Syntaxfehler können das gesamte Shop-Layout beeinträchtigen. Duplizieren Sie Ihr Theme stets vor CSS-Eingriffen, um Änderungen jederzeit rückgängig machen zu können.

Trade-offs: cover vs contain vs re-uploading

Jede Methode zur Anpassung von Menübildern bringt spezifische praktische Vor- und Nachteile mit sich:

Bedenken Sie zudem, dass manuelle Theme-CSS-Anpassungen bei größeren Theme-Updates verloren gehen können. Planen Sie ein bildreiches Menü, sollten Sie den passenden Menütyp wählen, um Ihr Sortiment übersichtlich zu strukturieren.

When to stop hand-writing CSS: setting image ratio in a menu app

Wenn Sie aufwendige CSS-Selektoren bei Theme-Aktualisierungen nicht manuell pflegen möchten, bietet eine Navigations-App mit integrierten Bildformat-Einstellungen dieselbe Lösung über visuelle Schalter.

In Navi+ können Sie mit der Einstellung Image ratio (auto-crop) einheitliche Proportionen vorgeben, ohne eine einzige Codezeile zu verfassen. Es stehen vier Optionen zur Verfügung:

• Unchanged (Standard): Behält die Originalproportionen jedes hochgeladenen Bildes bei.
• 1:1 square: Erzwingt ein gleichmäßiges quadratisches Format für alle Bildkacheln.
• 3:2 landscape: Erzeugt einen harmonischen rechteckigen Querformatrahmen.
• 2:3 portrait: Bietet eine aufrechte, magazinartige Kartendarstellung.

Die Funktion greift flexibel auf verschiedenen Ebenen: Sie können ein globales Format für das gesamte Menü wählen, ein eigenes Verhältnis für Untermenüs festlegen oder einzelne Einträge auf Unchanged setzen, um das geerbte Zuschneiden zu deaktivieren.

Die App wendet CSS-Regeln wie aspect-ratio und object-fit: cover automatisiert auf definierte Elemente an, ohne dass Bilder neu hochgeladen werden müssen. Zudem steht beim Upload ein manuelles Zuschneidewerkzeug zur Verfügung, um den Fokusbereich exakt festzulegen.

[!NOTE] Die Bildverhältnis-Einstellung gilt ausschließlich für Große Bilder (Big image) und Bildbanner (Image banner) im Desktop- und Mobil-Mega-Menü sowie im mobilen Drawer. Kleine Menü-Icons bleiben bewusst unberührt. Die Einstellung schärft keine minderauflösenden Dateien; Quellbilder müssen weiterhin die Auflösungsanforderungen aus Step 4 erfüllen.

Wenn Sie ein Menüdesign anhand eines Referenzbilds nachbauen möchten, bedeuten integrierte Seitenverhältnis-Regler weniger manuelles CSS-Flickwerk. In Navi+ wählen Sie einmal 1:1 quadratisch oder 3:2 Querformat, und jedes große Bild im Menü folgt dieser Vorgabe – probieren Sie es zuerst an einer Kopie Ihres Menüs aus.

Action checklist

Nutzen Sie diese Checkliste mit sieben Punkten zur Überprüfung und Behebung fehlerhafter Menübilder:

• Menü-Engine ermitteln: Prüfen Sie, ob das Menü vom Theme oder einer Navigations-App bereitgestellt wird.
• Ziel-Seitenverhältnis wählen: Legen Sie ein festes Format (wie 1:1 Quadrat oder 3:2 Querformat) für die Zeile fest.
• Quellbilder exportieren: Grafiken im gewählten Verhältnis und mindestens in Displaygröße (doppelt für Retina) hochladen.
• CSS-Selektor bestimmen: Nutzen Sie die DevTools (Untersuchen), um die Klasse Ihrer Menübilder auszulesen.
• aspect-ratio und object-fit anwenden: Tragen Sie die Formatierungsregeln im Custom-CSS-Bereich Ihres Themes ein.
• Bild-URLs verifizieren: Stellen Sie sicher, dass aktuelle Bilddateien statt veralteter Cache-Dateien geladen werden.
• Mobilen Drawer testen: Kontrollieren Sie Darstellung und Ausrichtung im mobilen Drawer auf Smartphone-Größen.

FAQ

Warum sind meine Mega-Menü-Bilder unterschiedlich groß?

Mega-Menü-Bilder weichen in der Größe voneinander ab, wenn die Quelldateien ungleiche Seitenverhältnisse besitzen und das Theme automatische Höhen nutzt. Ohne festes Seitenverhältnis passt sich jeder Container an die Höhe des jeweiligen Bildes an.

Warum werden meine Menübilder abgeschnitten?

Menübilder werden beschnitten, wenn das Container-Seitenverhältnis von dem des Fotos abweicht und object-fit: cover oder Hintergrund-Cover-Regeln aktiv sind. Die Cover-Einstellung füllt den Container und schneidet Überstände ab; contain zeigt das gesamte Bild ohne Beschnitt.

Warum wirken Menübilder auf dem Desktop scharf, auf dem Smartphone aber unscharf?

Bilder wirken auf mobilen Geräten unscharf, wenn der dargestellte Container größer als die Quellgrafik ist oder ein altes Thumbnail geladen wird. Da Shopifys CDN Bilder niemals über ihre Originalgröße hinaus hochskaliert, wirken kleine Dateien auf hochauflösenden Displays pixelig.

Welche Bildgröße sollte ich hochladen?

Laden Sie Bilder hoch, die mindestens den Pixelmaßen des Anzeige-Containers auf dem Desktop entsprechen. Für gestochen scharfe Darstellungen auf modernen Bildschirmen empfiehlt sich der Export in doppelter Containergröße.

Kann ich Menübilder quadratisch machen, ohne Theme-Code anzupassen?

Ja, wenn Ihr Navigationsmenü mit einer App erstellt wird, die eine Bildverhältnis-Einstellung bietet. Navi+ hat zum Beispiel die Einstellung Image ratio, die große Bilder und Bild-Banner in einem Menü per CSS auf 1:1 quadratisch bringt – ohne Theme-Code zu ändern und ohne Bilder neu hochzuladen.

Sources

• MDN Web Docs: CSS object-fit Dokumentation (Technischer Webstandard für Container-Einpassung)
• MDN Web Docs: CSS aspect-ratio Dokumentation (Webstandard für Seitenverhältnisse)
• Shopify Developer Docs: Liquid image_url Filterreferenz (Plattformgrenzen für Bildskalierungen)
• Shopify Help Center: Theme-Bilder und Seitenverhältnisse (Offizielle Richtlinien für einheitliche Bildformate)
• Google Web Developers: Serve responsive images (Pixeldichten und responsive Bilddeskriptoren)
• Shopify Community: Unscharfe Bilder im Mega-Menü beheben (Thread 363359) (Praxisbeispiel aus der Community; inoffizielle Diskussion)
• Shopify Community: Bildgrößen im Dawn-Mega-Menü anpassen (Thread 255590) (Praxisbeispiel aus der Community; inoffizielle Diskussion)
• Shopify Community: Größenanpassung im Mega-Menü (Thread 182414) (Praxisbeispiel aus der Community; inoffizielle Diskussion)
• Shopify Community: Ausrichtung und Bildgröße im Website-Mega-Menü (Thread 146397) (Praxisbeispiel aus der Community; inoffizielle Diskussion)