# Hero banner: phone image, fit and button links > Give phones their own banner image, show a whole banner without cropping, and point the hero button at a product, a category or any page. Guide: https://sitesplaced.com/help/online-stores/hero-banner-images · Section: Online Stores · Last reviewed: 2026-09-20 ## 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. From your store dashboard, open the **Design** tab. 2. Make sure the **Home** page is selected at the top. 3. Click 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. Make your changes in its **Content** fields, then press **Save**. 5. Press **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. > **Carousel slides and a hero video take over:** On templates whose hero has **Carousel Images**, adding two or more slides turns the hero into a rotating carousel. The slides replace the single **Hero Image** and the mobile image too. A **Hero Video** replaces all images when set. If you want one fixed banner with its own phone version, leave both of those empty. ## 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. Set **Banner height** to **Match the image**. 2. Clear 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. Turn 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. Upload 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. Press **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](https://sitesplaced.com/help/md/online-stores/browse-pages.md), `/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. **Q: What size should my banner be?** 1920 × 1080 pixels, landscape, for the main Hero Image, and 1080 × 1350 pixels, portrait, for the Mobile Hero Image. Save them as JPG files under 2 MB each. **Q: My banner looks fine on my laptop but the text is cut off on my phone.** The phone is cropping the sides of a landscape image. Upload a portrait Mobile Hero Image with the text placed inside it. On Maison or Minna you can also set Banner height to Match the image. **Q: I uploaded a Mobile Hero Image but phones still show the old banner.** Check three things. You pressed Save with the Home page open. The Carousel Images list and the Hero Video box are empty, because either one replaces the mobile image. And you have reloaded the store after a minute, since pages are stored briefly for speed. **Q: I cannot find Banner height in my hero.** It is offered on the Maison and Minna templates only. Other templates always crop the image to fill the hero, so use a separate Mobile Hero Image to control what phones show. **Q: Can the hero button open WhatsApp?** Yes. Choose A custom link and type a WhatsApp link with your number and its country code, such as https://wa.me/919999999999.