How to Detect Mobile Devices Accessing a Shopify Store

Image for post
Image for post
Photo by Irina Grotkjaer on Unsplash

Serving different content to different devices is standard practice on the internet. Every platform does it a bit differently and in this article I will show you how to detect mobile devices accessing a Shopify store.

Shopify is a great platform for many ecommerce stores. Developing themes is simple with the Liquid template language, however it does have some drawbacks. Liquid templates are pre-rendered on the server and not able to respond dynamically to the device accessing the store. This means whether the customer is visiting from a desktop, tablet, or phone they will receive the exact same html content. There is no way to send custom content based upon the device the customer is connecting with.

I hear you thinking, “But wait, isn’t this article about mobile devices and Shopify?” Yes it is. In order to detect and serve different content to mobile devices another tool will be used, javascript.

Javascript runs on the browser, meaning it takes after the Shopify store has delivered the content to the customer. With a little care, it is possible to dynamically load content based on the customer’s device.

Here is the Javascript you can use. It has several browsers to detect in it. Customize the list as needed.

It should be noted, Apple updated the iPad OS to request desktop versions of pages. This means that this method may not work 100% of the time for detecting an iPad.

Director of Engineering at Mindsize. 20+ year technology veteran. Providing leadership insights, mentorship, and coaching to new and existing leaders.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store