BLOG

How do I change the hero photo on my homepage?

The Hero Image upload on the Storefront tab, what shape it should be, where to place your subject and what shows when you clear it.

An independent online storefront with a product display and shopping bag
Your next chapter · Editorial illustration

The big photograph behind your homepage heading is called the hero image. You can swap it yourself at any time. Open Admin, then Settings, then the Storefront tab and scroll to the card named Home Page. The field is labelled Hero Image, with the hint "16:9 landscape".

How to change it

The field is a small uploader. Add your photo, and a thumbnail appears. It takes one image only. To replace it, remove the thumbnail and upload another. Then press Save Settings at the bottom of the page. The homepage picks up the new photo once the save completes.

The shape matters

A hero is a wide banner, so use a landscape photo in a 16:9 shape. The guidance printed under the field recommends 2400 by 1350 pixels, with 1920 by 1080 as the minimum. A smaller image is stretched to fill the banner and can look soft, particularly on a big monitor.

There is one more instruction that sellers often miss. The image fills the whole banner and is cropped from the bottom on wide screens. The headline sits over the left side. So keep the important part of your photo toward the top and right. A product placed at the bottom centre may be cut off, and one at the left will have text on top of it.

Choosing a photo

A few practical ideas, none of them rules:

  • Shoot or crop in landscape from the start rather than cropping a portrait phone photo.
  • Leave calm space on the left where the heading will sit.
  • Use one clear subject: your best-selling product, or a lifestyle shot of it in use.
  • Check it at phone width, where the crop looks different.

If you need a refresher on taking clean photos, photographing products on a phone covers lighting and backgrounds.

What happens if you clear it

Leaving the field empty is allowed, and it is the starting state. When there is no hero image, the homepage follows your catalogue instead: it shows the first product of the first live drop. The empty field says so itself: "Showing the first product of the first live drop". On a brand new store, uploading your own hero image means the banner does not depend on what is live.

That fallback is convenient when you launch drops regularly and want the homepage to track them automatically. If you want one consistent brand image instead, upload your own. Drops are explained in what is a drop.

If saving fails

The image is stored with the rest of your store's files. If you see a message that the hero image could not be saved and you need to re-upload it, do that and save again. The check exists to make sure the setting only ever points at an image uploaded through the admin, not at some other file.

Pair it with your text

The photo and the words work as one unit. After you change the picture, look again at your hero title and tagline in the homepage text post, since a new photo may need a different message. The wider theme is covered in customising your storefront theme and hero.

How do I change the hero photo on my homepage? — varchas.store