The total value of online orders placed by consumers on mobile devices is expected to reach $2.5 trillion in 2025 — that’s more than half of all retail ecommerce sales.
Indeed, every Shopify store should be designed with mobile devices in mind. After all, most of the people who visit your site will likely be doing so on a smartphone or tablet.
The main challenge of mobile design is that you don’t have much space to work with. A page that works well on desktops and laptops might look too crowded and be difficult to navigate on mobile devices.
One trick is to hide some Shopify sections on the mobile version of your site. That way, you can still achieve whatever your goals are for this content on standard browsers while also making your mobile site more sleek and user-friendly.
While Shopify’s built-in theme editor does allow you to see what your site looks like on different types of devices while you make edits, it doesn’t allow you to create custom designs for each type of device — hiding a Shopify section while you’re looking at the mobile view will also hide the section on the desktop version of your site.
But don’t worry, there’s a workaround for this. To hide a section on just the mobile view, all you need to do is make a quick edit to your store’s theme files (and it’s worth mentioning that, if you have the programming skills for it, you could also edit your theme files to create entirely new sections for your store using HTML or Liquid).
For this example, we’ll be removing a banner that promotes an upcoming Black Friday sale from the mobile version of our product pages. While there’s plenty of room for this content on the relatively large screens of desktops, the design starts to feel pretty cramped on a smartphone.
First, you must figure out what the section ID is for the content you want to hide:
Now it’s time to dig into the code of your Shopify theme:
At the bottom of this file, add the following code:
@media (max-width: 767px){
#section_id_name{display: none;}
}
Swap out the “section_id_name” placeholder text here with the section ID that you identified earlier. Then, save your changes to the code.
Essentially, this new code tells your theme to only display the section when the visitor’s screen is wider than 767 pixels. That size covers laptops and desktops but leaves out smartphones (if you want the section to also be hidden on tablets, you should set this limit closer to 1,000 pixels).
Once you add this code, the section will be hidden on mobile devices (but not on standard browsers) in both Shopify’s built-in theme editor and the live version of your site.
Shogun actually offers two different apps that you can use to accomplish this task: the Page Builder and the AI Section Builder. And with both of these solutions, you’ll be able to create sections that are hidden on mobile devices without writing any code at all.
Shogun Page Builder allows you to create unique ecommerce experiences for the following four screen sizes:
Using these measurements, most desktops have large screens, most laptops have medium screens, most tablets have small screens, and most smartphones have extra-small screens.
Whenever you add an element to one of your pages in Shogun Page Builder, you’ll be able to determine which types of screens it is visible on. That means the same page can look and function quite differently depending on what type of device the visitor is using.
To demonstrate exactly how this all works, we’ll walk you through how to hide a section on mobile devices with Shogun Page Builder.
You’ll need a page to work with in the first place. To create a page from scratch in Shogun, follow these steps:
And if you’d prefer to edit a page that already exists on your Shopify store:
Whether you create a page from scratch or import an existing page, you’ll then be directed to Shogun’s visual editor:
It’s really that easy — to summarize, Shogun Page Builder allows you to hide sections on mobile devices by simply flipping a switch. This capability is built right into the app.
Some of the options in the element library are particularly well-suited for mobile page design, including:
The AI Section Builder makes this whole process even easier — it allows you to create whatever kind of content you want for your store by just asking for it.
To make a new section that’s hidden on mobile devices with the AI Section Builder, you only need to follow these three steps:
After opening the app, write a description of the section you want to build in the text field (be sure to mention that you’d like the section to be hidden on mobile devices). Then, click on the “Submit” button.
If the initial output isn’t quite what you were going for, that’s no problem — you can submit follow-up prompts to adjust the output until it turns out exactly the way you want.
You’ll also be able to preview what the section looks like on both desktop and mobile devices before you move forward.
In this case, since the section is hidden on mobile devices, the mobile preview should be blank.
But you’ll be able to see a full display of your section in the desktop preview.
Once you’re done designing your section, click on the “Add to theme…” button.
This will make the section available in Shopify’s built-in theme editor, where you can then add it to any of your pages.
As you can see, Shogun’s AI Section Builder is able to do just about everything for you, even when there’s a complex request involved like hiding a section on mobile devices. With this app, you’ll be able to effortlessly whip up new improvements for your Shopify store whenever you want.
