how to show different images desktop and mobile, for slideshows

Store Design
, ,
1

Hello, i want to use a slideshow for my shopify store, but i want to make it so that different images show on mobile and desktop. My theme is dawn

2

Hi @ads18922

In order to fulfill your request, please follow these steps

  1. Add the following code to the slideshow.liquid file:
    Reference Screenshot
{% if forloop.index == 1 %}
    
{% elsif forloop.index == 2 %}
    
{% elsif forloop.index == 3 %}
    
{% endif %}

If you add another slide, include an additional block of code for it, adjusting the slide number accordingly:

{% elsif forloop.index == 4 %}
  1. Add the following code before the tag:
    Reference Screenshot
{% style %}
img.slideshow-image-mobile-custom-ani {
    display: none !important;
}
@media screen and (max-width: 768px) {
    body img.slideshow-image-mobile-custom-ani {
        display: block !important;
    }
    .slideshow__media.banner__media.media > img:nth-child(1) {
        display: none;
    }
}
{% endstyle %}
  1. Upload the image and get its link from here:
    Reference Screenshot

I hope this helps

Best,

Daisy

3

Hi @ads18922

Check this one.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

4

hello, i dont understand how that lets me select a different image for mobile. Ive followed all those steps but i dont understand step 3 - what do i do when ive uploaded the file and got the link?