If your brand is on Shopify, you already have a storefront in the Shop app. Many brands have no idea what it looks like. They set up their online store, connected Shop Pay, and assumed that was the end of it.
The Shop app is a separate visual surface with its own image formats, its own layout rules, and its own discovery algorithm. The brands treating it like an afterthought are leaving a real channel unattended. This is a practical guide for designers and brand teams who want to know exactly what to build, how big to make it, and what the Shop app shows shoppers when they find you.
Why the Shop App Deserves Your Attention
As of mid-2026, the Shop app has over 175 million registered buyer accounts. That's not a projection; it's the current count, and it's been growing fast. Orders from AI-powered searches across Shopify's ecosystem grew nearly 13x year over year in Q1 2026, and Shop is the native home for that discovery to happen. Forty-eight percent of all orders placed through the Shop app are someone's first purchase from that brand, which means it's functioning as a genuine acquisition channel, not just a convenience layer for existing customers.
One analysis of Shopify merchants found the Shop app generated $4.8 million in combined portfolio revenue over a recent 12-month window, up 99% year over year. And it's still early. Most brands haven't touched their Shop Store setup since the day they installed the channel. That's the opportunity.
What the Shop App Shows Shoppers
Your Shop Store is a branded mini-storefront inside the app: logo, header, a description, and organized collections. When a shopper finds you through search, a recommendation, or a Shop Campaign, this is where they land. It's not your website.
Custom theme sections, app blocks, and any design work you've done in your Shopify theme editor don't exist here. The Shop app has its own templates, and understanding them is the first step to looking like you belong.
The main surfaces you'll be designing for are: the Shop Store homepage (logo, header, collections), the product detail page (primary product images plus optional Shop Editor blocks), and Shop Updates (the posts that go to your followers). Each one has different requirements, and none of them match your website specs exactly.
Shop Store Logo
Your logo in the Shop app is your avatar: it appears in search results, on your Store profile, and anywhere your brand surfaces in the app's discovery feed. Shopify's requirements for the Shop Store logo are stricter than they are for your online store header.
The logo must be square, with a transparent background. The accepted formats are SVG, PNG, or WebP; JPEG is not accepted because JPEG doesn't support transparency. The minimum width is 512 pixels, and because this image renders at multiple sizes depending on where it appears, a 1024 × 1024 pixel master file gives you the most flexibility without hitting quality issues on high-density displays.
If your logo is naturally horizontal (a wordmark or a lockup), you'll need a square version for Shop. That usually means isolating the icon or symbol from the wordmark, or recomposing the layout on a square canvas with enough padding that it doesn't look cropped. Your marketing team already has this version for social media avatars, so start there.
Shop Store Header Image and Video
The header is the first full-bleed visual a shopper sees when they open your Shop Store. Shopify specifies the required dimensions precisely: 1080 × 1170 pixels. That's not a recommendation; it's a requirement. Uploads at other dimensions will be cropped or stretched.
For still images and GIFs, the file size limit is 15 MB, and accepted formats are WebP, PNG, JPEG, or GIF. For video headers, the limit is 32 MB, the duration cap is 10 seconds, and accepted formats are MP4 or MOV.
At 1080 × 1170 pixels, the header is close to a square: it's slightly taller than it is wide, which makes it feel more like a magazine cover than a billboard. Designs that work well for a 16:9 banner will likely need to be recomposed, not just cropped. Favor centered compositions with enough breathing room on the vertical axis. If you're using a video, keep the main action in the first two seconds, since some buyers will see the frame before it starts playing, so your thumbnail needs to carry the message on its own.
Product Images
Product images are the highest-traffic creative asset in any Shop experience. They appear in search results, in the discovery feed, and on the product detail page itself. The recommended size is 2048 × 2048 pixels at a 1:1 square aspect ratio.
The maximum upload size is 20 MB, though you should be targeting 200 KB or less per image after compression. Shop is a mobile-first environment and file size matters.
Accepted formats for product images are JPEG, PNG, WebP, and GIF. Shopify automatically serves WebP to browsers and devices that support it, so uploading in WebP is worth doing if your production workflow supports it. If not, upload high-quality JPEG or PNG files and let Shopify handle the conversion.
The primary product image (the one that renders in grids and search results) should be shot on a clean, simple background. White, off-white, or a consistent brand neutral all work well. Lifestyle images belong on the product detail page, not as the lead image. Shop's grid layouts are competitive browsing environments; a cluttered or dark primary image will lose the click to the cleaner option next to it.
Maintain a consistent aspect ratio across your catalog. When some products are square and others aren't, your grid looks like a ransom note. Every product image should be cropped to 1:1 before upload.
Collection Images
Collections on your Shop Store homepage need a cover image to display at all. If there's no cover image assigned, the collection won't appear in the Shop interface even if it's active. Shopify doesn't publish hard pixel requirements for collection cover images, but following the same 1:1 square format and 2048 × 2048 pixel resolution you're using for products is the safest approach. It keeps your assets consistent and ensures the image won't be upscaled from a small thumbnail.
Your Shop Store navigation supports up to 12 featured collections, and each one should have a cover image that conveys the collection's identity at a glance. Think of these as the tabs in your Shop Store: they're how buyers browse once they've landed on your profile. A collection called "Summer Prints" with a gray placeholder square isn't moving anyone.
Shop Editor Blocks on Product Detail Pages
This is the newest and most underused creative surface in the Shop app. Shopify's Shop Editor lets you add up to two content blocks below the standard product details on each product detail page. The five block types available are Image, Video, Slideshow, Product Group, and Shoppable Video. These blocks render on both the Shop mobile app and the shop.app web version.
You can also create product templates that apply different block configurations to different product categories automatically. A size chart image block for footwear, a brand video for a hero SKU, a shoppable video for a bundle. It's one setup per template, then it applies across the catalog.
For image blocks, target a longest edge of 1200 to 2048 pixels and export as WebP or JPEG. The image renders full width, so vertical compositions or portrait-oriented lifestyle shots work particularly well here.
For video blocks, use MP4 (H.264), keep clips between 15 and 60 seconds, and always add burned-in captions, since most buyers will watch without sound. Slideshow blocks support both images and short video clips with text overlays. Accepted media formats for all block types are JPEG, PNG, WebP for images, and MOV or MP4 for video.
Shop Updates
Shop Updates are short posts that go directly to the feeds of shoppers who follow your Store. The text cap is 75 characters (about half a tweet), so the image carries the weight. Shopify doesn't publish formal pixel requirements for Shop Updates images, but the format renders at mobile proportions and a square or mildly vertical crop performs better than a wide landscape. Using a consistent 1080 × 1080 pixel square image is a reliable starting point; it's large enough to look sharp on high-DPI screens and fits the mobile context naturally.
One thing worth knowing about Shop Updates: you can't edit or delete a post after it goes out. Draft carefully, preview on a phone-sized screen, and publish deliberately.
Quick Reference: Shop App Image Specs
Here's a consolidated reference for the surfaces covered above.
| Surface | Formats | Dimensions | File Size | Notes |
|---|---|---|---|---|
| Shop Store Logo | SVG, PNG, WebP | Square (1:1); min 512 px wide; recommended 1024 × 1024 px | Under 1 MB | Transparent background required. No JPEG. |
| Shop Store Header (still/GIF) | WebP, PNG, JPEG, GIF | Exactly 1080 × 1170 px | Under 15 MB | Near-square frame; recompose from website banners, don't just crop. |
| Shop Store Header (video) | MP4, MOV | Exactly 1080 × 1170 px | Under 32 MB; max 10 sec | Put key action in first 2 seconds; thumbnail must work as a standalone. |
| Product Images | JPEG, PNG, WebP, GIF | 1:1 square; recommended 2048 × 2048 px | Max 20 MB; target under 200 KB compressed | Keep subject centered with 10-15% padding on all sides. See cropping notes below. |
| Collection Cover Images | JPEG, PNG, WebP | 1:1 square recommended; 2048 × 2048 px recommended | Under 20 MB | Required for the collection to appear in Shop at all. |
| Shop Editor Image Blocks | JPEG, PNG, WebP | Longest edge 1200-2048 px | Under 20 MB | Full-width rendering; portrait compositions work well here. |
| Shop Editor Video Blocks | MP4 (H.264), MOV | 1920 × 1080 px or 1:1 | Keep compressed; 15-60 sec recommended | Add burned-in captions; most viewers watch muted. |
| Shop Updates Images | JPEG, PNG, WebP | 1080 × 1080 px recommended (no official spec) | Under 5 MB | Cannot be edited or deleted after posting. |
Cropping, Safe Zones, and the Two-View Problem
Here's something Shopify's official docs don't spell out clearly: the Shop app displays your product image differently depending on where a shopper encounters it. In the catalog grid, it renders in a slot that's slightly taller than it is wide, so the sides of a square image get clipped. On the product detail page, the container is landscape, wider than it is tall, so the top and bottom of a square image get clipped. Either way, if your subject sits close to the edges, one or both views will cut into it.
What you observed is the standard behavior. A square image that looks complete at first glance will lose the sides in the grid (portrait slot) and lose the top and bottom on the detail page (landscape slot), because the app fits the same 1:1 asset into each container using object-fit: cover, scaling to fill the frame and discarding whatever overflows. The crop direction flips between the two views.
The practical fix is to treat the center 70-75% of your canvas as the safe zone for anything that must never be cropped. Keep the product or subject fully within that central area, with genuine breathing room, not just a pixel or two of margin. The outer edges of a 2048 × 2048 canvas should be clear background. This gives both the grid crop and the detail page crop room to work without cutting into the product.
A few specific keepaways designers should build into their templates:
Edges and extremities first. Handles, caps, cords, straps, shoe soles, product shadows, and labels that live near the edges of the frame are the first casualties. If the shape of the product reaches the edge of the canvas, it will be cropped in at least one view. Scale down and add padding before export.
Avoid text and logos near the frame edges. Any callout text, badge, or brand mark placed in the outer 15% of the image is at risk. If you use on-image text, keep it centered and treat the outer ring as decoration only.
Don't rely on a focal point to save a poorly composed image. Shopify's focal point tool, available in the Shopify admin media editor, tells the theme which part of the image to prioritize when cropping. It helps on your online store, but its behavior in the Shop app specifically is not documented, and community reports suggest it doesn't reliably carry over. Composing with safe margins is more dependable than relying on focal point metadata.
Use the same image order trick if you need a workaround. If you have a product image that's already been shot with the subject close to the edges, you can upload a separately composed square version (with extra padding) as the first product image for Shop compatibility, and move your tighter editorial shots to later positions in the gallery. The Shop app uses the first image as the primary display image.
What a Strong Shop App Presence Looks Like
A well-optimized Shop presence has a few things in common. The logo is a clean square mark that reads clearly at 48 pixels. The header is intentionally composed for a near-square frame, not cropped from a website banner.
Every product image is a clean square on a consistent background, shot at 2048 pixels. Collections have covers, the Shop Editor blocks are populated on at least the top SKUs, and the store feels like a brand rather than a default Shopify template.
The brands that look rough on Shop didn't make bad creative decisions; they just made decisions for a different surface and never adapted them. The website banner doesn't fit the header. The transparent-background product shots look fine on a white website but disappear in a grid. The collection covers are still set to "no image." None of these are hard fixes, but they compound: a polished Shop profile converts better than a bare one, and the app's algorithm rewards engagement.
If you want help auditing your brand's current Shop app presence and building a creative brief that addresses each surface properly, we'd be glad to take a look. You can schedule a call with our team here, and we can walk through what's working and what needs attention before your next product launch.