Solved

Can you add specific code for desktop and hide sorting on mobile in Shopify?

newArtMix
Tourist
5 0 1

Hi,

I need to add some code, but only for the desktop version. How I could check it correctly?
{% if max_width == 749px %} - doesn't work

I also need to hide SORTING on a mobile version

How can I set a condition like this
{% if "not mobile version" %}
{% include "collection-sorting"  %}
{% endif %}

Thanks in advance

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@newArtMix 

You're welcome. Yes, that is pretty much it. 

If the issue is resolved kindly make sure to click on  "Accept as Solution" for the answer that helped you, this way other people in the community can benefit from it in the future when dealing with something similar.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 3 (3)

diego_ezfy
Shopify Partner
2935 562 883

You can't differ desktop/mobile on liquid, only on CSS or Javascript.

The easiest way to achieve this would be encapsulating the "collection-sorting" with a div (or giving it a class directly).

<div class="desktop-only">{% include "collection-sorting"  %}</div>


and for the CSS:

.desktop-only{
display: none;
}

@media (min-width: 749px){
.desktop-only{
display: block;
}
}

 
Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

newArtMix
Tourist
5 0 1

Thank you so much. It works perfectly!

If I understand correctly – when I want to do something only for the mobile version:

.mobile-only{
display: none;
}

@media (max-width: 749px){
.mobile-only{
display: block;
}
}

Best wishes,

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@newArtMix 

You're welcome. Yes, that is pretty much it. 

If the issue is resolved kindly make sure to click on  "Accept as Solution" for the answer that helped you, this way other people in the community can benefit from it in the future when dealing with something similar.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.