liquify.

How to hide a section on mobile in Shopify

Something that looks great on desktop, like a big slideshow, can push everything else down on a phone. Often the best fix is to show it on one size only.

Some themes have a per-section visibility setting; in others it takes one CSS rule.

1. Look for a visibility setting

  1. Go to Online Store > Themes > Customize and click the section you want to hide.
  2. Look for a setting like Show on mobile, Hide on mobile, or Visibility. Many paid themes have one.
  3. Dawn doesn't have this setting for most sections, so use the next step.

2. Hide it with CSS

  1. Every section has a unique wrapper id that starts with shopify-section-. Find it by right-clicking the section on your live store, choosing Inspect, and looking at the outer element.
  2. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  3. Add a CSS rule to your main stylesheet that hides that id below your theme's mobile breakpoint.
  4. Check both sizes, and make sure nothing important (like your only Shop button) disappears on mobile.
Example: hide one section on screens under 750px
@media screen and (max-width: 749px) {
  #shopify-section-YOUR_SECTION_ID { display: none; }
}

Section ids can change if you remove and re-add the section, so keep a note of what each rule hides.

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Hide the homepage slideshow or image banner on mobile only”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Does hiding a section on mobile make the page faster?

Only a little: CSS hides it, but images in the section may still download. For heavy sections, a version built for mobile is better than hiding.

Can I show a different section on mobile instead?

Yes. Add a mobile version of the section and hide each one on the opposite screen size.

More guides