Visibility settings

Overview #

The Visibility settings are part of the core theme settings that control the app-wide visibility of various elements across the shop. These settings are essential for managing when and where certain components are displayed, ensuring a consistent look and feel throughout the site. They can be applied globally but also allow for overrides at the section or block level for more detailed customization.

Key components and functionality #

Visibility settings

Visibility settings enable you to control the display of elements on different devices, such as desktops and mobile devices. This flexibility is crucial for tailoring the user experience based on the device being used, ensuring that content is presented in the most appropriate format.

• Display visibility: This setting determines the visibility of elements across different devices. It offers the following options:
  1. Do not hide: Elements will be visible on all devices. Default: Do not hide
  2. Hide on desktop: Elements will be hidden when viewed on desktop devices.
  3. Hide on mobile: Elements will be hidden when viewed on mobile devices.

These settings provide the flexibility to customize how content is displayed, allowing for a more tailored and device-appropriate presentation.

Usage examples #

1. Hiding promotional banners on mobile: You might consider setting the visibility to "Hide on mobile" for promotional banners that are too large for mobile screens. This ensures they only appear on desktop devices, maintaining a clean and user-friendly mobile interface.

2. Desktop-specific content: For content that is only relevant to desktop users, such as detailed product comparisons or large infographics, you might consider setting the visibility to "Hide on mobile" to prevent cluttering the mobile experience.

These examples illustrate how Visibility settings can be strategically used to enhance the user experience by displaying content that is most appropriate for the device being used.