Visibility settings

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on visibility settings
3. Shopify documentation on customizing sections
4. Shopify documentation on theme editor features overview

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to decide whether a section appears on desktop, mobile, or both. They are especially useful when you want a simpler mobile layout, a desktop-specific presentation, or separate versions of the same content for different screen sizes. For context on how sections work in the theme editor, see Shopify documentation on sections and blocks

Visibility

The visibility control lets you keep a section visible everywhere or hide it on desktop or mobile. This gives you a practical way to tailor page layouts by device without deleting the content from your theme setup.

A common use is creating alternate desktop and mobile versions of the same content. For example, you might use a more detailed layout on larger screens and a shorter, easier-to-scan version on smaller screens. You can find more detail in the source reference for this setting concept: Company XYZ documentation on visibility settings.

Hiding a section on one device does not create a second version automatically. If you want different content for desktop and mobile, add separate versions and set each one to appear only where needed.

This setting is most helpful when you want to:

1. Reduce visual crowding on smaller screens.
2. Show a mobile-only promotional or informational layout.
3. Keep a more complex arrangement for desktop visitors.
4. Test different content presentations by device type.

Usage notes

1. Pair alternate versions carefully. If you create separate desktop and mobile versions, keep the message and purpose aligned so the experience stays consistent. If you need help working with section-based layouts, review Shopify documentation on customizing sections
2. Protect important content. When hiding a section on one device, make sure the key message or action still appears elsewhere for those visitors.
3. Simplify for smaller screens. Use mobile-specific visibility when a shorter or cleaner layout will help customers scan and act more easily.
4. Check both device views. Desktop and mobile controls can affect layout, alignment, visibility, and media behavior in different ways, so preview both views after making changes. The Shopify documentation on theme editor features overview can help orient you to preview and editing options.
5. Keep fallback styling in mind. Leaving a setting blank or at its default usually preserves the theme’s fallback styling, while choosing an explicit color, gradient, or media override makes that area behave more independently.
6. Review media choices on both devices. If you set separate desktop and mobile media, check cropping, loading, fallback, and readability so the section still feels clear on each screen size.