Are you looking for a way to hide sections on desktop Shopify without using complicated apps or hiring a developer? Many Shopify store owners struggle with sections that look fine on desktop but clutter up their mobile layout. When your store feels messy on smaller screens, customers may leave before completing their purchase. That’s why it’s essential to keep your mobile view as clean and conversion-focused as possible.

In this guide, we’ll show you exactly how to hide sections on desktop Shopify while keeping them visible on mobile. This method is quick, simple, and requires no prior coding experience.

Why Hide Sections on Desktop?

Sometimes, you may have a section — such as a large banner, promo block, or unnecessary announcement — that works great on mobile but looks redundant on desktop. Hiding it from desktop visitors can create a cleaner browsing experience and direct customers to key products faster.

Step-by-Step Instructions

1. Identify the Section:
   Open your Shopify theme editor and locate the section you want to hide. Check its CSS class or ID (for example, .multicolumn).
2. Add the Code Snippet:
   In your theme’s theme.css file (or base.css), add the following:

@media screen and (min-width: 750px) {
  .multicolumn {
    display: none;
  }
}

This code hides the selected section only on desktop while keeping it visible for mobile users.

3. Test Your Changes:
   Preview your store on both desktop and mobile to make sure the section is hidden on desktop but still appears on mobile.

Final Thoughts

When you hide sections on desktop Shopify, you create a smoother user experience that leads to better navigation and higher conversions. Small changes like this can have a big impact on your mobile sales.