Account icon

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on the theme editor
3. Company XYZ documentation on navigation layout settings
4. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

The Account icon block adds a customer account shortcut to your header or navigation area. Use it to give customers a clear path to sign in or open their account, then adjust its placement separately for desktop and mobile. For a broader overview of how blocks fit into theme sections, see Shopify documentation on sections and blocks

Alignment settings

Use these settings to control how the icon sits within the space assigned to the block. They matter most when the block is set to fill available space or placed in a full-width row.

If the block is sitting in a tightly grouped row with little extra room, alignment changes may be subtle. Set desktop and mobile alignment independently if your header layout changes between screen sizes.

Note

Alignment settings are secondary to the block’s layout placement. If the block is not using extra row space, changing alignment may have little visible effect.

Layout settings

These settings decide where the block appears in the navigation layout. You can place it with other items on the left, center, or right, or move it into a full-width row below the main row.

Use full-width when you want the account shortcut to stand on its own, especially in a stacked mobile header. On desktop, Fill available space can stretch the block across the remaining row width, which makes alignment controls more useful. If you need a refresher on working in the theme editor, see Shopify documentation on the theme editor

Full-width placement changes the header structure by moving the block into its own row. Review both desktop and mobile layouts after enabling it.

For more guidance on row placement behavior, see navigation layout settings.

Standard block settings

Visibility settings

Use visibility controls to show or hide the block by device size. This is useful when you want the account shortcut in one position on desktop and a different position on mobile.

Instead of forcing one placement to work everywhere, you can hide this block on one device size and surface account access elsewhere in the header. For shared guidance, see visibility settings.

Usage notes

1. Place it near utility actions. The account icon usually works best alongside other header tools such as search, cart, or menu controls.
   1. Keep the shortcut easy to spot so customers can reach sign-in or account pages without scanning the main navigation.
   2. If you move it away from other utility actions, make sure the new placement still feels intentional.
2. Check both screen sizes. Desktop and mobile layout settings are separate, so always preview both after changing placement.
   1. A placement that feels balanced on desktop can read very differently in a compact mobile header.
   2. Review visibility settings at the same time if you use different account access points by device size.
3. Use full-width with intent. A dedicated row can improve clarity, but it can also make the header feel taller or more fragmented.
4. Combine layout and visibility thoughtfully. If your mobile header works differently from desktop, hide the block on one device and use a better-fitting account access point there.
5. Use extra space only when it helps. Fill available space is most effective when you need cleaner alignment or better row balance, not just more width.
   1. When the block is stretched across the row, small alignment changes become easier to notice.
   2. If the header is already compact, leaving the block at its natural width may preserve a cleaner layout.