Produktbilder kleiner machen in Produktansicht und bei Featured Products

[ginmacher2025]

Hallo Community,

ich migriere gerade von Joomla nach Shopify und habe ein Thema, was ich nach viel hin und her leider alleine nicht lösen kann - mir fehlt schlicht das profesionelle Hintergrundwissen bei komplexem CSS. Ich habe auch den Hersteller des Templates schon angefragt - aber hier habe ich keine zufriedenstellende Lösung erhalten trotz ich Zugriff auf den Shop gegeben habe.

Folgendes: beim dem eingesetzten Template "Reformation" von fuelthemes (in Summe ein cooles Template) sind alle Bilder in allen Modulen extrem groß (trotz Einstellung small bzw. fit adapt to image etc.). Die Bilder nehmen mehr als die ganze Website ein - das sieht - sorry - einfach kacke aus 🙂

Ich habe schon mit etwas Untersuchung und herumprobieren wie dem Untersuchungsmode in Firefox ein paar CSS Dinge in den Backfiles anpassen können, aber bei den grundlegenden Dingen komme ich nicht weiter.

Anbei mal der Link zur Website:

https://yyvz1u-pc.myshopify.com/

Hier sind es die Image mit Text mittig mit sowie Featured Products/Collection ganz unten.

Bei Text mit Bild (die 4 Gin-Sorten mit Text) habe ich die Bilder kleiner bekommen, aber jetzt sind diese zu weit weg vom Text.

Bei den Featured Products Modul ganz unten auf der Startseite werden die Bilder aus den Produkten gezogen, un egal wie groß oder klein ich die Produktbilder erstelle, das Template skaliert immer auf die gleiche große Größe hoch (Bild: Featured_Products)

Und wenn man dann in der Section Featured Procuts auf das Produkt klickt und damit auf die Einzelproduktseite gelangt - gleiches Spiel: das Bild ist wieder riesig (siehe hier: https://yyvz1u-pc.myshopify.com/products/ginmacherin-munchner-dry-gin)

Kann mir jemand helfen, wie ich den CSS Code anpassen oder ggf. welchen Custom CSS ich hier verwenden kann (Desktop/Mobile)

Vielen Dannk im Voraus für Eure Hilfe

Viele Grüße

Alex

[Nordalux]

Hallo Alex,

mit einfachen Mitteln ist das nicht so einfach möglich. So wie ich es sehe bedarf es einige Änderungen im CSS, um alles einheitlich wieder schön aussehen zu lassen.

Nehmen wir auf der Startseite folgendes Bild:

Das muss definitiv kleiner, mind. 50%. Machst du dies via CSS, hängt es irgendwo oben links im Container. Sicht nicht nur unschön aus, sondern ist auch auf Dauer nervig es pro Sektion einzustellen. 

Ich täte hier mehr Optionen in die Einstellungen eincoden, um dir mehr Freiheit im Design zu geben. Wenn ich dir das umsetzen soll, melde dich gern bei mir.

[ginmacher2025]

Servus Tobias, 

schreib' mich doch mal direkt an (info@ginmacher.de), dann lass' uns das mal besprechen. 

Viele Grüße 

Alex 

[Ben310]

Du kannst das schnell lösen indem du die Aspekte der Bilder in deinem Bild Editor änderst. Das Bild der Bavaricus Flasche is hochkant, aber der Platzhalter des Themes ist im Querformat, sprich, you are trying to "square the circle"! Deswegen sieht es so aus:

[ginmacher2025]

Servus Ben10,

Danke Dir für den Hinweis. Das hieße ja aber om Umkehrschluss, dass ich die Flasche hinlegen müsste um die Breite statt der Höhe auszunutzen - irgendwie komisch bei einer Flaschen🙂 

Anders: wenn ich die Fläche mini mache und sie hochkant lasse (sagen wir mal 50x100 px), skaliert das Template trotzdem auf die komplette Größe und das Bild wird verschwommen.

Gibt es die Möglichkeit per CSS die Bildercontainer auf hochkant umzustellen? 

Viele Grüße 

Alex