Produktbilder mobile Ansicht verkleinern

[lamilasDE]

Hallo zusammen,

Seit Wochen sitzen wir schon am Design unseres Shops und sind an dem Punkt, wo man natürlich auch die mobile Ansicht so schön wie die Desktop Ansicht haben möchte.

Nach unzähligen Anfragen konnte uns leider noch nicht geholfen werden.

Hat jemand einen Vorschlag, wie wir nur die Produktbilder in der mobilen Ansicht verkleinern können?

vielen Dank im vorraus!

[Gabe]

Hey @lamilasDE 

Danke  für die Beschreibung und schauen wir hier wie wir das Problem lösen können.

Die Größe der Produktbilder in der mobilen Ansicht von Shopify kann in der Regel durch Anpassungen am Theme-Code verändert werden. Beachte jedoch, dass dafür ein gewisses technisches Verständnis benötigt wird.

Wenn du es selber auf der Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Suche im Theme Code die Datei, die mit dem Produktbild zu tun hat. Sie kann verschieden benannt sein, je nachdem welches Theme ihr verwendet. Oft ist sie aber unter dem Namen product-template.liquid oder product.liquid zu finden. Innerhalb dieser Datei nach den CSS-Klassen suchen, die mit dem Produktbild zusammenhängen. Sobald diese Klassen gefunden sind, die Größe des Bildes anpassen, indem man entsprechenden CSS-Code hinzufügt.

Hier ist ein einfacher Beispielcode, der die Breite auf 100% (also volle Breite des Bildschirms) und die maximale Höhe auf 400px setzt:

@media (max-width: 749px) {
    .product-image-class {
        width: 100%;
        max-height: 400px;
    }
}

Ersetze .product-image-class durch die tatsächliche CSS-Klasse, die in der product-template.liquid Datei gefunden wird und speichere die Änderungen und prüfe das Ergebnis auf einem mobilen Gerät oder im Inspektormodus des Browsers (Rechtsklick -> "Inspect").

Bitte beachte, dass dies ein allgemeines Vorgehen ist und je nach Theme individuell angepasst werden muss. Es ist, wie gesagt, Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! 😉