> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/theme-settings/logo.md).

# Logo

The shop mark, and how tall it is drawn.

Used in the header, the lookbook and the preview — upload it once and all three follow. Leave it empty for the theme's boxed wordmark.

**Logo height on desktop** and **Logo height on phones** set how tall it is drawn. The phone value falls back to the desktop one, so setting only the first still works.

They are written onto the element rather than left to the stylesheet, because every place a logo appears already caps its height — without that the sliders would do nothing above those caps.

The enter page and the password page have their own logo settings, on those sections. That is deliberate: both often sit on a different background from the shop, and a mark that reads on white may not read on black.

## Use a PNG if you can

Shopify's image pipeline does not handle SVG. Its resizing filter only accepts raster formats, and the filter that builds the `<img>` tag refuses anything that did not come through it — so an SVG cannot take the normal path.

The theme handles it anyway: it puts both candidate addresses on the element and lets the browser take whichever loads. That works, but you lose the `srcset` and the focal point that a PNG gets, and it depends on how Shopify happened to store your file.

**A PNG at roughly twice your chosen height is the reliable answer.** At a 44px logo height, a 400 × 88 PNG is plenty.