Assign Any Section to Show on Mobile or Desktop Only

Assign Any Section to Show on Mobile or Desktop Only

See Other Products

Compatability: All Shopify themes

I have multiple people who wants to assign a different image to their desktop user customers and mobile user customers. The step is very easy actually and just follow along.

Since some themes are written differently, you might need to hire a developer to do this for you. In some sections, this can be a little tricky since we need to add the class code to the section or the first container. 

To start:

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Open the section you want to edit. Then find the first "<" (angle bracket) that you see, and look for the class section. 
3. Add the code below. NOTE: Make sure to provide a space. 

{{ section.settings.show_on_device }}

 If you do not have a "class" in your first "<", you can add one by using the format below. Paste the bold letters below.

 <div class="{{ section.settings.show_on_device }}".....

4. Next, we will need to add a schema, so you do not have to the coding everytime. Go down to the {% schema %} section. Find the "settings", under the section. Add the code below after the "[", please make sure to watch the video for proper placement.

{
"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 to all devices"
}
],
"default": "show-all-devices",
"label": "Show this section to this device only",
"info": "Choose which device you want this section to show"
},

 

5. Next, we need to add the CSS file to hide and show on whatever choice of device you have. Go to Asset folder, and open the base.css or theme.css or theme.scss for others. Then add the code below.

@media only screen and (max-width: 749px) {
.mobile--device {
display: block !important;
}

.desktop--device {
display: none !important;
}
}

@media only screen and (min-width: 750px) {
.mobile--device {
display: none !important;
}

.desktop--device {
display: block !important;
}
}

 

Copied!
Voltar para o blogue

15 comentários

I found the pagination buttons move to the top of the slider instead of below it. I asked the CS here and they just asked me to hire their expert to fix it. Any one here know how to fix this?

TAYLOR, I’m sorry that I don’t get what you said. Where should I put the code “{{ section.settings.show_on_device }}”?

Mendy

This is the code since it got cut off:

Taylor

Hey, sorry! I just found out how to fix it myself. For anyone who’s slideshow arrows are now appearing ABOVE the slideshow the fix is:

I fixed this!

DON’T put “{{ section.settings.show_on_device }}” within this code:
“”slider-mobile-gutter{% if section.settings.layout == ‘grid’ } page-width{ endif }{ if section.settings.show_text_below } mobile-text-below{ endif %}" role=“region” aria-roledescription=“{{ ‘sections.slideshow.carousel’ | t }}” aria-label=“{{ section.settings.accessibility_info | escape }}”>

Instead, put the following code above it:

Taylor

I am also having the issue that others are having where the arrows are now above the slideshow instead of below. I redid the code to make sure there were no errors and still no luck. I noticed that the arrows go below the image only when I uncheck “auto rotate slides.” I am not sure how to fix this!

Taylor

Please make sure to do some trial and error and follow the steps closely

Made4Uo

Deixe um comentário