How to hide a section only on mobile

Store Design
, , , , , , , , , , , , , ,

Topic summary

Goal: Show a small slideshow on mobile and a medium slideshow on desktop by hiding one or the other based on device.

Proposed approach: Two replies advise adding custom code in the theme’s head to control visibility per device.

  • Path: Shopify Admin → Online Store → Theme → Edit code.
  • File: theme.liquid.
  • Action: Paste custom code just before , then save.

Notes:

  • The actual code snippet is not included in the posts, so the exact implementation (e.g., selectors or logic) is missing in this thread excerpt.
  • An image is attached but not essential to the solution.

Status: No confirmation from the original poster and no working code shown. The discussion remains open pending a concrete snippet or verification that the method works.

Summarized with AI on December 19. AI used: gpt-5.
1

On my mobile I want the slideshow to be Small, and on desktop to be medium. My plan is to have two slideshow sections and hide the small one on the desktop, and hide the medium one on the mobile.

Image 21-09-2024 at 16.53.jpeg
Image 21-09-2024 at 16.53.jpeg2880×1800 531 KB

So how can I make a slide hidden on specifically mobile / desktop view

2 Likes
2

Hi @lukafernada ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3
  • Here is the solution for you @lukafernada
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.