How can I customize slider images for mobile and desktop views?

Store Design
1

Hello guys, I want to make my slider images appear on mobile different than in desktop. How can I do that? Basically it’s one image but it looks good on desktop but not on mobile.

1 Like
2

@Ahmedo

sorry for any issue can you please share us store url

3

Hi @Ahmedo ,

You need to create a Slideshow that displays only for mobile. Means add an option, it will help you to display either on desktop, or on mobile.
Go to file sections > slideshow.liquid and add code: https://i.imgur.com/Ka2om3o.png
Code: {{ section.settings.display }}
And add code here: https://i.imgur.com/sti2sPe.png
Code:

{
  "type": "select",
  "id": "display",
  "label": "Display on",
  "options": [
        {
          "value": "",
          "label": "Desktop & Mobile"
        },
        {
          "value": "medium-down--hide",
          "label": "Desktop only"
        },
        {
          "value": "large--hide",
          "label": "Mobile only"
        }
  ],
  "default": ""
},

Then you can show it with customized option: https://i.imgur.com/y3mcFmM.png
Hope it clear to you.