How to Hide Sections on Mobile Devices in Shopify

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 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. 

Below, we’ll go over two methods that you can use to hide a section on the mobile version of your Shopify store:

• How to Hide Sections on Mobile by Editing Theme Files
• Using Shogun to Create Pages with Different Mobile Views

How to Hide Sections on Mobile by Editing Theme Files

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 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 the CSS code for your store. 

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:

• Go to the live version of the page and open up your browser’s element inspector. The keyboard shortcut for this will depend on which browser you’re using — for example, it’s  Control + Shift + C on Google Chrome and Command + Shift + C on Safari.
• Select the element you want to hide on mobile — this will show you where the code is located in the inspector panel. 
• Scroll up in the code until you find the closest <section id> tag. You’ll need to copy this section ID a bit later on in the process in order to hide this section.  

Now it’s time to dig into the code of your Shopify theme:

• Open a new tab and go to your Shopify account.
• Select the sales channel you want to customize (e.g., “Online Store”) in the left sidebar of the main Shopify control panel. 
• Open the “…” dropdown menu next to your theme and select “Edit code” — this will take you to Shopify’s code editor. 
• In the left sidebar of the code editor, go to the “Assets” folder and open “base.css” (you could also use the search bar to find this file). 

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.

Using Shogun to Create Pages with Different Mobile Views

Shogun allows you to create unique ecommerce experiences for the following four screen sizes:

• Large screens: 1,200 pixels and wider
• Medium screens: 1,999 to 992 pixels
• Small screens: 991 to 768 pixels
• Extra-small screens: 767 pixels and smaller

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, 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’s visual editor.

You’ll need a page to work with in the first place. To create a page from scratch in Shogun, follow these steps:

• After installing Shogun Page Builder, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun.
• Hover your cursor over “Build or edit a page”. Then, select “Start from scratch”.
• Determine whether you want this new page to be a standard page or blog post, give it a name and URL path, and choose whether or not you want to include your Shopify theme’s header and footer. 
• Once you’re done with this setup, select “Create new page”. 

And if you’d prefer to edit a page that already exists on your Shopify store:

• Open Shogun, hover your cursor over “Build or edit a page”, and select “Import a page”.
• You’ll find tabs for the “Standard”, “Product”, “Collection”, and “Blog” pages on your Shopify store that haven’t yet been imported into Shogun. Open the tab for the type of page that you want to bring over. 
• Click on the “Import page” button next to the page you want to import. 
• Choose whichever page layout option you prefer, then select “Import this page”. 

Whether you create a page from scratch or import an existing page, you’ll then be directed to Shogun’s visual editor:

• Click on the “Elements” icon in the left sidebar of the visual editor (it’s the one that looks like a plus sign inside of a circle) to open the element library. 
• In the element library, you’ll find dozens of different features that you can add to the page with just a couple clicks. For example, if you want to add a text banner at the top of the page to help promote an upcoming sale, simply click and hold on the “Text” option in the element library and then drag it into place. 
• Once the element is on the page, click on it to open up the element’s customization settings in the right sidebar of the visual editor. Here, you’ll find many different ways to adjust the appearance and functionality of the element. 
• Scroll down to the “Visibility” section of the element settings. To hide the section on mobile devices, toggle the visibility off for “Small screens” and “Extra-small screens”.

It’s really that easy — to summarize, Shogun allows you to hide sections on mobile devices by simply flipping a switch. This capability is built right into the app. 

Also, it’s worth noting that some of the options in the element library are particularly well-suited for mobile page design, including:

• Accordion: Perfect for FAQ pages, the accordion element allows you to insert content into a series of collapsible rows. This gives you the ability to include a lot of written content without taking up too much space.
• Slider: Sliders can be used to reduce how much visitors must scroll down to see all the content on a mobile page. For example, you could display multiple customer testimonials in a slideshow rather than stack each of them vertically.
• Video: Again, you need to make the most of your space on mobile. With a video, you can use a single window to provide detailed content, such as a product demonstration, that would require much more real estate if it were depicted with text and images.

Overall, Shogun gives you all the resources you need to create the perfect online store for every type of device.