Select the section in the Shopify theme editor, open its Section configuration settings, and turn on Hide section on desktop or Hide section on mobile. Preview the storefront at both widths, then save.
Show or hide a section by device
Updated 3 months ago
Hide a supported section on desktop, mobile, or both from the section's settings in the Shopify theme editor.
Supported sections
The Hide section on desktop and Hide section on mobile options are available in the Section configuration settings of the Blog posts, Collection banner, and Rotating circle text sections. Wavy scrolling text is a block, so it uses the equivalent Hide block on desktop and Hide block on mobile options in its block settings.
Hide a section on desktop or mobile
Open the POPS theme in the Shopify theme editor, then select the section you want to hide on one device.
Select the section.
Open the section's Section configuration settings.
Turn on Hide section on desktop to hide the section at desktop widths, or Hide section on mobile to hide it at mobile widths.
Preview the storefront at desktop and mobile widths to confirm the layout.
Save the changes.
Use the options independently
The two options work independently and both default to off, so a section shows on both devices until you change a setting.
Hide section on desktop only: the section shows on mobile and hides at desktop widths.
Hide section on mobile only: the section shows on desktop and hides at mobile widths.
Both off: the section shows on both devices.
Both on: the section hides on both devices.
Desktop hiding applies at viewport widths of 60em and above; mobile hiding applies at 60em and below.
Examples
Use the options when a section should appear only on the screen size where it works best.
Collection banner: add two collection banner sections and hide one on desktop and the other on mobile to show a compact banner on mobile and a larger version on desktop.
Blog posts: turn on Hide section on mobile to keep the blog list out of mobile layouts.
Rotating circle text: turn on Hide section on mobile to remove the rotating text from small screens.
Wavy scrolling text: turn on Hide block on mobile to hide the wavy scrolling text block on mobile.
For the full list of section settings, see Section. To learn how the theme editor builds pages from sections and blocks, see Get started with the Pops theme.
FAQ
How do I hide a section on desktop or mobile in the Pops theme?
Which sections support hiding by device in the Pops theme?
The Hide section on desktop and Hide section on mobile options are available in the Section configuration settings of the Blog posts, Collection banner, and Rotating circle text sections.
How do I hide a block on desktop or mobile in the Pops theme?
Wavy scrolling text is a block, so it uses the equivalent Hide block on desktop and Hide block on mobile options in its block settings.
What happens if I turn on both hide options for a section?
The two options work independently and both default to off. Turning on only Hide section on desktop shows the section on mobile; turning on only Hide section on mobile shows it on desktop. With both on, the section hides on both devices.
At what viewport widths does desktop and mobile hiding apply?
Desktop hiding applies at viewport widths of 60em and above, and mobile hiding applies at 60em and below.
How do I show different versions of a section on desktop and mobile?
Add two of the same section, such as a Collection banner, and hide one on desktop and the other on mobile to show a compact version on mobile and a larger version on desktop.
Was this helpful?
Was this helpful?