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

Ahmedo
Tourist
12 0 5

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.

Replies 2 (2)

KetanKumar
Shopify Partner
36845 3636 11978

@Ahmedo 

sorry for any issue can you please share us store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 736

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!