FROM CACHE - de_header

Re: Anfrage zur Anpassung der Bilddarstellung in der Produktansicht

Anfrage zur Anpassung der Bilddarstellung in der Produktansicht

Esra47
Entdecker
51 0 6

Hallo, mir gefallen die Bilder in der Produktansicht leider nicht. Sie werden viel zu groß dargestellt. Gibt es eine Möglichkeit, diese wie in diesem Beispiel darzustellen? Ich wäre dankbar für jede Hilfe.

 

Hier der Link: https://et1xgdlyz2fwrbih-71988969740.shopifypreview.com 

 

Bildschirmfoto 2024-05-23 um 10.17.35.png

5 ANTWORTEN 5

Gabe
Shopify Staff
18475 2897 4264

Hey @Esra47 

 

Danke für den Link und ich sehe deine Varianten Bilder wie folgt und empfinde sie eigentlich als eine tolle Browsing Experience:

 

 

Was genau gefällt dir nicht?

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

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

Esra47
Entdecker
51 0 6

Hallo, hab es vergessen zu erwähnen. Die Desktop version ist gut, aber ich habe Probleme mit der mobilen Ansicht. Dort werden die Bilder nicht ganz angezeigt zum Beispiel : The Cardinal 

 

Bildschirmfoto 2024-05-23 um 11.35.57.png

Gabe
Shopify Staff
18475 2897 4264

Hey @Esra47 

 

Sende das an unseren Support die das ggf. etwas näher 👀 können.

 

Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

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

Esra47
Entdecker
51 0 6

Habe ich schon gemacht, aber die können mir da nicht weiterhelfen, weil man wohl dafür Progammierkentnisse braucht und das dürfen die wohl nicht machen. 

Gabe
Shopify Staff
18475 2897 4264

@Esra47 

 

Ja, somit musst du entweder erwägen deine Bilder mit den korrekten Aspekten vor dum Upload mit einen guten Bildeditor Software vorzubereiten so dass die Bilder mit den korrekten Aspekten in die Container und Platzhalter deines Gratis Dawn Themes passen und angezeigt werden. ODer du musst das mit einer relativ komplexem Prgrammierung loesen (siehe Beispiel dazu weiter unten).

 

Wenn du es selber auf deiner 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 negativ 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!

 

Um sicherzustellen, dass die Bilder in der mobilen Ansicht korrekt angezeigt werden, musst du einige Anpassungen im CSS vornehmen. CSS Media Queries können z. B. sicherstellen, dass die Bilder auf mobilen Geräten richtig skaliert und angezeigt werden.

 

Hier ein Beispiel eines CSS Code samt meinen Kommentaren die erklären was jede Codezeile unter der Haube ausführt:

 

/* Stellt sicher, dass Bilder in der mobilen Ansicht vollständig angezeigt werden */
.thumbnail img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist */
}

/* Stellt sicher, dass der Slider in der mobilen Ansicht korrekt angezeigt wird */
.slider--mobile .slider__slide {
  flex: 1 0 100%; /* Jedes Bild nimmt die volle Breite des Containers ein */
}

@media (max-width: 768px) {
  /* Spezifische Anpassungen für mobile Geräte */
  .thumbnail-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .thumbnail-list__item {
    flex: 0 0 auto;
    margin-right: 10px; /* Abstand zwischen den Thumbnails */
  }

  .thumbnail img {
    width: 100px; /* Passen Sie die Größe der Thumbnails an */
    height: auto;
  }
}

 

Erklärung der obigen CSS-Regeln:

  • .thumbnail img: Stellt sicher, dass die Bilder die volle Breite des Containers einnehmen und das Seitenverhältnis beibehalten.
  • .slider--mobile .slider__slide: Sorgt dafür, dass jedes Bild die volle Breite des Containers in der mobilen Ansicht einnimmt.
  • @media (max-width: 768px): Fügt spezifische Anpassungen für Geräte mit einer maximalen Breite von 768px hinzu.
  • .thumbnail-list: Stellt sicher, dass die Thumbnails in einer Zeile angezeigt werden und horizontal gescrollt werden können.
  • .thumbnail-list__item: Sorgt dafür, dass die Thumbnails nebeneinander angezeigt werden und ein kleiner Abstand zwischen ihnen besteht.
  • .thumbnail img: Passt die Größe der Thumbnails an, um sicherzustellen, dass sie in der mobilen Ansicht gut sichtbar sind.

Durch diese Anpassungen kann man Bilder in der mobilen Ansicht korrekt anzeigen. Teste dass aber, wie gesagt, mit einem Experten, auf verschiedenen mobilen Geräten, um sicherzustellen, dass sie wie gewünscht funktionieren.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

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