Hero-Banner wird bei kleineren Bildschirmen abgeschnitten

[Mythik]

Hallo zusammen,

ich nutze derzeit die Version 11.0.0 des Dawn-Themes.

Ich würde gerne wissen, welche Maße ihr für die großen Banner auf der Startseite verwendet. Ich habe gestern mittels CSS eingestellt, dass das erste Bild im Theme-Editor auf dem Desktop angezeigt wird und das zweite Bild, wenn jemand mit dem Smartphone meinen Shop besucht.

Ich habe allerdings das Problem, dass wenn ich im Browser mittels der Untersuchen-Funktion die verschiedenen Bildschirmgrößen anschaue, das Bild je nach Bildschirmgröße in der Breite und Höhe abgeschnitten wird.

Wenn ich mir andere Shops anschaue, die auch über Shopify laufen, sehe ich, dass deren Banner auf allen Mobilgeräten genau gleich aussieht und nirgendwo abgeschnitten wird. Da ich in deren und meinem Code keine Unterschiede erkennen konnte, die darauf hinweisen, würde ich gerne wissen, ob ich vielleicht die falsche Bildgröße verwende. Ich habe bereits ein Banner mit der Größe Breite: 2.500 x Höhe 2.500px als auch ein quadratisches Banner mit den Maßen 2.500x2.500px verwendet.

Bei dem Banner, welches ich für den Desktop verwende, habe ich das ebenfalls. Dort habe ich die Größe Breite: 6.000 x Höhe: 2.400px. Wenn ich über die Untersuchen-Funktion die Bildschirmbreite verkleinere, wird mein Banner in der Breite immer weiter abgeschnitten bis am Ende nur noch der in Shopify gesetzte Fokuspunkt erkennbar ist. Ich habe bereits mehrere Shops gesehen, wo das nicht so ist und sich das Bild einfach in gesamter Größe verkleinert, aber nicht abgeschnitten wird.

Ich würde mich sehr über hilfreiche Tipps freuen.

Vielen Dank im Voraus.

Beste Grüße

[Gabe]

Hey @Mythik

Es ist nicht unüblich, dass Bannerbilder unterschiedlich angezeigt werden, abhängig von der Bildschirmgröße und den CSS-Einstellungen, die verwendet werden.

Du kannst z. B. sicherstellen, dass du CSS-Regeln verwendest, die responsive sind und sich automatisch an die Größe des Bildschirms anpassen. Hier ein CSS Beispiel um das zu testen:

.banner-image {
 max-width: 100%;
 height: auto;
}

Für das Dawn-Theme variieren also die empfohlenen Bannergrößen je nach Version und Bereich des Themes, die du gestalten möchtest. Ein übliches Verhältnis könnte 16:9 sein und man kann eine Größe von 1920x1080px für Desktop-Banner ausprobieren und eine kleinere Version für Mobile.

Wenn man das Bild als Hintergrundbild verwendet, sollte man das background-size-Attribut in Betracht ziehen. Verwende vielleicht background-size: cover;, um das Bild so zu skalieren, so dass es den Container füllt, oder background-size: contain;, um das gesamte Bild innerhalb des Containers sichtbar zu machen, ohne es zu beschneiden.

Du kannst auch Media Queries verwenden, um spezifische CSS-Regeln für verschiedene Bildschirmgrößen festzulegen. So kann man beispielsweise unterschiedliche Bilder oder Größen für Desktop- und Mobilansichten definieren, wie im folgenden Beispiel:

@media only screen and (max-width: 600px) {
 .banner-image {
   /* Mobile-spezifische CSS */
 }
}

Shopify bietet auch die Möglichkeit, den Fokuspunkt eines Bildes festzulegen. Wenn dieser Punkt nicht richtig eingestellt ist, kann das Bild merkwürdig zugeschnitten erscheinen. Es ist auch eine good practice, das Design auf echten Geräten zu testen, nicht nur im Browser-Inspektor. Simulatoren können das tatsächliche Verhalten nicht immer genau widerspiegeln.

Da das ein Shopify Theme ist kannst du dich als Teil deiner 60-Min Design Time an den Shopify-Support wenden. Die können spezifische Empfehlungen für das Theme geben.

[Mythik]

@Gabe Hey, vielen Dank für deine Antwort. Das mit den Media Queries habe ich schon gemacht. Es sieht auch nicht mehr so schlimm aus und auf den meisten Geräten passt es. Ich suche halt nach dieser Einstellung, damit das Bild nicht beschnitten wird, sondern immer den ganzen Container ausfüllt. Ich werde das mit dem cover-Attribut mal versuchen. Wenn ich eine Lösung habe, werde ich es hier nochmal mitteilen.

Ich habe noch eine andere Frage an dich. Wenn ich einen Bug in dem Dawn-Theme gefunden habe, an wen kann ich mich da wenden? Die Kollegin von dem Chat-Support konnte mir leider absolut nicht weiterhelfen.

Und zwar ist in meinem Einschub-Menü auf der mobilen Version unten die Sprachauswahl und die Region eingeblendet. Im Theme-Editor habe ich das aber nicht angehakt. Ich habe mir den Dawn Demo-Shop angeschaut und da ist es ausgeblendet. Ich habe alles versucht, bekomme es aber nicht ausgeblendet. Ich möchte nämlich die Sprachauswahl ausblenden und lediglich die Auswahl für die Region behalten. Im Theme-Editor habe ich es auch schon beides wieder angehakt und weggemacht. Es hat bisher nichts geholfen.

Ich habe auch nichts im Code geändert. Ich weiß nicht, wieso es nicht klappt. Gibt es da einen gesonderten Support, der einem dabei weiterhelfen kann, weil es ja ein Shopify-Theme ist?

Vielen Dank im Voraus.

[Gabe]

Hey @Mythik

Ja, halte uns auf dem Laufenden hier im Thread wie das mit dem @media Attribut klappt. Dann hast du auch andere Themes getestet? Unsere 2.0 Themes können die Bilder ganz gut rendern, gewisse Limits gibt es aber auf versch. Screen Sizes da hast du recht. Die bezahlbaren Themes können das aber oft besser denn die haben komplexere Algorithmen eingebaut. Nicht vergessen, du kannst mehrere zum Shop hinzufügen als Test-Themes (klicke durch die Theme Demos hier) um zu schauen welche Themes das viel besser machen als das Dawn Theme.

Du kannst über dem 60-Min Design Time, dass ich oben verlinkt habe, alle Bugs melden. Zur Lösung des Problems mit der Sprach- und Regionsauswahl kann man den Code des Themes selbst anpassen. Die betreffende Datei und den Codeabschnitt zu finden, könnte jedoch etwas Recherche verlangen.

Es ist sicherlich frustrierend, wenn solche Dinge im Dawn Theme nicht so funktionieren, wie man es erwartet, aber wie gesagt, das können die bezahlbaren Profi-Themes das etwas besser.

[Mythik]

@Gabe Ich versuche gerade ein Bild als Hintergrundbild einzufügen. Allerdings funktioniert das irgendwie nicht. Kannst du anhand des Codes vielleicht sehen, wo da der Fehler ist?

Ich habe den Code in das Feld für die benutzerdefinierte CSS im Theme-Editor beim Banner eingefügt.

Ist das “.banner” vielleicht falsch? Muss ich das woanders anfügen?

Vielen Dank im Voraus.

.banner {
background-image: url(“https://cdn.shopify.com/xxxxxxxxx”) !important;
background-position: center !important;
background-size: contain !important;
}

[Gabe]

@Mythik

Im CSS Editor gibt es einige Einschränkungen (lese diese hier) und Benutzerdefiniertes CSS kann zu deinem gesamten Theme hinzugefügt werden. Dies hat Auswirkungen auf alle Seiten deines Onlineshops. Benutzerdefiniertes CSS kann auch zu einem bestimmten Abschnitt deines Themes hinzugefügt werden. Wenn du einem Abschnitt deines Themes benutzerdefiniertes CSS hinzufügst, wird die CSS-Sprache bereichsbezogen auf diesen Abschnitt angewendet. Hast du beide probiert?

Dein CSS-Code sieht grundsätzlich korrekt aus, vorausgesetzt, dass der tatsächliche Selektor im HTML, der das Banner-Bild repräsentiert, tatsächlich die Klasse .banner verwendet.

Der Selektor .banner muss exakt der Klasse im HTML-Code entsprechen, die das Banner-Bild enthält. Verwende die Chrome Developer Console (meist F12 oder Rechtsklick und “Inspect”) und überprüfe den HTML-Code, um sicherzustellen, dass der Container, in dem das Bild angezeigt werden soll, die Klasse banner hat.

Stelle auch sicher, dass die URL in url("[https://cdn.shopify.com/xxxxxxxxx](https://cdn.shopify.com/xxxxxxxxx)") korrekt ist. Öffne die URL in einem neuen Browser-Tab, um sicherzustellen, dass das Bild geladen wird. Wenn es einen Fehler in der URL gibt, wird das Hintergrundbild nicht angezeigt.

Manchmal kann die Verwendung des !important-Flags zu Problemen führen, wenn es Konflikte mit anderen CSS-Regeln gibt. Man kann versuchen, diese Flags vorübergehend zu entfernen, um zu sehen, ob das das Problem behebt.

Wenn der Container, in dem das Hintergrundbild angezeigt wird, keine Größe hat (d.h., er ist leer und hat keine Breite und Höhe), wird das Hintergrundbild möglicherweise nicht angezeigt. Stelle sicher, dass der Container eine bestimmte Größe hat.

Manchmal speichert der Browser ältere Versionen der CSS-Dateien im Cache. Versuche, den Cache zu leeren und die Seite neu zu laden, um sicherzustellen, dass die neueste Version der CSS-Datei verwendet wird.

Ansonsten wirst du den Code direkt im Theme Liquid eintragen müssen.

[Mythik]

@Gabe Ja, ich habe beide probiert und es auch direkt im Code hinterlegt. Das Bild wird einfach nicht angezeigt. Kann ich das sonst über die Designzeit laufen lassen?

[Gabe]

@Mythik

Das kannst du über die Designzeit anfragen, ja. Gebe aber auch Acht auf die Ausschlüsse in der verlinkten Hilfeseite von oben.