What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: only show on desktop/mobile

Why isn't my code hiding sections on selected devices?

Jferguson1
Explorer
80 3 6

Hi - 

 I followed a tutorial on how to create an interface that allows you to select whether you want a certain section to show on desktop/mobile - but i feel like theres more code thats needed for the action to work as nothing gets hidden when i select an option.

 

Here is the code: 

 

 

{{ section.settings.show_on_device }}

 

 

{

“type”:  “select”,

“id”: “show_on_device”,

“options”: [

{

“value”: “mobile—device”,

“label”: “Mobile and tablet device”

},

{

“value”: “desktop—device”,

“label”: “Desktop device”

},

{

“value”: “show-all-devices”,

“label”: “Show on all devices”

}

],

“default”: “show-all-devices”,

“label”: “Show this section to this device only”,

“info”: “Choose which device you want this section to show”

},

 

This brings up the interface but no action computes.

 

Please help me out,

 

many thanks, Joe

 

Replies 10 (10)

Liquid_xPert_SJ
Shopify Partner
1285 139 184

@Jferguson1 

 

please follow the below code you need to assign the select value to a variable.

{% liquid
  assign s = section.settings

  if s.show_on_device == 'mobile—device'
    assign device = 'mobile—device'
  elsif s.show_on_device == 'desktop—device'
    assign device = 'desktop—device'
  else
    assign device = 'show-all-devices'
  endif

%}

{% device %}

 

thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Jferguson1
Explorer
80 3 6

Thanks for getting back to me,

 

As i have a custom liquid video, would it be easier to insert a line of code for it to display on either mobile/desktop?

 

Thanks

Liquid_xPert_SJ
Shopify Partner
1285 139 184

because the options are in the select drop down we have to check that value and that can be assign condition base. the out put will be only in the below option

 

{% device %}

 

thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Jferguson1
Explorer
80 3 6

How do i hide this custom liquid section from desktop?

 

<style>

video {

width: 100%;

height: auto;

display: block;

margin: 0 auto;

}

}

</style>

<video muted autoplay playsinline loop>

<source src="https://cdn.shopify.com/videos/c/o/v/16e233154a5c48fa9108b1ef792b3a7d.mov"

type="video/mp4">

</video>

Liquid_xPert_SJ
Shopify Partner
1285 139 184

@Jferguson1 

 

i guess you dont have coding knowledge but you can update above code with your media query css like display: none for mobile, deskop or showing for both

 

{% liquid
assign s = section.settings

if s.show_on_device == 'mobile—device'
assign device = '' -----------------------> only mobile media query css
elsif s.show_on_device == 'desktop—device'
assign device = '' -----------------------> only desktop media query css
else
assign device = 'show-all-devices' -----------------------> both media query css
endif

%}

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Jferguson1
Explorer
80 3 6

Could you please tell me where exactly to insert the code you gave me,

 

many thanks

Jferguson1
Explorer
80 3 6

Screenshot 2024-03-15 at 15.14.39.png

 this is what the code returned

thanks

Liquid_xPert_SJ
Shopify Partner
1285 139 184

it is because you are adding the code on wrong place

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Jferguson1
Explorer
80 3 6

could you tell me where to put it

Jferguson1
Explorer
80 3 6

Once I have this information I can accept your solution. 

please advise me on where to insert the code. 

thanks