Key takeaways
- Change your hero image in the Theme Editor: Online Store → Themes → Customize → find the Image banner or Hero section → click the image to replace it.
- Recommended size: 2560 x 1440px, under 1MB, in WebP or JPEG format.
- Most themes let you set a separate image for mobile — always check and set this too.
- Fudge can update your hero image and layout together if you want design changes alongside the swap.
To change the hero image in Shopify, go to Online Store → Themes → Customize, click the Image banner (or Hero) section on the homepage, replace the image and save. It takes about two minutes.
Why you can trust us
Jacques has over 15 years of development experience and has helped many Shopify brands with their storefronts. We build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.
How to change the hero image in Shopify
Step 1. Go to Online Store → Themes → Customize.
Step 2. The homepage is usually the default view. If not, use the page selector at the top to navigate to the homepage.
Step 3. In the left sidebar, look for a section called Image banner, Hero, Slideshow, or similar. The name varies by theme.
Step 4. Click that section to open its settings.
Step 5. Click the current image thumbnail (or the image upload area). A file picker opens showing your media library.
Step 6. Select an existing image from your library, or click Upload to add a new file.
Step 7. Save.
Your new hero image is now live.
For the banner’s text, button and slideshow settings, see how to change the homepage banner in Shopify.
Can’t find the hero section in the theme editor?
If you can’t find the hero section in the sidebar, click the hero image in the preview. This selects the section and opens its settings.
In themes with a slideshow hero, each slide is a separate block. Click the individual slide block to change that slide’s image.
Recommended hero image specs
| Spec | Recommended value |
|---|---|
| Dimensions | 2560 x 1440px |
| File size | Under 1MB |
| Format | High-quality JPEG or WebP |
| Colour profile | sRGB |
Why 2560 x 1440px? This covers the widest standard desktop display. Shopify serves scaled-down versions to smaller screens automatically via its CDN - so a large source image handles all screen sizes.
Keep it under 1MB. Hero images are almost always the Largest Contentful Paint (LCP) element on the page. A large file directly harms your page speed score and your conversion rate.
JPEG or WebP both work. Shopify’s CDN converts and resizes uploads for each browser, so upload a high-quality JPEG or WebP and keep it under 1MB.
Still unsure what the hero should say or look like? Our free Shopify website redesign tool generates three homepage directions from your real products, hero section included.
How to set a separate mobile hero image
Some themes support a dedicated mobile image for the hero section - Shopify’s Horizon does, Dawn does not. This matters because a landscape 2560 x 1440px image often crops awkwardly on portrait mobile screens. Our Shopify image sizes guide explains why the crop happens and lists sizes for every image type.
In the hero section settings, look for a Mobile image field below the main image selector. Upload a portrait-orientation crop of your hero image - typically around 750 x 1000px.
If your theme doesn’t have a separate mobile image field, the main image will be cropped or scaled based on the section’s CSS object-position setting. You can adjust this via code or Fudge.
How to change hero image text and button
The headline, subheading and button are separate blocks inside the section.
Click the section → look for Heading, Subheading, and Button blocks in the left sidebar underneath the section name. Click each block to edit the text and link.
To change text colour (for readability against a new image), look in the section settings for a Text colour or Color scheme option.
How to use Fudge to update the hero section
If you’re swapping a hero image and also want to change the layout - different overlay opacity, new text positioning, added elements like a review badge or countdown - describe it to Fudge, the AI operator for Shopify stores:
“Update my homepage hero with the new banner image and move the headline to the left. Add a star rating with ‘4.8 from 1,200 reviews’ below the subheading.”
Fudge writes the changes into your theme as a draft with a working preview, and nothing goes live until you approve it. Once the new hero is published, Fudge shows your homepage’s conversion rate before and after the change.
FAQ
Does my hero image affect Shopify SEO?
Indirectly. The hero is almost always the Largest Contentful Paint (LCP) element, so its file size directly affects Core Web Vitals — which Google uses as a soft ranking signal. A bloated hero (multi-MB) can drop LCP into the "poor" band and hurt rankings. Keep it under 1MB.
Why does my hero image crop awkwardly on mobile?
Most heroes are landscape (e.g., 2560x1440), but mobile viewports are portrait. The crop comes from the section's object-position setting, which defaults to center. Either upload a separate mobile image (some themes support this, including Horizon), or describe what you want to Fudge ("show this hero image cropped to the right third on mobile") and it adds the right object-position CSS scoped to mobile.
Should I use JPEG or WebP for my Shopify hero?
Either. Shopify's CDN converts and resizes uploads for each browser, so upload a high-quality JPEG or WebP and keep it under 1MB. Shopify re-encodes every size it serves, so a heavily pre-compressed WebP can lose quality on the second encode.
Does the alt text on a hero image matter?
Yes — for accessibility (screen readers) and image SEO. Use a descriptive sentence that includes a keyword naturally, not stuffed. Example: "Woman wearing the Aurora wool coat in a snowy mountain pass" rather than "hero image" or "best winter coats Shopify".
Can I use a video as the hero instead of a still image?
Yes, if your theme has a video hero or background-video section (Horizon and many paid themes do; Dawn's Video section is click-to-play). Video heroes increase engagement for lifestyle and apparel categories but add 1–3MB of weight even when compressed — meaningful on slower connections. Use sparingly, mute by default (browsers require it for autoplay), and fall back to a still poster image on slow networks.
