Account icon

The Account Icon block enhances navigation by providing a visual icon for user account access, typically used in the main navigation section. It allows users to easily locate and access their account settings or login page, contributing to a streamlined user experience.

Key settings include layout options such as filling available space and centering the icon, ensuring a balanced and visually appealing design. Visibility settings allow the icon to adapt to different devices, offering options to hide it on desktop or mobile as needed.

Usage examples include placing the Account Icon in the main navigation bar for quick access to account settings, which is particularly beneficial for e-commerce sites. Additionally, leveraging visibility settings ensures the icon is appropriately displayed across various devices, enhancing accessibility and user experience.

Overview #

The Account Icon block is designed to enhance the navigation experience by providing a visual icon for user account access. This block is typically used within the main navigation section, allowing users to easily locate and access their account settings or login page.

Key components and functionality #

Account icon

The Account Icon block serves as a visual cue for users to access their account-related features. It is limited to one instance per section to maintain a clean and organized navigation layout.

Layout settings

The layout settings allow you to customize how the account icon is displayed within the navigation bar, ensuring it fits seamlessly into your theme's design.

1. Fill available space

   • This setting allows the account icon to expand and fill the available space within its container, ensuring a balanced and visually appealing layout.
   • Default: Unchecked

2. Show centered

   • This option centers the account icon within the navigation bar, providing a symmetrical and aesthetically pleasing design.
   • Default: Unchecked

Visibility settings

Visibility settings control how and when the account icon is displayed across different devices, allowing for a responsive design that adapts to various screen sizes.

1. Visibility
   • This setting controls the visibility of the account icon across different devices.
   • Options include:
     • Do not hide (default)
     • Hide on desktop
     • Hide on mobile

Available in sections #

• Main navigation

Usage examples #

• Main navigation: Place the account icon in the main navigation bar to provide users with quick access to their account settings. This is particularly useful for e-commerce sites where users frequently need to check their order history or update their personal information.

• Responsive design: Utilize the visibility settings to ensure the account icon is displayed appropriately across different devices. For instance, you might choose to hide the icon on mobile devices if space is limited, or ensure it is prominently displayed on desktop for easy access.

By integrating the Account Icon block into your theme's navigation, you can enhance user experience by providing a clear and accessible path to account-related features.