Slideshow für Mobile & Desktop anpassen (Dawn Theme)

[richjj]

Hey, 

Ich hätte gerne einmal eine Slideshow die nur auf dem Handy angezeigt wird und eine die nur auf dem Desktop angezeigt wird. Dafür habe ich extra 2 Slideshows erstellt welche ich anhand der Größe ausblenden möchte.

Die eine Slideshow ist Hochkant (für Handy), die andere Quer (Für Desktop).

Nun habe ich auch einen Code gefunden der dass so weit auch irgendwie möglich machen sollte aber irgendwie funktioniert da etwas nicht.

Hier der andere Community Post: https://community.shopify.com/c/shopify-design/seperate-slideshow-images-on-mobile-and-desktop-refre...

Und hier der Code aus dem Post:

@media screen and (min-width:750px){ #shopify-section-template--16663645094112__1ae61c78-130c-429b-a20c-0b086ad6ad2c{display:none; visibility:hidden;} } @media screen and (max-width:749px){ #shopify-section-template--16663645094112__fc750faf-1ed4-4c8a-a2b3-99ed9bc56e79{display:none; visibility:hidden;} }

Ich weiß leider nicht wo ich die ID finde für die einzelnen Bilder, wäre super wenn mir das jemand erklären könnte! 

Shop: koriclo.com

Code: koriclothing

[Gabe · Accepted solution]

Hey @richjj 

Danke für die Bilder und Links und um die ID für die einzelnen Bilder in deinen Slideshows zu finden, musst du den HTML-Code deiner Shopify-Seite überprüfen. Um die IDs zu finden kannst du an erster Stelle vieles finden wenn du im Storefront auf der genauen Stelle in Google Chrome einen Rechtsklick machst -> Inspect -> und in der Chrome Developer Console siehst du dann den die genaue <span> Class die du im Theme Code, wahrscheinlich im product.liquid suchen musst und da den CSS ändern.

Dann im Dawn Theme Code-Editor die genaue Datei finden, die du bearbeiten musst, wie "slideshow.liquid" oder ähnlich. Suche nach dem HTML-Code für die Slideshow-Bilder. Normalerweise sind dies <img>-Tags mit einer bestimmten Class oder ID, die das Bild identifizieren. Schau dir den HTML-Code für jedes Bild an und suche nach einer eindeutigen ID oder Class, die dem Bild zugeordnet ist. Dies kann in Form eines "id" -Attributs oder eines "class" -Attributs angegeben sein. Zum Beispiel könnte das ID-Attribut so aussehen: id="mein-bild-id".

Notiere dir die gefundenen IDs für die einzelnen Bilder deiner Slideshows.

Jetzt kannst du den Code aus dem Community-Post verwenden und die IDs der Slideshow-Bilder entsprechend einfügen, wie das folgende Beispiel Code:

@media screen and (min-width: 750px) {
 #ID-FÜR-HOCHKANT-SLIDESHOW {
   display: none;
   visibility: hidden;
 }
}

@media screen and (max-width: 749px) {
 #ID-FÜR-QUER-SLIDESHOW {
   display: none;
   visibility: hidden;
 }
}

Ersetze ID-FÜR-HOCHKANT-SLIDESHOW durch die ID deiner Slideshow für das Hochkant-Bild und ID-FÜR-QUER-SLIDESHOW durch die ID deiner Slideshow für das Quer-Bild.

Speichere die Änderungen und überprüfe deine Shopify-Seite auf dem Desktop und dem Handy, um sicherzustellen, dass die Slideshows entsprechend angezeigt bzw. ausgeblendet werden.

Wenn du es selber DIY 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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!