Image Sizes Guide
Recommended upload sizes and shapes for every image in your Storefront.
Every image you upload to your Storefront is shown in a frame with a fixed shape. Upload at the size below for each slot so your images stay sharp and are cropped the way you expect, on both phone and desktop.
| Slot | Desktop frame | Phone frame | Fit | Recommendation |
|---|---|---|---|---|
| Favicon | 1:1 | 1:1 | Whole image | 512 × 512 px, PNG |
| Logo | Any shape, 28 px tall, max 140 px wide | Any shape, 28 px tall, max 140 px wide | Whole image | At least 84 px tall, transparent PNG |
| Carousel: Wide (default) | 3:1 | 1:1 | Fill, centered | 2400 × 800 px Phone: 1080 × 1080 px |
| Carousel: Banner | 4:1 | 16:9 | Fill, centered | 2400 × 600 px Phone: 1080 × 608 px |
| Carousel: Hero | 2:1, max 80% of screen height | 4:5 | Fill, centered | 2400 × 1200 px Phone: 1080 × 1350 px |
| Content section | 4:3 | 4:3 | Fill | 1600 × 1200 px |
| Product image | 1:1 | 1:1 | Fill | 2000 × 2000 px |
Fill means the image covers the whole frame and the edges outside the frame are cropped. Whole image means the full image is shown, scaled to fit, with nothing cropped.
Favicon
The favicon is the icon in the browser tab. Upload a square PNG at 512 × 512 px.
Logo
The logo is shown in the store header at 28 px tall and at most 140 px wide. It is never cropped.
- Any shape works: square, a wordmark, or anything up to 5:1.
- Upload a transparent PNG at least 84 px tall so it stays sharp on high-resolution screens.
- A logo wider than 5:1 reaches the 140 px limit and shows shorter than 28 px.
Carousel Slides
The carousel Size setting fixes the shape of every slide. Upload the main image at the desktop size. You can also upload an optional Phone Image per slide, which is shown on screens narrower than 576 px.
| Size | Desktop upload | Phone upload | Safe zone |
|---|---|---|---|
| Banner (4:1 desktop, 16:9 phone) | 2400 × 600 px | 1080 × 608 px | Center 44% of the width |
| Wide (3:1 desktop, 1:1 phone) | 2400 × 800 px | 1080 × 1080 px | Center 33% of the width |
| Hero (2:1 desktop, 4:5 phone) | 2400 × 1200 px | 1080 × 1350 px | Center 40% of the width |
- Without a phone image, phones show the center of the desktop image, cropped to the phone shape. Only the safe zone is visible, so keep faces, products, and text inside it.
- Hero: on wide monitors, the slide is capped at 80% of the screen height, so the top and bottom of the image may be cropped.
Content Section
The image in an image-and-text content section is always shown at 4:3 and cropped to fill. Upload at 1600 × 1200 px.
Product Images
Product images are always square, so every view crops the same photo the same way. Upload at 2000 × 2000 px.
The same image is used in:
- Product grids: 2 columns on a phone, 2 to 4 columns on desktop.
- The product page gallery, including variant images.
- Cart, checkout, and Payment Page line items.
Updated about 21 hours ago