Hide section on desktop, but show on mobile

Store Design
1

Hello, I have a slideshow section in my theme (broadcast), which I want to hide if viewed on desktop, but keep if viewed on a mobile. I found a couple of discussions but none of the codes/solutions worked for me, it just showed the code on my homepage preview. Can someone help please? Thank you

2

Hii,
Kindly share your store URL and a screenshot so,
I can solve it perfectly.
Thank You.

3

Hi @lej123

It can be possible using lines of JS code.

It would be good for us to know the website URL so we can provide the best solution we can.

Thanks!

4

Hello, this is a link to the preview

https://ifdxwtjxz8dpviaf-50857803925.shopifypreview.com

It is this slideshow section I want hidden on desktop, but kept on mobile

Thank you

5

Hi @lej123

Add below code just before the
6

Hello,

Thank you, sorry but where do I find ?

Thanks in advance

Lucy

7

Hi @lej123

Theme > Actions > Edit Code

Sheesh_b_0-1638278389255.png
Sheesh_b_0-1638278389255.png1636×420 55.7 KB

Then find theme.liquid and then paste the code just above the

Sheesh_b_1-1638278454010.png
Sheesh_b_1-1638278454010.png1604×847 66 KB

8

Thank you, mine looks like this, should I paste it on row 124 or literally put my cursor before and hit paste.

9

Yes, put the cursor just above

Sheesh_b_0-1638282080243.png
Sheesh_b_0-1638282080243.png1049×281 7.39 KB

Edit:

Also, if the code doesn’t work put below code instead of previous code.
10

Hello,

Please bear with me, my draft themes have disappeared, once I get them back I will test it and confirm if this has worked.

Thank you

11

Hello,

Unfortunately neither code has worked. It’s still showing in my preview. Here is a link to my current preview with the code applied.

https://ifdxwtjxz8dpviaf-50857803925.shopifypreview.com

Thanks for your help

Lucy

12

Hi @lej123

Use below code now
13

Hello, thanks

It has gotten rid of the top section rather than the slideshow section.

14

You just need to change the ‘shopify-section-16365666074c26092c’ to ‘shopify-section-1638272550277bab55’

15

It has worked, thank you so much for your help!

16

Hello,

Apologies, because I have now moved the order of the sections, it’s changed it again. How do I find the section number for future reference please?

This is the new preview link and all sections are in the final order now.

https://ifdxwtjxz8dpviaf-50857803925.shopifypreview.com

Thanks again for the help!

Lucy

17

Hi @lej123

To stop this error for future when you change the section order.

If you can find the Slideshow Section template under Sections, first see the below image

Sheesh_b_0-1638298237563.png
Sheesh_b_0-1638298237563.png1029×700 23.7 KB

Then, “spaced-section spaced-section–full-width” ← this class is already there (This above id from a different theme from yours but the same will you find at your theme.)

So, you just need to change the

“spaced-section spaced-section–full-width”

to

“spaced-section spaced-section–full-width slidshow-section-home”

and then change your previous code with below one

and it will solve your issue even if you change the order of the sections.

18

Hello,

Thank you, I have tried the first step, but can’t seen to find the ‘image.banner.liquid’?

see attached what I can see here. thank you

19

Hi @lej123

I just depicted how you can add a class to the slideshow section.

You have to find the slideshow.liquid or whatever it has the name and do the rest as described above.

Let us know if that helps you to fix the issue.

20

Hello,

I have gone into index-slideshow.liquid, but cannot find the text to swap out. could it say something else?

thank you