Wie kann ich dem Artikelbild auf der Detailseite mehr "Platz" geben?

Shopware 5 Themes & Design
1

Hallo zusammen,ich habe vergebens viel gesucht. Ich nutze Shopware 5 und möchte die Aufteilung von Artikelbild und Buybox auf der Produktdetailseite anpassen, so dass das Artikelbild etwa 2/3 der Seitendarstellung einnimmt und die Buybox 1/3.

So sieht es aktuell aus:

1901×933 85.5 KB

 

So ungefährt möchte ich es haben:

1237×604 68.4 KB

 

Über hilfe wäre ich sehr dankbar. Ich habe den Shop zwar in Eigenregie „entwickelt“, bin aber Laie.

 

Viele Grüße

Michael

2

Dies ist eine Zeile bestehend aus 2 Blöcken mit den CSS Klassen

  • product–image-container
  • product–buybox

Diese haben je nach Endgerät(PC, Handy) unterschiedliche Breiten in % .

Diese kannst du anpassen. F12 in Chrome  drücken und ein bisschen mit den Elementen rumspielen. Anschliessend die Änderungen in eine CSS/LESS packen.

EDIT: Der Schuh wird dadurch aber nicht größer. Der ist verschachtelt weiteren HTML Elementen. Man kann das zwar mit CSS anpassen, aber besser ist es wenn deine Bilder keinen weissen Rand haben

1 „Gefällt mir“
3

Danke! Wie müsste der Code in der LESS Datei konkret aussehen?

Zur Veränderung der Bildgröße muss doch “nur” die Höhe des image-slider–container angepasst werden oder? Das Thumbnail ist groß genug. Die Bilder werden automatisch vom Fotostudio übertragen, da kann ich leider nur für zukünftige Uploads einen größeren Bildzoom einstellen.

VG

4

Danke! Wie müsste der Code in der LESS Datei konkret aussehen?

So einfach geht das nicht! 

Die Darstellung hängt hier von einigen Faktoren ab und zuletzt von deinem Theme. Man kann die Breiten der Container anpassen, aber die Fläche vom großen Bild muss auch in der Höhe angepasst werden. Dann muss beachtet werden, dass der Button zum Warenkorb nicht abgeschnitten wird. Da du eine abweichende Darstellung gegenüber vom Standard-Shopware hast, kann dir keiner hier eine fertige CSS-Lösung posten. In diesem Fall also selber damit befassen oder jemanden vielleicht damit beauftragen.

Und zu guter letzt sollten alle Bilder so wenig Freiraum wie möglich haben. Viele Fotografen achten darauf nicht.

5

Zum Testen und rumspielen:

.product--details .product--image-container {
 width: 70%;
 margin-right: 1%;
}

.product--details .product--buybox {
 width: 25%;
}

.image-slider--container {
 height: 800px;
}

Mobilansicht beachten! Dort muss ggf. das wieder rückgängig gemacht werden.

6

Wenn ich das richtig sehe bei euch auf der Seite, dann habt ihr es wohl nicht hinbekommen oder? Ich bin gerade genau an der selben Geschichte dran.

Mein Ansatz war es, die Höhe zu ändern, dadurch ist das Bild größer geworden etc., nur das Problem war, das es dann mit einem anderen Plugin in Konflikt kam und ich dort Darstellungsprobleme habe.

Bin also gerade auch an einem neuen Ansatz dran, hat vielleicht jemand weitere Vorschläge wie man das realisiert bekommen könnte?