If on mobile device, do 1 - if on laptop, do 2 - what kind of liquid would I need?

New Member
2 0 0

Hi lovely webshopowners.

I'm currently doing some coding within my Shopify-store, and I have a little problem here.

I'm a nerd - I'm gonna try to explain it through how I'd think it'd be

{{ if [USER_IS_ON_MOBILE_DEVICE?] }}

     You're on a mobile device!

{{ else }}

   You're on a mobile device!

{{ endif }}

So bassicly, I need some of my stuff to not show on my website whenever the visitor is on a mobile device - or a screen so small, that it bassicly shows the mobile version of my website. You guys know how this is possible? Thanks a bunch.

0 Likes
Shopify Expert
9807 92 1560

You can't detect devices using Liquid.
You'll need to use a front end method (css media queries or javascript).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
2 0 0

Thank you! How do you think I could get started with that?

0 Likes
Astronaut
1890 1 393

Is your theme using the Timber framework?  (If your theme is Brooklyn, then the answer is yes.)  If so, take a look at the documentation on the grid system.  This will get you started.  Basically, you will be adding classes to elements to tell them how to behave when viewing in mobile, in tablet and in desktop views.

0 Likes
Shopify Partner
3 0 0

Hi guys, is that the only way to do?

With media queries?

It's possible for example to change my current theme if it's mobile or don't print some sections.

Peruvian dev. Find me as diegovlg
0 Likes
Tourist
10 1 1

You can not detect mobile device in liquid. You can load different layouts  on mobile or desktop device using this script.
<script>
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth < 767 ){
{% capture layoutData %}{% include 'call-snippets-file' %}{% endcapture %}
var content = {{ layoutData | json }};
$(".collection-list-section").html(content);    /*  use class name where you want to show the layout data */
}
});
</script>

0 Likes
New Member
1 0 0

Just to add on to this answer, one thing you could do is use Kuldeep's function, and when the width is mobile, select the element that you don't want (say you are building two different headers),

 

if mobile -> select desktop header, and add style: display: none; // this will make it so that the header basically doesn't exist

-> select mobile header and add style: display: block; or whatever you need. This should let you swap between two different elements

0 Likes