Here's how to hide sections on mobile or desktop in the Flex theme in a Shopify store.
Theme edits needed:
- Create your custom CSS file if you do not have one and make sure it is referenced in Theme.liquid
- Add the code below to the CSS file
Code for CSS File
Transcript
Hey, Scott Austin here.
In this video, I'm gonna show you how in the flex theme, you can take a, any given section that you're showing on the homepage, a product or a page, wherever, wherever you're using a section. And you can say this section, I only want to show it on desktop, or I only want to show it on mobile. And let me show you an example of how that works. So here I am on the homepage of fit my foot and I've got these press logos and there's 10 of them on desktop. And you'll notice when I switch to the mobile view, there's only four of them. So I use this hiding and showing between desktop and mobile to make that happen, to show 10 on desktop and four on mobile. So let's go on the back end and look at theme customization.
And what you'll see is over here on the homepage, I've got two logo list. This is the one with 10, and this is the one with four logos in them. Now, if we click on the one with 10 over on the right where we have the details for the section, if I scroll down, you'll see this CSS class and I typed in show desktop, right on the mobile version I typed in show mobile. So by adding that CSS class right there, that's, what's hiding on, on mobile, the desktop one. So the desktop one is shown on mobile, hidden on desktop and the logo list for the mobile, where it says show mobile that is shown on mobile and hidden on desktop. Now the flex theme has CSS classes that automatically do this, but I always forget the naming of them, cuz they're not as intuitive to me as show mobile and show desktop.
So I always just make my own and it's really easy to do. It's just a few lines of code. So here in my, I always make a custom CSS file, right? So you can see here, I have a Jade Puma dot CSS dot liquid file. So I don't edit styles dot CSS dot liquid, you know, which is the themes CSS file. I only edit or I add additions to CSS in my custom file. So here is, you know, the few lines of code it takes to do these show mobile and show desktop functionality where on the normal displays, this is, you know, on desktop. We are hiding the mobile. So display is none and we're showing the desktop display is blocked. And then when the screen is less than 798 pixels, then we're showing the mobile and we're hiding the desktop display is none for desktop.
Now the flex theme has three major break points or two major break points for three major screen sizes. So they have the mobile and the break point for mobile is 400 8480 pixels. And then they from between 480 pixels and 798 pixels, that's the tablet screen size. And then desktop is anything at 7 99 or over. So here, you know, I could have had a show mobile show, desktop and show tablet, but that just means you have to think more and, and add the right elements in, you know, you would, you would add show mobile CSS class and show tablet. And it's just too confusing to remember. So I, I keep it simple. There's just mobile and desktop. And in this case I've designated that mobile also applies to tablet. If I wanted mobile to only apply to mobile and assign tablet to desktop, then I just change this max with here.
So now I want to use this sort of functionality, the men with a 4 81. So it changes max with 7 98 pixels to men with 481 pixels. And that means any screen size, 401 pixels or greater, which is both the tablet and the desktop would then be in, in that bucket. So you can set this up any way you want and you can, you know, change, change the numbers or the screen sizes, the pixel width to suit your particular need. And that's why I like, you know, creating my own code for this. Once again, instead of using the code inside of the CSS file, it's built into the flex theme. And if we go over to that CSS file, you'll see here, they've got is hidden. Where is it is is hidden. Desktop only is hidden mobile. Only. I like the show cuz it's more of a positive where hidden is the negative and it makes me have to think an extra step.
And the only always confuses me cuz they're actually doing it for desktop, their mobile and tablets. That's why, you know, you can use these CSS classes. If you want is mob is hidden mobile only and is hidden desktop only and they work fine. But I always get confused by those. So that's why I make my own. And let's just show you one more thing here. If you're gonna create your own CSS file, which I highly recommend you do. If you're you're editing your own theme, right? Let's go into our theme dot liquid and just show you really quickly here.
What you wanna do is whatever the theme dot liquid is doing to styles dot CSS and it loads styles dot CSS, two different places, right? Here's a preload. And then here's the actual loading it as a style sheet. So wherever you see the styles dot CSS after it, not before it, after it so that your CSS file will override the themes CSS settings. You want to add whatever the line above it for style of CSS was copy and paste it and then just place your CSS file name there instead. And you can see here, I did that in two different places. So that'll get your, that'll get the styles dot CSS to load up first, which has, you know, most of the CSS for the theme and you know, the, the fewer, you know, your, your file's gonna be much smaller. So it'll just override any particular settings that are set in styles dot CSS when, when you load it up afterwards, cuz that's the way the, the cascading logic works in CSS files.
So then in theme customization, right, you can just change, you know, you can add that CSS class show mobile or show a desktop as you want. And then a lot of times I will, you know, in this situation I wanted to show 10 and four. And if I go here to the, the mobile, you'll see the, the four show up. So I ended up using this a lot. Cuz there's a lot of sections in the flex theme that aren't as responsive as you want them to be. Or as that I, as I want them to be like this one here is actually pretty of responsive, right? The image with text overlay, cuz we can put in a mobile image and a desktop image. So that's pretty good. But sometimes I want different texts on mobile and desktop and I can't do that within this section. So I'll create two instances of this section with the text for mobile and the te the text for desktop different and then use this show, desktop show, mobile CSS class to have it show up on the, the appropriate screen. So hopefully that all makes sense for you. Let me know if you got any questions.
Thanks for watching.