Different image for web and mobile - Narrative theme

Technical Q&A
1

Hi

I tried to follow a thread that seemed to have a solution but I can’t figure it out. I have a ‘widescreen’ style image and a ‘vertical’ style image for the main slideshow banner that I want to show on desktop and mobile respectively. How can I do this on the Narrative theme? Or on any theme in general?

I have seen that its also possible to just have two different slideshow sections and hide and unhide each one depending on the screen display width.

This is the thread I’m referring to.

https://community.shopify.com/post/523193

My webpage is walkonwalkon.com for your info

2

Hi @MilanWalkOn ,

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/j0mWcIx.png
Code: {{ section.settings.display }}
And add code here: https://i.imgur.com/39sFKap.png
Code:

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

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

3

Thanks for the help @LitCommerce . I got the code in and I can see the option in the Slideshow Section now, however I’m not noticing any difference. If I select a slideshow to be mobile only, it still shows on desktop.

4

Hi @MilanWalkOn ,

Please send your site and if your site is password protected, please send me the password. I will check it for you.

5

To summarise,

  1. In the Code, go to Sections > slideshow.liquid

  2. In line 49 of this image add the following code: {{ section.settings.display }}"

directly after: <div class="

and before: slideshow

So it should read: <div class=“{{ section.settings.display }}” slideshow–{{section.settings.slider_height etc etc

  1. Also in slideshow.liquid, add the code directly under line 248 in the image (https://i.imgur.com/39sFKap.png)

Use Ctrl F to find “index-section” to locate this line.

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

Step 4. In your website editor, set up to two different slideshow sections. In the sidebar you now have the option to Set one as Desktop only, and one as Mobile only.

  1. Enjoy