how to get custom liquid to show only on mobile?

Shopify Discussion

Topic summary

Goal: Show a custom Liquid image banner only on mobile in the Sense theme, keeping the desktop slider unchanged.

Proposed solution: Add CSS in theme.liquid before to control visibility via media queries. Steps provided:

  • Online Store > Themes > More actions > Edit code.
  • Open theme.liquid (reply mentions “me.liquid”) and paste the code above .
  • Target the banner’s class (example given: .banner-image) so it displays on mobile and is hidden on desktop.

Key issue: The actual code snippets are missing in the reply, so the exact CSS/media query needed is not shown. This is central to implementing the fix.

Status: Unresolved in-thread. Action suggested but cannot be executed as-is without the CSS code; no confirmation from the original poster.

Summarized with AI on January 12. AI used: gpt-5.
1

I have added a custom liquid to insert an image as my website banner but i only want it to show on mobile as the desktop version looks great with the current slide used. I’m currently using sense theme.

2

Hi @tullyhai

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

For example, your image banner have this class : banner-image, then the code should be

Hope this can help you solve the issue

Best regards,

Richard | PageFly