Shopify get different images on mobile and desktop at slideshow, how does that work?
Hey @Ayodi
Thanks for your question and you have reached the German community here but we can chat in English, that’s no problem.
We may need some more information as to what you mean so that we can take a closer
. Do you perhaps have an example? Don’t forget that all themes render Images in the storefront in different ways. Which theme are you using?
Some themes render the Images in WYSIWYG (what you see is what you get) and some use algorithms to transform and optimise Images. Have you considered using Image optimisation for your store in order to upload perfect looking Images?
If you are interested in that subject, I have a great Blog piece on that topic here that can help you optimise your Images for your storefront on desktop and mobile here.
Let me know if you have any other questions on that. ![]()
Hey Gabe, wir können auch deutsch reden, dachte mit Englisch erreiche ich mehr antworten.
Also ich habe die Crave Theme und da habe ich als erstes eine Slideshow. Ich würde da gerne für das Handy ein eigenes Bild haben und für desktop ein eigenes.
Ah cool, das Crave Theme ist nicht schlecht! Hast du schon die neuste Version 9.0 zu deiner Theme Library hinzugefügt?
Um verschiedene Bilder auf Mobile und Desktop anzuzeigen wird das einen CSS Code verlangen aber ganz einfach ist das nicht. Die Good News ist dass du dafür jetzt den neuen CSS Editor verwenden kannst:
Ganz so einfach ist es dennoch nicht wie du in diesem Beitrag und auch in diesem sehen kannst.
VG,
hey, weißt du welchen code ich dort eingeben kann?
Hey @Ayodi
Um separate Bilder für Desktop- und Mobilgeräte in der Slideshow des Crave-Themes zu verwenden, muss man Media Queries im CSS verwenden aber einige Änderungen an der Liquid-Datei sind dabei auch notwendig, die für die Slideshow verantwortlich ist.
Ein umfangreicher Code wird auch also notwendig sein. Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative 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!
Du kannst z. B. einen CSS wie den folgenden zuerst einsetzen die die max-width und min-width css properties anwendet um zw. den Bildschirmgrößen zu unterscheiden:
/* Mobile-only style */
@media (max-width: 767px) {
.slideshow__slide.mobile-slide {
display: block !important;
}
.slideshow__slide.desktop-slide {
display: none !important;
}
}
/* Desktop-only style */
@media (min-width: 768px) {
.slideshow__slide.mobile-slide {
display: none !important;
}
.slideshow__slide.desktop-slide {
display: block !important;
}
}
Dann in der Abschnitte → slideshow.liquid einen Codeblock, der das Slideshow-Bild hinzufügt. Die For-Loop sollte in etwa so aussehen:
{% for block in section.blocks %}
...
{% endfor %}
Passe diesen Codeblock an, um zwei separate Bilder für Mobil- und Desktop-Geräte anzuwenden und verwende dabei die oben erstellten CSS-Klassen .slideshow__slide:
{% for block in section.blocks %}
...
...
{% endfor %}
Gehe in die “settings_schema.json” und suche den Abschnitt, der für die Slideshow-Bilder verantwortlich ist oder füge ein .json wie den folgenden hinzu:
{
"type": "image_picker",
"id": "slide_image_desktop",
"label": "Slide image (Desktop)"
},
{
"type": "image_picker",
"id": "slide_image_mobile",
"label": "Slide image (Mobile)"
},
Das ist, wie gesagt, Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! Gerne kann ich welche Experten empfehlen!

