Größe der Produktbilder anpassen

[ChrisTD83]

Hallo zusammen 

ich verwende das "Dawn" Theme. Bin eigentlich auch sehr zufrieden und kurz davor mit dem Shop Online zu gehen. 

Allerdings fehlt es hier und da an ein bisschen Feinschliff. Vielleicht kann mir von euch jemand behilflich sein. 

Es geht mir grundsätzlich um die Größe der angezeigten Produkt Bilder. 

Beispiel: Meine Startseite ist folgender maßen aufgebaut, relativ standardmäßig. 

1. Headline (Produkte, Kontakt, FAQ) etc. 

2. Bild Banner mit Button in der Mitte 

An dritter Stelle kommt der Absatz "Vorstellte Kategorie", hierum geht es mir nämlich. 

Es werden auf dem Desktop insgesamt 4 T-Shirts nebeneinander angezeigt. 

Allerdings ist es so, dass die Produktbilder am Linken Bildschirm Rand beginnen und die Größe so angepasst ist, 

dass das letzte (also Vierte) Produktbild am rechten Bildschirmrand endet. 

Also ziehen sich diese Vier Produktbilder im Prinzip von Links nach rechts über die ganze Seite. 

An sich nicht verkehrt, wenn man sich auf den "Wow Faktor" bezieht. 

Es ist nicht schlecht wenn die Kunden direkt auf die Produkte aufmerksam gemacht werden. 

Selbstverständlich geht es um den ersten Eindruck, dieser ist entscheidend ob der Kunde bleibt oder wieder geht. 

Allerdings möchte ich dass ganze fürs Menschliche Auge optisch ansprechend gestalten und den Kunden nicht direkt mit überdimensionierten Produktbildern "verscheuchen". 

Deshalb würde ich die Produktbilder etwas kleiner, zentriert auf dem Bildschirm anzeigen lassen. 

Das gleiche Problem habe ich auch wenn ich auf die Produktseite/Kategorie direkt gehe. 

Die Bilder brauchen Platz vom Linken bis zum rechten Bildschirm Rand. 

Optisch finde ich das nicht ansprechend, wenn ich den Shop starte soll alles bis ins kleinste Detail Perfekt sein. 

Ich habe euch unten mal zwei Beispiel Bilder angehängt.. einmal wie es aktuell ist. Einmal wie ich es mir vorstelle. 

  

Ich hoffe die Frage war Verständlich formuliert, nicht zu viel Drum herum und mir kann irgend jemand helfen. 

Viele Grüße 

[OS-Mitch]

Hi @ChrisTD83 ,

kannst du mal schauen ob du in der "Vorgestellte Kategorie" Section die Checkbox bei "Produkte auf gesamte Breite auslegen" aktiviert hast? Das findest du unter den beiden Reglern zur Anzahl der Produkte. 

Wenn das nicht aktiviert ist, hat diese Section in der Regel 50px Padding links und rechts und sollte nicht bis zum Bildschirmrand laufen.

Falls du das nicht aktiviert hast - wurde eventuell bereits mit custom CSS gearbeitet und da etwas überschrieben?

PS: Verstehe absolut, dass man beim neuen Shop alles so perfekt wie möglich haben möchte. Aber diesbezüglich würde ich empfehlen, dass du dich mehr auf die mobile Darstellung konzentrierst. Die meisten Besucher bekommst du heutzutage sowie über den mobilen Kanal.

[ChrisTD83]

Hi @OS-Mitch 

danke für deine schnelle Rückmeldung. 

Damit hast du mir auf jeden Fall schon etwas geholfen. 

Diesen Button habe ich tatsächlich übersehen, der Abstand zum Bildschirm hat sich vergrößert. 

Allerdings ist der Abstand noch nicht so groß wie in dem Beispiel Bild. 

Gibt es noch andere Einstellmöglichkeiten welche ich eventuell übersehen habe könnte ? 

Mit CSS wurde noch nicht gearbeitet. 

Das was du sagst stimmt absolut, aber trotzdem möchte ich für den kleinen Teil der Kunden, welche über den PC oder sonstiges den Shop Besuchen, zu einem angenehmen Einkaufserlebnis beitragen.

Viele Grüße und vielen lieben Dank für deine Unterstützung

[OS-Mitch]

Hi @ChrisTD83 ,

du könntest mal den folgenden CSS Code testen:

.collection .product-grid {padding: 0 5rem 0 5rem;}

Die 5rem kannst du natürlich nach Bedarf reduzieren oder erhöhen. Und beachte, dass das dann jedes Grid dieser Art beeinflusst. Aber eventuell löst das dein Problem ja schon. Anbei der Vorher-Nachher Vergleich.

  

[ChrisTD83]

Hi @OS-Mitch 

danke für den Tipp. 

Ich habe an dem Theme Code die letzten Wochen und Monate noch nie irgendwelche Veränderungen vorgenommen, weil ich von sowas echt keinen Plan habe. 

Was ich weiß, dass man mit ein paar falschen eingaben oder Änderungen den ganzen Shop verhauen kann. 

Kannst du mir vielleicht eine genauere Anleitung geben, wo ich die richtige Stelle finde und wo genau ich den Code einsetzen muss. 

Danke und Viele Grüße 

[OS-Mitch · Accepted solution]

Hi @ChrisTD83 ,

das ist schon einmal sehr gut, dass du da vorsichtig bist. Mit CSS ist es tatsächlich nicht so tragisch wie bei anderen Codeänderungen, bei einem "Fehler" wird also nicht dein kompletter Shop zerstört sein. Aber wir wissen ja - better safe than sorry 😉

Zunächst würde ich empfehlen, dass du eine kurze Kopie deines live Themes erstellt. Damit kannst du den Code in Ruhe in Kopie testen und eventuelle Fehler spiegeln sich nicht im live Theme wieder. Dazu klickst du in der Liste deiner Themes Vertriebskanäle > Onlineshop > Themes einfach auf die 3 Punkte deines live Themes, neben dem "Anpassen" Button und wählst "duplizieren".

Danach wird eine Kopie erstellt. Sobald diese erstellt ist, geht du wieder über die 3 Punkte auf "Code bearbeiten" in den Code Editor.

Zum Testen könntest du den oben genannten Code einfach mal in die base.css File ganz am Ende eintragen. In der Liste der Themes gehst du dann wieder auf die 3 Punkte deiner Kopie und wählst "Vorschau". Dann solltest du die Änderung schon sehen. Manchmal dauert es aber ein paar Sekunden, bis die Änderungen sichtbar sind.

Anyway - um CSS nachhaltiger einzupflegen gibt es die Möglichkeit selbst eine CSS File anzulegen. Dadurch wird dein Code bei einem Update des Themes nicht überschrieben und du kannst deinen eigenen Code jederzeit wieder mit dem Theme verbinden. Dabei gehst du wie folgt vor:

Im Code Editor deiner Kopie navigierst du in der linken Spalte zum Ordner "Assets" und klickst dort auf "Neue/n/s Asset hinzufügen".

Hier wählst du den Reiter "Leere Datei erstellen", die Erweiterung "css" und den Dateinamen "custom". Damit wird die "custom.css" File erstellt.

Nun musst du diese File noch mit dem Theme "verbinden", genauer gesagt den Aufruf der File einbinden. Dazu wählst du im Ordner "Layout" die "theme.liquid" File aus. 

Suche im Code der theme.liquid nach der nachfolgenden Zeile

{{ 'base.css' | asset_url | stylesheet_tag }}

Das ist die Standard CSS File die aufgerufen wird. Füge nach dieser Zeile einen Zeilenumbruch ein und den nachfolgenden Code in die neue leere Zeile:

{{ 'custom.css' | asset_url | stylesheet_tag }}

Jetzt kannst du die Datei über den Button "Speichern" oben rechts speichern. Diese Änderung bewirkt, dass dein custom CSS nach dem standard CSS geladen wird. Dadurch hast du die Möglichkeit Styles mit eigenem CSS Code zu überschreiben.

Und das war es schon. Jetzt kannst du die leere custom.css File die du eben erstellt hast mit dem Code aus der letzten Nachricht füllen, speichern und schauen ob die Änderung deinen Wünschen entspricht.

Wie gesagt, die 5rem kannst du reduzieren (3rem etc.) oder erhöhen (7rem etc.) oder andere Einheiten wie bspw. Pixelwerte angeben (50px etc.).

Solltest du die ideale Einstellung gefunden haben, gehst du in den gleichen Schritten mit deinem live Theme vor oder alternativ, falls du in der Zwischenzeit keine Änderungen an deinem live Theme vorgenommen hast, kannst du die Theme Kopie einfach über "Veröffentlichen" live schalten.

[ChrisTD83]

@OS-Mitch 

Vielen lieben Dank für diese Ausführliche Beschreibung, hat wirklich ohne Probleme geklappt. 

Jetzt habe ich allerdings das Problem, dass die einzelnen Produkte meiner Wunschgröße entsprechen, aber die darauffolgenden Blöcke wie "vorgestellte Kategorie" & "vorgestelltes Produkt" ihre Ursprüngliche Größe beibehalten haben. 

Jetzt sieht die Startseite aufgrund der unterschiedlichen Größenverhältnisse wie ein wildes durcheinander aus. 

Kannst du mir erklären wie ich die anderen Vorlagen auch in der Größe anpassen kann ? 

Danke und Viele Grüße 

[OS-Mitch]

Hi @ChrisTD83 ,

super, freut mich!

Okay, wenn du die Anpassung global auf alle Sections (Blöcke) anwenden möchtest, bist du mit einem anderen Ansatz besser bedient.

Schau mal im Theme Editor (Vertriebskanäle > Onlineshop > Themes > "Anpassen"), dort findest du in der ganz linken Navigationsleiste den Punkt "Theme-Einstellungen" (das Icon ist ein Pinsel).

Öffne dort den Reiter "Layout". Hier siehst du dann die Einstellung "Seitenbreite", die du von 1000 - 1600px beliebig anpassen kannst. Dadurch verringerst du die Breite ALLER Sections, ausgenommen von Sections die auf die volle Breite gehen.

Nach dieser Änderung wird die "Vorgestellte Kategorie" Section weiterhin aus dem Raster fallen, da du hier ja mit dem custom CSS Code einen zusätzlichen Abstand links und rechts eingefügt hast. Um das zu beheben gehst du wieder über den Code Editor in die custom.css File und löscht deinen Code einfach wieder. Die Anpassungen in der theme.liquid File kannst du gerne so lassen, falls du zukünftig mal custom CSS benötigst.

Entschuldige wenn ich das falsch verstanden habe. Dass alle Sections schmaler werden sollen war mir nicht klar.