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

Highlighted
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
Highlighted
Shopify Expert
10007 116 1818

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
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Astronaut
1890 1 442

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
Highlighted
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
Highlighted
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
Highlighted
New Member
3 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
Highlighted
Excursionist
20 0 2

I don't know scripts but I tried in these two ways to adjust your script for my need, so that it simply assigns or captures MobileScreen to become "YesMobileScreen" only when window width is smaller than 767.

 

But for some reason it assigns or captures this no matter if I am looking on my laptop (1024 wide) or cellphone, can anyone understand why?

 

How would this script need to be written in order to assign MobileScreen to be YesMobileScreen when screen is smaller than 767 and NoMobileScreen in all other cases?

 

 

 

<script>
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth < 767 ){
{% assign MobileScreen = "YesMobileScreen" %}
}
});
</script>

 

<script>
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth < 767 ){
{% capture MobileScreen %}YesMobileScreen{% endcapture %}
}
});
</script>

 

I don't know css (other than simple css font settings, padding and fundamental things that were similar 20 years ago) but I understand that there is something called media query made for this, but it seems really time consuming to master and I don't have those days/weeks available right now. 

 

But so alternatively, does anyone know a page/youtube video that in 15-60 minutes teaches me how to collect one simple value from a css when the screen is smaller than 767 and another value when the screen is bigger? I wouldn't even know what search term to use.

 

In this case i just want my product titles to be truncated with one value on mobile and another value on laptops (and if it could do another value for ipad sizes it would be perfect) but over and over again I run into things where i wish i could make different value for mobile and non mobile.

 

if i can just get the value assigned the truncate part is easy. 

 

When I try to understand the code in Timber and theme.scss by just reading it and trying things i don't get it to work.  

0 Likes
Highlighted
New Member
1 0 0

When am using this function am getting error on '{%'

bilal186_0-1596699176824.png

 

0 Likes
Highlighted
New Member
1 0 1
<script>
      
    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i);
    if(isMobile){      
      {% capture layoutData %}{% include 'drawer-menu' %}{% endcapture %}
      var content = '{{layoutData | strip_newlines | newline_to_br| replace:"'",""}}';
      $("#divid").html(content);
    //Script for Mobile
    }else{      
      //console.log("is Desktop");
    //Script for Desktop
    }
    </script>