FROM CACHE - de_header

Produktbild wird im Browser falsch angezeigt

danielsbl
Besucher
2 0 0

Hallo,

ich habe folgendes Problem. Wenn ich meinen Shop in Chrome aufrufe sieht alles ganz gut aus, bis ich auf ein Produkt gehe und das Bild vergrößert sehen möchte. Die Vorstellung ist, dass das Bild mittig auf dem Bildschirm etwas größer angezeigt wird wie man es von herkömmlichen Shops gewohnt ist. Jedoch dieses über den kompletten Bildschirm aufgerufen wird wo oben und unten noch ein Teil fehlt. Meine Frage ist wie man dies behebt und ob es vielleicht eine Schaltfläche gibt wo man dies einfach ändern bzw. die Große in der das Bild aufgerufen wird einschränken kann. 

3 ANTWORTEN 3

Gabe
Shopify Staff
16357 2587 3853

Hey @danielsbl 

 

Kannst du schnell hier ein Screenshot oder besser, ein Link hier einfügen denn ich bin bald AFK

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

danielsbl
Besucher
2 0 0

Screenshot (4).png

Screenshot (5).png

Dies ist ein Testprodukt, wenn ich im Browser wie im ersten Bild gezeigt auf das erste Bild klicke. Dann kommt über den gesamten Bildschirm das zweite Bild was ich hochgeladen habe

Gabe
Shopify Staff
16357 2587 3853

Hey @danielsbl 

 

Danke und im Dawn Theme wird das vergrößert im Zoom Modus gezeigt, so wie in deinem Bild abgebildet. Dawn's Art Direction ist minimalistisch und bildorientiert, um eine breite Palette von verschiedenen Händlertypen anzusprechen.

 

Möchtest du den Zoom etwas reduzieren dann gehe in das Produkt im Admin, klicke auf das Foto und gehe in den Medien-Editor. Da kannst du dann auf "Größe ändern" links unten im Editor klicken und die Pixels reduzieren.

 

image.png

 

Möchtest du das Zoom aber im CSS Code generell reduzieren dann kannst du das folgende in einer Theme Kopie zuerst testen:

  1. Gehe in die theme.scss.liquid.
  2. Suche die CSS Class verantwortlich für den image zoom. Es könnte etwas wie "product-single__photo-zoom" oder "product-image__zoom" heissen.
  3. Sobald du die passende Klasse gefunden hast, kannst du die Zoom-Intensität anpassen, indem du die CSS-Eigenschaft "transform: scale(x);" änderst wo x eine Nummer größer als 1 ist. Je niedriger die Zahl, desto geringer die Zoom-Intensität.
  4. Speichere die Änderungen und teste sie im Test-Theme.

Hinweis: Diese Schritte sind allgemeine Richtlinien, die genaue Umsetzung kann bei verschiedenen Themes oder Anpassungen variieren.


Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog