Shoupapp
Search for e-commerce banner sizes and you get long lists of pixel dimensions that disagree with each other. The reason is simple: the pixel size depends on your store theme and the screen, while the thing that actually decides whether a banner works is its shape. This guide starts from the five aspect ratios that cover almost every e-commerce banner, then shows how to turn a ratio into pixels, how much text each shape can carry, and how to run one campaign across all of them.
| Shape | Aspect ratio | Where it goes |
|---|---|---|
| Website hero | 16:9 | The top of your homepage or a landing page |
| Wide | 2:1 | Category headers and email headers |
| Slim | 3:1 | Promotion strips and narrow headers |
| Square | 1:1 | Feed posts and marketplace promotion tiles |
| Story | 9:16 | Instagram and Facebook stories, vertical ads |
Why pixel lists disagree
Every theme displays its banner sections at its own width, and every screen shows them at a different size. That is why one guide recommends one pixel size for a hero banner and another guide a different one. Some lists even label a size with the wrong ratio: 2,048 × 1,024 pixels is often called 16:9, but it is 2:1. A banner designed for one shape and uploaded into the other gets cropped.
So work in this order: find the ratio your theme's section uses, design at that ratio, then export at the width your theme recommends.
Turning a ratio into pixels
Once you know the ratio and the width, the height follows. Divide the width by the first number of the ratio and multiply by the second.
| Ratio | Example width | Height |
|---|---|---|
| 16:9 | 1,920 px | 1,080 px |
| 2:1 | 2,048 px | 1,024 px |
| 3:1 | 1,800 px | 600 px |
| 1:1 | 1,080 px | 1,080 px |
| 9:16 | 1,080 px | 1,920 px |
Your theme's documentation gives the recommended width for each section. Shopify's own guidance, for instance, notes that images can be up to 5,000 × 5,000 px and must be under 20 MB, which leaves plenty of room for sharp banners.
Design at the shape, don't crop into it
A 16:9 hero and a 9:16 story are the same campaign in two completely different frames. Designing one and cropping it into the other almost always cuts off the headline, the product or the button. Pixel sizes can be scaled; a ratio cannot be changed without losing something. Compose each shape on its own, with the product and text placed for that frame.
A text budget for each banner
Banners fail more often from too much text than from too little. A useful budget:
| Element | Keep it to about |
|---|---|
| Headline | 60 characters |
| Subheadline | 100 characters |
| Supporting text | 180 characters |
| Button label | 30 characters |
On the short shapes, use less. A 3:1 strip usually has room for a headline and a button and nothing else. A headline that fits a desktop hero can become unreadable in a slim banner on a phone.
Safe zones by shape
- 16:9 hero: keep text away from the outer edges, where many themes place navigation, arrows or overlays, and check how the section crops on mobile.
- 2:1 and 3:1: keep the product and text within the middle band; these banners are often shown at very small heights.
- 1:1: centered compositions are safest, because feeds and tiles may show a rounded or cropped preview.
- 9:16 story: leave the top and bottom clear of the platform's profile name, buttons and reply bar, and place the product in the middle third.
Style by goal
| Goal | Style that fits | Text emphasis |
|---|---|---|
| Launch a product | Clean or premium | Product name and one benefit |
| Promote a sale | Bold | The offer in the headline |
| Highlight a benefit | Lifestyle | The benefit, shown in use |
| Build awareness | Premium | Little text, often no button |
Why AI banner text goes wrong
Banners generated entirely as images often fail on the text: letters that almost spell a word, a brand name with one character wrong. The reliable approach is to generate the picture with no text in it, then set the headline, subheadline and button on top as real type. What you type is then exactly what appears, in every shape.
One campaign across five shapes
A product launch can usually be covered from a single product photo:
- Write the headline once, within the budget above.
- Make the 16:9 hero for the homepage.
- Make the 2:1 header for the launch email.
- Make the 1:1 post and the 9:16 story for social media.
- Use the 3:1 strip for the category page or a site-wide promotion bar.
Keep the same headline and button color everywhere, so people recognise the campaign wherever they meet it.
Making the set from one product photo
Shoupapp's product banner maker works from a photo already in your library. You choose the goal (launch a product, promote a sale, highlight a benefit, build awareness), the format and the style (clean, lifestyle, premium or bold, or let it choose). Type your own headline, or leave it empty and it is written for you in English, Spanish, German, French, Italian, Portuguese, Dutch, Turkish or Polish.
Each format is composed at its own shape, and the text is set over the picture as real type, so it is always spelled correctly. The button is optional and takes your brand color; the label color is picked automatically so it stays readable. Run the same photo once for each shape you need. Every banner is saved as a new file next to the original, ready to download or to finish in the photo editor. Banners can also be a step in an automation, so new products get one as soon as their photo arrives.
Banner types across a store
| Banner | Typical shape | What it needs |
|---|---|---|
| Homepage hero | 16:9 on desktop, often taller on mobile | Product, headline, button |
| Collection or category header | 2:1 or 3:1 | Collection name, one product or texture |
| Email header | 2:1 | Offer and one product; must read in a preview pane |
| Promotion tile | 1:1 | The offer, large |
| Story or vertical ad | 9:16 | Product in the middle, text in the safe area |
Desktop and mobile heroes
Many themes show the homepage hero at a different shape on phones, often taller than 16:9, and crop the desktop image to fit. Check whether your theme lets you upload a separate mobile image. If it does, make one: the same message composed for a tall frame. If it does not, keep the product and headline in the center of the 16:9 banner, where they survive the crop.
File format and weight
Banners are usually the largest images on a page, so they have the most effect on how fast it loads. Photographic banners should be saved as JPG or WebP; PNG files of the same banner are much larger. Export at the width your theme displays, not larger. Then check the page on a phone connection: if the hero appears noticeably after the rest of the page, the file is too heavy.
Banner questions
What is the best banner size for a Shopify store?
It depends on the theme and the section. Check the theme's documentation for the width, and design at the ratio the section uses.
Should I use JPG, PNG or WebP?
For photographic banners, JPG or WebP keeps files small. Use PNG only when you need transparency.
Can I reuse the same banner in every size?
Reuse the message, not the file. Compose each shape on its own.