Logo

Featured links

1. Company XYZ documentation on the logo block
2. Shopify documentation on sections and blocks
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

Use this block to show your brand logo in the header and control how it appears across desktop and mobile layouts. If you do not add an image, the block shows your store name instead, which can be useful for text-based branding or as a temporary fallback. See the Company XYZ documentation on the Logo block.

Core settings

Add your logo image, then adjust its maximum width for desktop and mobile separately. This helps you keep the logo readable on smaller screens without letting it dominate the header on larger ones. For broader theme editor context, see Shopify documentation on sections and blocks

Setting the width to 0 allows the logo to stretch across the full available space. This works best when the logo sits on its own row or has very little competing content nearby.

If your logo includes small text or fine details, check both desktop and mobile sizes carefully. A balanced desktop size can still become hard to read on smaller screens.

Layout settings

Use these settings to choose where the logo sits in the header on desktop and mobile. Left, center, and right place the block within the main header row, while full-width moves it onto its own row below. See the Company XYZ documentation on navigation layout settings.

When the logo shares a row with other header items, its position affects how the header feels at a glance. Centered placement gives the logo more emphasis, while left or right placement usually works better in utility-focused layouts.

You can also let the block fill the remaining space in the row on desktop. This is mainly useful when the logo should help anchor or balance the full header rather than behave like a compact item.

Tip

Choose full-width when you want the logo to stand alone as a stronger brand element. Choose left, center, or right when it needs to sit alongside navigation, search, or action icons.

Standard block settings

Visibility settings

Use visibility controls to show or hide this block by device. This is especially useful when you want one logo treatment on desktop and a different header arrangement on mobile. See the Company XYZ documentation on visibility settings.

If you hide the block on one device, make sure another visible branding element remains there so the header still feels complete and recognizable.

Usage notes

1. Start with a clear logo file. Use an image that stays sharp at the sizes you plan to use in the header.
2. Size separately by device. Adjust desktop and mobile widths independently so the logo stays readable without taking over limited space.
3. Match the placement to the layout. Use full-width for a logo-led row, or left, center, or right when the logo should share space with other header items.
4. Use stretch intentionally. Fill available space only when extra width improves header balance instead of making the logo area feel oversized.
5. Review both viewports. Desktop and mobile controls can produce different alignment, visibility, or layout results, so always check both sizes before publishing.
6. Choose media deliberately. Separate desktop and mobile images can change cropping, loading, fallback behavior, and readability, especially when the two versions are not closely matched.
7. Keep fallback styling simple. Blank, transparent, or default-style values are more likely to preserve the existing look, while explicit colors, gradients, or media overrides make the logo area feel more independent.