Liquid, JavaScript, Themes
Guten Tag,
wir haben folgendes Problem.
Und zwar wird bei unserer Mobileansicht der Background unscharf und viel zu groß angezeigt (s. Screenshot in der Zip-Datei). Bei der Desktopansicht passt aber alles.
Wie könnte man nun vorgehen, nur die Mobileansicht zu bearbeiten?
Mit freundlichen Grüßen
Jasper
Gelöst! Zur Lösung
Erfolg.
Das Bild Aspect deines Hintergrundbildes (16:9?) passt ganz einfach nicht in dem Mobile Raster rein (1:2?). Manche Themes haben eingebaute komplexe Algorithmen die das Aspekt korrigieren aber wie es aussieht hat dein Theme diesen Algorithmus nicht, oder schon, aber der Algorithmus greift nicht für Hintergrund Fotos. Ausserdem würde ich von Background Images abraten denn die sind schwer zu gestalten.
Aber ein Workaround wäre ein separates Hintergrundbild für Desktop und für Mobile zu haben was aber Coding Kenntnisse verlangt. Beispiele davon kannst du in diesem Leitfaden nachlesen wie man das in der Slideshow macht (immer in einer Testumgebung vorher testen).
Somit wird das eine Programmierung verlangen je nach Theme Code dass du hast. Du könntest z. B. ein ganz anderes Foto auf Mobile anzeigen oder das selbe das aber anders in den Dimensionen geschnitten ist. Siehe ein YT Video der zeigt wie man das im Debut Theme machen kann hier.
Das Problem liegt oft an den Bilder-Dimensionen und dem Theme Platzhalter der Fotos im Theme. Diese sind auch, wie gesagt, anders dimensioniert auf Mobile als auf Desktop, wie z. B. 16:9 versus 3:4 o. ä. Manche Themes verwenden komplexe Algorithmen die die Dimensionen zw. Desktop und Mobile automatisch übersetzen, so dass das Foto auch auf Mobile nicht abgeschnitten aussieht, aber die meisten Themes machen das nicht.
Du kannst in deinen Theme Editor gehen und im Hero Section sieht man oft eine eine Einstellung wie "Section height". Wenn du diese Einstellung von "Mittel" auf "Groß" oder sogar "Extra groß" umstellt dann kann dein Bild besser auf Mobile aussehen.
Die Höhe deines Hero Banners ist meist auf 475px (im theme.scss.liquid) für alle Bildschirme mit einer Mindestbreite von 750px eingestellt. Du kannst diese Höhe in der besagten Datei (aber zuerst in einer Testumgebung) ändern und eine Höhe einstellen, die den Teil des Bildes zeigt, den du anzeigen möchtest.
Du könntest sie zum Beispiel auf 87vh oder REM einstellen (was auf meinem Bildschirm gut aussieht).
Die Einheit vh oder REM ist relativ zur Höhe deines Ansichtsfensters - 1vh ~ 1% der Höhe des Ansichtsfensters.
Bei weiteren Fragen raten wir einen Fotografen oder Experten zu konsultieren den die können hier am besten helfen.
Erfolg.
Das Bild Aspect deines Hintergrundbildes (16:9?) passt ganz einfach nicht in dem Mobile Raster rein (1:2?). Manche Themes haben eingebaute komplexe Algorithmen die das Aspekt korrigieren aber wie es aussieht hat dein Theme diesen Algorithmus nicht, oder schon, aber der Algorithmus greift nicht für Hintergrund Fotos. Ausserdem würde ich von Background Images abraten denn die sind schwer zu gestalten.
Aber ein Workaround wäre ein separates Hintergrundbild für Desktop und für Mobile zu haben was aber Coding Kenntnisse verlangt. Beispiele davon kannst du in diesem Leitfaden nachlesen wie man das in der Slideshow macht (immer in einer Testumgebung vorher testen).
Somit wird das eine Programmierung verlangen je nach Theme Code dass du hast. Du könntest z. B. ein ganz anderes Foto auf Mobile anzeigen oder das selbe das aber anders in den Dimensionen geschnitten ist. Siehe ein YT Video der zeigt wie man das im Debut Theme machen kann hier.
Das Problem liegt oft an den Bilder-Dimensionen und dem Theme Platzhalter der Fotos im Theme. Diese sind auch, wie gesagt, anders dimensioniert auf Mobile als auf Desktop, wie z. B. 16:9 versus 3:4 o. ä. Manche Themes verwenden komplexe Algorithmen die die Dimensionen zw. Desktop und Mobile automatisch übersetzen, so dass das Foto auch auf Mobile nicht abgeschnitten aussieht, aber die meisten Themes machen das nicht.
Du kannst in deinen Theme Editor gehen und im Hero Section sieht man oft eine eine Einstellung wie "Section height". Wenn du diese Einstellung von "Mittel" auf "Groß" oder sogar "Extra groß" umstellt dann kann dein Bild besser auf Mobile aussehen.
Die Höhe deines Hero Banners ist meist auf 475px (im theme.scss.liquid) für alle Bildschirme mit einer Mindestbreite von 750px eingestellt. Du kannst diese Höhe in der besagten Datei (aber zuerst in einer Testumgebung) ändern und eine Höhe einstellen, die den Teil des Bildes zeigt, den du anzeigen möchtest.
Du könntest sie zum Beispiel auf 87vh oder REM einstellen (was auf meinem Bildschirm gut aussieht).
Die Einheit vh oder REM ist relativ zur Höhe deines Ansichtsfensters - 1vh ~ 1% der Höhe des Ansichtsfensters.
Bei weiteren Fragen raten wir einen Fotografen oder Experten zu konsultieren den die können hier am besten helfen.
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024