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

Store Design
, , , ,
1

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

2

@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

3

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

4

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

5

How do i hide this custom liquid section from desktop?

video { width: 100%; height: auto; display: block; margin: 0 auto; } }
6

@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

%}

7

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

many thanks

8

Screenshot 2024-03-15 at 15.14.39.png
Screenshot 2024-03-15 at 15.14.39.png2880×1800 628 KB

this is what the code returned

thanks

9

it is because you are adding the code on wrong place

10

could you tell me where to put it

11

Once I have this information I can accept your solution.

please advise me on where to insert the code.

thanks