Header: Logo
Logo
The Logo block displays the store logo in the header. If you have not uploaded your own logo in this block, it will use the logo uploaded in the control panel.
We recommend uploading your own logo in the block as it provides more options for display, size, and different logos per type (desktop, tablet, and mobile).
It uses the logo you have uploaded in the theme settings, and allows you to control size, alignment, and an optional extra logo for floating or transparent headers.
Settings
Setting | What it controls |
|---|---|
Extra logo | An alternative logo, used for floating or transparent headers (for example, a light version of the logo over a dark transparent header) |
Logo size | The width of the logo, from small to large |
Alignment | Horizontal placement on desktop — left, centered, or right |
Mobile alignment | Horizontal placement on phones, set separately from desktop |
Why an extra logo
If the header is transparent or floating, the area behind the logo can change color when the customer scrolls or switches pages. A logo that looks great on a white line can disappear over a dark image. The extra logo allows you to add a version that works in that state, and the store switches to it automatically.
Layout and visibility
Like most header blocks, the Logo block also has:
- Width-settings for desktop, tablet, and mobile — how much of the header's column grid the logo occupies.
- Custom CSS class — to add your own class if you need custom styling.
- Block conditions — rules for when the logo should be shown or hidden (for example, only on certain pages).
Tips
- If you have not uploaded your own logo in this block, it will use the logo uploaded in the control panel.
- Set mobile alignment intentionally. A logo that is centered on desktop often works better left-aligned on mobile, next to the menu button.
- Only add an extra logo if you are using a transparent or floating header — otherwise, it will never be displayed.