Is there a way to check for device type or screen size in liquid?

Store Design

Topic summary

A developer wants to conditionally load different videos for mobile versus desktop devices using Liquid (server-side) rather than CSS or JavaScript (client-side). The goal is to avoid loading both videos and hiding one, instead having the server determine device type and serve the appropriate video.

Key findings:

  • Shopify’s Liquid does not natively support server-side device detection or screen size checking
  • The request object in Liquid lacks device/user agent information that would enable this functionality
  • This capability exists in Hydrogen (Shopify’s React framework) but not standard Liquid templates

Suggested alternatives:

  • Use JavaScript with window.innerWidth checks or the matchMedia() method for media queries
  • Implement CSS media queries to show/hide content
  • Consider external video hosting (e.g., YouTube) for adaptive delivery

Status: The discussion confirms there is no server-side solution available in standard Shopify Liquid. The developer must use client-side approaches (JavaScript/CSS) despite preferring server-side handling.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I have a video I am playing on my Shopify Store and it changes depending on mobile or desktop. Instead of loading both, and displaying one video or the other, I want to write some liquid code that says hey this is a mobile device, let me throw in this video or hey, this is a desktop device, let me throw in this video. Is this possible with liquid or must I JavaScript it?

Note: I am well aware that you can do this in CSS or in JavaScript but I want the server to handle this instead of the client.

2

@thejameshampton - you can upload videos to youtube and code it in the required way, that is the way for server to handle it.

If you upload video to your shopify then you can upload max 20mb video

3

You didn’t even read the question

1 Like
4

You can’t do this server-side to my knowledge. From Chat GPT:

“you might need to consider server-side device detection, which can identify the device type (desktop or mobile) based on the user agent string of the incoming request. However, Shopify doesn’t natively support server-side device detection.”

I was trying to get 2nd thumbnail photo to not load on mobile only when I got this response.

5

So there’s no answer to this simple question

Maybe there’s a better way but I do it with JavaScript

let isMobile = window.innerWidth <= 768;
6

If you’re doing media queries in Javascript you should really be making use of the matchMedia method. This allows you to manage media queries like CSS and also attach events to changes.

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

There isn’t a good way to do this in Liquid though, really they should have added this information to the request object but good luck with that. You can only handle things with media queries in either CSS or JS. It’s possible in Hydrogen but this is a whole different ball game…

7

Ohh thank you

8

Hi there!
I was checking the same and I encountered the following: https://community.shopify.com/post/2035590

Hope that helps!