Hero banner: phone image, fit and button links

What this covers

The hero is the large banner at the top of your home page. It is the first thing a shopper sees, and most of them see it on a phone. Three settings decide whether it does its job: a separate image for phones, a height mode that shows your whole banner without cropping it, and a choice of where the banner's main button leads. All three are in the Design tab and are free on every plan.

Open the hero editor

1. 1From your store dashboard, open the Design tab.
2. 2Make sure the Home page is selected at the top.
3. 3Click the name of the hero section to expand it. It is usually called Hero and is the first or second section in the list.
4. 4Make your changes in its Content fields, then press Save.
5. 5Press Open Store and check the result on a phone as well as a computer.

Why one image is never enough

On a computer the hero is a wide, short box. On a phone it is a tall, narrow one. A single image has to be cropped to fill both, so something is always lost. A landscape banner loses more than half its width on a phone, and a portrait one loses most of its height on a computer. If your offer text or your product sits near an edge, it gets cut off on one of the two.

Add a separate image for phones

The hero has two image fields for this reason.

• Hero Image is the main banner. The best size is 1920 × 1080, landscape. Keep the subject in the centre, because the sides are trimmed on narrower screens.
• Mobile Hero Image (optional) is the phone version. The best size is 1080 × 1350, portrait. Phones show this image in place of the main one, so nothing important is cropped. Leave it empty and the main image is used everywhere.

Phones, meaning any screen up to 767 pixels wide, load only the mobile image. They never download the large desktop banner, which also makes your home page open faster on mobile data. Each image must be under 2 MB.

The mobile image field is on every template except Pronto and Lantern Press, whose heroes are built differently.

Show the whole banner without cropping

Some banners cannot be cropped at all: a sale poster or a festive creative where the words are part of the picture. For these, the Maison and Minna templates have a Banner height dropdown with two choices.

• Fill the screen (image is cropped to fit) is the default. The hero is a tall, full-screen box and the edges of your image are trimmed to fill it.
• Match the image (whole banner shows, resizes with the screen) makes the hero exactly as tall as your image. The banner keeps its own shape on every device and nothing is cut off.

To set up a banner that has its words in the artwork:

1. 1Set Banner height to Match the image.
2. 2Clear the Headline, Subheadline, Badge Text and the two button label boxes, so that no text is printed over your artwork. On Maison, clear Featured Subtitle as well.
3. 3Turn off the darkening that keeps text readable. On Maison, switch off Darken background for text readability. On Minna, drag Text shade over the image down to 0%.
4. 4Upload a portrait Mobile Hero Image as well. A wide banner shown whole on a phone becomes a very short strip, and a phone-shaped version fixes that.
5. 5Press Save.

If your template has no Banner height dropdown, it does not have this mode. The separate phone image is then the way to control what phones see.

Point the hero button at a page

The hero's main button says whatever you type in its label box, which is Primary CTA on most templates. Where it goes is set just below, in the dropdown labelled Main button opens. This is on every template.

• All products page (default) sends shoppers to your full catalogue.
• A specific product shows a second dropdown with your products. Pick the one the banner is advertising. This is the simplest way to push a launch.
• A custom link shows a box for any address. Type a full link such as https://wa.me/919999999999, or a page on your own store starting with a slash.

Useful custom links on your own store: /bracelets for a category page, /brands for a browse page, /products?sort=new for your newest products, or /contact. Type only the part after your domain. The link then keeps working if you later connect a custom domain.

This setting changes the link only. The banner image and the button's words are set in the fields above it. If you later delete the product you chose, the dropdown shows it as “Deleted product”. Pick another one, because until you do the button leads to a page that no longer exists.