Skip to main content

Hide group on mobile / desktop

Overview​

Shopify's Horizon theme system includes a Group block that is extremely useful when laying out content. This block allows you to group together individual blocks and set spacing, colors, and layout.

The Hide group on mobile and Hide group on desktop blocks can be added to any group block in Horizon to hide that group on the relevant device.

Using these Blocks​

To create a mobile-specific group, first add the Group block to your section, then add the Hide group on mobile to that block.

Breakpoints​

These blocks use the standard breakpoints in the Horizon theme system, which are:

  • Mobile devices: < 750px
  • Desktop devices: >= 750px

Why this Block is useful​

Designing for mobile and desktop often introduces cases where one layout just doesn't translate well across viewports. For instance, a desktop layout might feature image left, text right—but that same structure on mobile might feel awkward or unreadable. Ideally, you'd want the image above, text below on mobile.

You could go ahead and create a block setting like "Stack on mobile", but what if you decide a particular section would look better with the text first, then the image. Adding another setting for "Reverse stack direction on mobile" sets you on a slippery slope of creating a theme building experience that is overwhelming.

Instead, the cleaner, more scalable solution is to define two separate group blocks: one optimized for desktop, one for mobile, each with the exact structure and content that you need.

Why not just add a show/hide block setting?​

While Shopify's Horizon system doesn't currently offer a native way to conditionally show or hide group blocks by device, even if it did, embedding that behavior as a setting would still be a step backward in terms of clarity and usability.

Settings like "Hide on mobile" buried deep inside a block configuration panel obscure critical layout behavior. When you're scanning the theme editor's sidebar, you shouldn't have to click into every block just to answer the question: is this visible on mobile?

By making visibility its own block, Expansion Blocks surfaces that logic directly in the block tree. If you see a group with the "Hide group on mobile" Expansion Block, it's immediately clear that the content in that group is hidden on mobile. This is especially useful in large or nested layouts where fast audits matter.