Shopify themes, liquid, logos, and UX
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
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
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
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
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>
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
%}
Could you please tell me where exactly to insert the code you gave me,
many thanks
this is what the code returned
thanks
it is because you are adding the code on wrong place
could you tell me where to put it
Once I have this information I can accept your solution.
please advise me on where to insert the code.
thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024