General
Logo, favicon and the gift card image.
What it controls
The marks your store is recognized by. The logo settings feed the header, the footer’s large wordmark and the password page. The favicon is the icon in the browser tab. The gift card image is the picture on the page a gift card recipient opens from their email.
How it connects
- Header reads Logo, Mobile logo and both widths. Its Layout setting decides where the logo sits, but not which file is used.
- Footer can show the logo as the oversized mark at the very bottom (Large wordmark → Logo), and uses the light logo on a dark color scheme.
- Sections on a dark color scheme use the Light logo where a logo appears.
- The Password page shows the logo above the password form.
Setting it up
- Upload the Logo. Set Logo width so the mark is readable but does not crowd the menu; 120 to 160 px suits most wordmarks.
- If your logo is wide, add a Mobile logo (a monogram or a shorter mark) and set its width. Otherwise the main logo is scaled down on phones.
- Upload a Favicon, 32 x 32 px PNG.
- Upload a Gift card image if you sell gift cards, or leave the tinted panel.
Settings
| Setting | Type | What it does |
|---|---|---|
| Logo | ||
| Logo | Image | Your main logo, used in the header, on the password page and as the footer's large wordmark when that is set to Logo. SVG or a transparent PNG at twice the display width. |
| Light logo | Image | A version of the logo for dark surfaces: the footer on a dark color scheme, dark sections. Falls back to the main logo. |
| Logo width | Range | How wide the logo renders in the header on desktop. The height follows the file's proportions.40 to 300 px · Default: 120 |
| Mobile logo | Image | A narrower mark for phones, such as a monogram. Without one, the main logo is scaled down. |
| Mobile logo width | Range | How wide the logo renders in the header on a phone.40 to 200 px · Default: 100 |
| Favicon | Image | The icon in the browser tab and in bookmarks. A square PNG; Shopify makes the sizes. |
| Gift card | ||
| Gift card image | Image | The picture on the page a gift card recipient opens from their email. Without one, the page shows a tinted panel with the amount. |
Tips
- Upload the logo as SVG or as a PNG with a transparent background, at least twice the width you set, so it stays sharp on high resolution screens.
- Without a logo, the header shows your shop name in the heading font. That is a valid choice for a young brand, not a fallback to be embarrassed about.
- The light logo is only used where the surface is dark. If your main logo already works on dark backgrounds, leave it empty.