Image sizes
Alpha Start loads a smaller copy of each image on small screens and a sharper copy on high-resolution screens. To look sharp everywhere, upload images at least as large as the sizes below. Larger images are fine: Shopify resizes them for each device.
The sizes are in pixels, width × height. Where an image is cropped to a fixed shape, the shape is given too.
Theme settings, header and footer
Section titled “Theme settings, header and footer”| Where | Setting | Recommended size (px) | Shape and notes |
|---|---|---|---|
| Theme settings → Logo and favicon | Logo | 600 wide | Any shape. Shown at Logo width (50–300px) in the header, 90px wide on screens up to 1024px and 140px wide in the footer. PNG or SVG with a transparent background. |
| Theme settings → Logo and favicon | Logo for dark backgrounds | 600 wide | Same as the logo, in a light color for dark color schemes. |
| Theme settings → Logo and favicon | Favicon | 32 × 32 or larger | Square. Info in the editor: “Displayed at 32 × 32px”. |
| Header → Featured product | Background image | 1920 × 810 or larger | Wide. Info in the editor: “Covers the whole block, header included. 1920 × 810px or larger works best.” Follows the focal point. |
| Header → Featured product | Mobile image | 1024 × 1024 | Square, for screens up to 1024px wide. |
| Header → Menu item block | Icon | 48 × 48 | Square SVG or PNG. Shown at 24 × 24px. |
| Header → Menu item block | Banner | 612 × 612 | Square, shown 306px wide in the mega menu panel. Cropped from the center. |
| Header → Menu item block | Brands | 192 × 72 | The collection image of each brand, shown up to 36px high. PNG or SVG with a transparent background. |
Sections
Section titled “Sections”| Where | Setting | Recommended size (px) | Shape and notes |
|---|---|---|---|
| Hero banner → Image panel | Image | 2400 × 1400 | Info in the editor: “Recommended size: 2400 × 1400 px.” With two panels, each panel is about half the page wide and crops the image closer to portrait. Follows the focal point. |
| Hero banner → Image panel | Mobile image | 1100 × 1375 | Portrait 4:5, for phones up to 767px wide. The desktop image is used when empty. |
| Collage → Collage tile | Image | 1000 × 1000 | The large tile and the small tiles are close to square; the wide second tile crops to about 2:1. Uses the collection image when empty. Follows the focal point. |
| Image with text | Image | 1600 × 2000 | Cropped to Image ratio: 1600 × 2000 for Portrait (4:5), 1600 × 1600 for Square (1:1), 1600 × 1200 for Landscape (4:3). Follows the focal point. |
| Video | Cover image | 1800 × 1012 | Landscape 16:9. Info in the editor: “Recommended size: 1800 × 1012 px.” The 21:9 ratio and Crop to 4:5 on mobile crop it further. Follows the focal point. |
| Stories → Story | Image | 1080 × 1920 | Portrait 9:16. Info in the editor: “Use a vertical image, 9:16 works best”. The Circles card shape shows a round crop of it. |
| Shop the look | Image | 1200 × 1800 | Portrait photo of the whole look. Never cropped, so hotspots stay where you put them. |
| Collection with products | Tile image | 960 × 1200 | Portrait. The tile is as tall as the product row; on screens up to 1024px it becomes a small thumbnail. Uses the collection image when empty. |
| Promotions → Promotion | Image | 1300 × 975 | Landscape 4:3. Info in the editor: “Shown with a 4:3 crop. 1300 × 975px or larger works best.” |
| Customer reviews → Review | Image | 900 × 900 | Square. In the Spotlight layout it is shown next to the review, in the Carousel layout as a small thumbnail. Uses the product image when empty. |
| Logo list → Logo | Logo | 384 × 144 | Info in the editor: “Displayed up to 128 × 48px.” PNG or SVG with a transparent background. |
| Advantages and About us → Advantage | Custom icon | 96 × 96 | Square SVG or PNG, shown at 48 × 48px. |
| About us | Image | 1440 × 810 | Landscape 16:9. Info in the editor: “Shown at the top of the contact card. 1440 × 810px or larger works best.” |
| Page (page template) | Image | 2400 wide | Any height. Shown across the page content without cropping. |
| Not found (404 template) | Image | 940 × 780 | Info in the editor: “Recommended size: 940 × 780 px.” |
| Product → Size guide block | Image | 480 wide | Shown 200px wide in the How to measure part of the size guide. |
| Services (services blog template) → Category block | Image | 960 × 960 | Square tile. Uses the image of the first service in the category when empty. |
Images from your Shopify admin
Section titled “Images from your Shopify admin”These images are not theme settings. You upload them with your products, collections and blog posts.
| Where it’s uploaded | Used in | Recommended size (px) | Shape and notes |
|---|---|---|---|
| Products → product → Media | Product page, product cards, cart, search | 2048 × 2048 (square) or 1536 × 2048 (portrait 3:4) | Match Theme settings → Product cards → Image ratio. The product page shows the whole photo; cards crop it to the ratio unless Add padding around images is on. Use the same shape for all photos of a product. |
| Products → product → option value swatch | Color swatches on cards, the product page and filters | 128 × 128 | Square pattern or texture, cropped to a circle. |
| Products → Collections → collection → Image | Collection page banner, collection cards and tiles, brand logos in the mega menu | 2400 × 1200 or larger | Landscape 2:1. The banner crops it to 4:1 on desktop, 3:1 on tablets and 2:1 on phones; tiles crop it closer to square; cards on a gray background show it whole. Set a focal point. |
| Online Store → Blog posts → post → Image | Blog post header, post cards, service cards | 1800 × 1200 | Landscape 3:2. Post cards crop it to 4:3, 3:2 or square depending on the layout. Keep the subject in the middle. |
Service post metafield service.gallery |
Photo gallery on a service page | 840 wide | Tiles have different heights, so photos are cropped. Portrait and square photos work best. |
General advice
Section titled “General advice”- File format: use JPG for photos, PNG or SVG for logos and icons with transparent backgrounds. WebP works for both. Shopify serves images in modern formats to browsers that support them, whatever format you upload.
- File size: Shopify accepts images up to 20 MB and 5000 × 5000px, but smaller files upload faster. A photo exported at the recommended size with 80% JPG quality is usually well under 1 MB.
- Focal point: where the theme crops a photo to fit a shape, it keeps the focal point you set in your Shopify admin in view. Open Content → Files, click the image and set the focal point. Product photos, the image at the top of a blog post, mega menu banners and service cards are cropped from the center.
- Text in images: avoid putting important text into photos. It becomes unreadable on phones, and screen readers can’t read it. Use the heading and text settings of the section instead.
- Alt text: alt text describes the image for customers who use screen readers and for search engines. Add it where Shopify stores it: in the product editor for product media, in Content → Files for images you pick in the theme editor, and in the collection and blog post editors for their images. See Accessibility.