Are you wondering how to hide a section on mobile in Shopify? Many store owners want their websites to look perfect on both desktop and mobile. However, some sections that work well on desktop may look cluttered or unnecessary on smaller screens. In this guide, we will show you the easiest way to hide sections on mobile in Shopify without using any extra apps.

Why Hide a Section on Mobile?

Mobile shopping is growing rapidly. Most customers now browse and purchase directly from their smartphones. If your Shopify store looks too crowded on mobile, visitors may leave without buying. Hiding certain sections ensures your store looks clean, fast, and user-friendly. For example, you might want to hide a large banner, video, or promotional block that slows down page loading.

Step 1: Open the Shopify Theme Editor

Log in to your Shopify admin. Go to Online Store > Themes, then click Customize. This opens the theme editor where you can manage the layout of your store.

Step 2: Add Custom CSS Code

If your theme does not offer a built-in option to hide sections, you can add a simple CSS snippet. Go to Online Store > Themes > Actions > Edit Code. Under Assets, open the file named theme.css or base.css (depending on your theme).

Paste the following code:

@media only screen and (max-width: 768px) {
   .hide-on-mobile {
      display: none !important;
   }
}

Step 3: Apply the Class to Your Section

Go back to the theme editor. Select the section you want to hide on mobile and add the class hide-on-mobile in the section’s custom CSS or custom class field. Save your changes.

Step 4: Preview on Mobile and Desktop

Check your store on both desktop and mobile devices. The section will remain visible on desktop but hidden on mobile screens. This ensures a faster and cleaner mobile shopping experience.

Benefits of Hiding Sections on Mobile

• Better User Experience: Mobile visitors can focus on the most important content.
• Faster Loading Speed: Removing heavy sections on mobile reduces load time.
• Higher Conversions: Shoppers are less distracted and more likely to make a purchase.
• Professional Design: Your store looks clean and optimized for every device.

Final Thoughts

Now you know how to hide a section on mobile in Shopify using simple CSS. By making your mobile site clean and easy to use, you can increase customer satisfaction and boost sales. This small customization has a big impact on the success of your online store.