Shopify store banner: sizes, product images and sales

A good Shopify store banner is 1920×1080 pixels, carries one short headline and one button, and keeps both in the middle of the frame, because most themes crop the sides away on a phone. Pair it with product images uploaded as 2048×2048 squares on the same background, and the store starts to look like a brand rather than a catalogue. The rest of this page covers the sizes, the layouts that survive every screen, and how to make sale banners that still look like you.

Shopify banner and image sizes

Shopify does not force one banner size on you: each theme decides how tall the hero sits and how it crops. Working from a 16:9 master is the safest habit, because it fills a laptop screen and leaves enough height to crop for a phone.

Square product images matter more than they look. When every photo in a collection is the same shape, the grid lines up and the eye compares products instead of noticing ragged edges. 2048 pixels also gives the zoom on a product page enough detail to be worth tapping. The link preview size is explained in Open Graph image size.

How to design a hero banner that survives a phone

On a laptop the hero is wide and short. On a phone the same image is often cropped to a near square, or the theme stacks the words underneath it. Either way the edges disappear, so anything important at the edges disappears too.

1. 1

   Start at 1920×1080

   Design the full width, then mark a central column about 1080 pixels wide. That column is what a phone is most likely to keep.

2. 2

   Write one line, not three

   "The autumn edit is here." beats a headline, a subhead and a discount code fighting for space. Detail belongs on the collection page.

3. 3

   Use one button with a verb

   Shop the edit, Shop candles, See what's new. Most themes add the button for you, so leave a calm area where it will sit.

4. 4

   Let the background carry the brand

   A product photo with a busy room behind it competes with the words. A consistent colour field or material behind a cut out product reads at any crop.

5. 5

   Check it on your own phone

   Theme previews help, but open the live store on a real phone before you call it finished.

Product images that look like one shop

Customers judge a shop by its grid long before they read a description. If one product sits on a white sweep, the next on a kitchen counter and the third on a bedsheet, the shop feels improvised even when the products are excellent. Choose one backdrop and one way of lighting, and repeat it.

A soft gradient behind a cut out product works well because it gives depth without a real set. Keep it low in contrast so the product stays the brightest thing in the frame. There are more set ups in product photo backgrounds.

Shopify sale banners that still look like you

Sales are where most shops lose their look. The usual reflex is red, a starburst and the word SALE in capitals, which looks like every other shop on the same weekend. Keep your own background and type, and change only the words and perhaps the intensity of the colour.

• Say the offer in under six words: "Winter sale. 30% off."
• Put the end date in the eyebrow so urgency is honest.
• Use the same words on the hero, the email header and the story, and keep the story's words inside the central safe zone.
• Take the banner down when the sale ends. A stale sale hero tells visitors nobody is minding the shop.

For busy weekends, Black Friday social media posts and sale post design have layouts and wording to borrow.

One look across store, email and social

The hero, the product grid, the email header and the Instagram post are seen by the same customer within days of each other. When they share a background, a heading font and a small palette, each one reminds the customer of the last. That is what brand consistency means in practice for a shop.

This is where Gradiently helps a small shop. Design the hero once on a Mark, a living gradient background that only you can export with once you claim it, and Pro resizes it to the story, the email header and the link preview in one step. Bulk create, also on Pro, fills a product card template from a spreadsheet of names and prices, so a new collection's graphics come out matching. One look, every size shows the workflow.