Visibility settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

The Visibility settings group allows you to manage when and where storefront elements appear across desktop and mobile devices. Using these settings, you can create a responsive and adaptable experience, ensuring customers see the most relevant content for their device. By fine-tuning Visibility settings, you keep your storefront organized and engaging, with optimized content delivery for every user.

⚠️ Important:Visibility settings enable you to globally control which elements are shown or hidden for different devices, supporting responsive design, faster performance, and better accessibility across your storefront.

Visibility settings

The Visibility settings group offers flexible, device-specific display options for any theme element. This helps you provide device-tailored experiences, including changing layouts, assets, or messaging for desktop and mobile users.

When working with visibility options, you can select from the following:

1. Do not hide
   The element remains visible on both desktop and mobile devices. 1. This is the default setting.

2. Hide on desktop
   The element is hidden from desktop users and only appears for visitors on mobile devices. 1. This can help you display mobile-only banners or features best suited for mobile screens.

3. Hide on mobile
   The element is hidden from mobile visitors and only shown on desktop. 1. Useful when some content performs better, or has greater relevance, on larger screens.

📝 Note: Device-specific settings like Visibility settings allow you to present different images, layouts, or padding for desktop and mobile users. This can make your storefront feel more intentional and well-crafted across all device types.

Usage notes

1. Hiding elements on certain devices with Visibility settings makes site management easier and keeps your pages uncluttered.

2. Always ensure important information and navigation remain accessible on every device to maintain usability and compliance.

3. Adjusting visibility can help improve loading times by preventing unnecessary assets or features from displaying on devices that do not need them.

4. You might consider preparing alternative layouts, assets, or arrangements for content depending on the device context, allowing you to get the best results for both desktop and mobile visitors.

💡 Tip: Leverage Visibility settings for an adaptive experience that works seamlessly across screen sizes. Remember, these global settings can often be overridden by more specific section or block controls if you need fine-grained adjustments.