Key takeaways
- Go to Online Store > Themes > Customize > click the hero or banner section > update the background image.
- The hero section is typically called “Image banner”, “Hero”, or “Slideshow” depending on your theme.
- Add a dark overlay if you have text on top of the image - it improves legibility significantly.
- Recommended image size: 2560 x 1440px, compressed to under 1MB.
To replace the hero background image in Shopify, open Online Store > Themes > Customize, click the Image banner (or Hero) section, choose Change image, pick or upload the new image and save.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.
How to change the hero background image
Step 1. Go to Online Store > Themes > Customize.
Step 2. You’ll land on the homepage by default. If the hero is on a different page, navigate there using the page selector at the top.
Step 3. In the left sidebar, find the hero section. It may be labelled:
- Image banner
- Hero image
- Slideshow
- Full-width image
Click on it.
Step 4. In the settings panel, find the Image field. Click Select image or Change image.
Step 5. Choose an image from your Shopify files library, or upload a new one directly.
Step 6. Click Save.
For the banner’s text, button and slideshow settings, see how to change the homepage banner in Shopify.
Recommended image specifications
Getting the technical specs right makes a real difference to how the hero looks and loads:
Width: 2560px wide (2560 x 1440px for a 16:9 banner). Shopify’s CDN serves responsive versions, but the source image needs to be wide enough to look crisp on large screens.
Height: Most themes display the hero at a fixed ratio - commonly 16:9, 2:1, or 3:1 for widescreen banners. Check your theme’s aspect ratio settings and crop your image to match before uploading.
Format: WebP or JPEG for photos. Avoid PNG for large photographic backgrounds (file sizes get very large).
File size: Compress to under 1MB. A hero image that loads slowly creates a bad first impression and hurts Core Web Vitals scores. For how to compress it, see how to compress images in Shopify.
If your hero is being lazy-loaded by your theme (a common Lighthouse warning), see Fix Hero Banner Eager Loading in Shopify.
Adding a dark overlay for text legibility
If you have text (headline, subheading, CTA button) overlaid on the hero image, legibility is critical. White text on a light background is unreadable.
Most Shopify themes include an overlay setting directly in the Image Banner section:
- Look for “Overlay color” and “Overlay opacity” fields
- A black overlay at 30-50% opacity is usually enough to make white text readable without obscuring the image too much
- Adjust based on how light your image is
If your theme doesn’t have a built-in overlay option, it can be added via CSS. You can describe the exact style to Fudge, the AI operator for Shopify stores: “Add a 40% dark overlay to the hero image section on the homepage.” Fudge writes the CSS into your theme and shows a draft before publishing.
To add more sections around the hero, see how to add homepage sections in Shopify.
Slideshow vs single image hero
Some themes use a slideshow for the hero, which cycles through multiple images automatically. If you see a slideshow section:
- Each slide has its own image setting - click the individual slide to change its image
- You can add or remove slides from the section
- Autoplay speed and transition style are usually configurable in the section settings
For most stores, a single strong image outperforms a slideshow. Carousels dilute attention and the second or third slide is rarely seen by most visitors. If you’re using a slideshow, consider simplifying to one hero image.
Using video as the hero background
Some themes (Horizon and many paid themes) offer a video background option in the hero section; Dawn’s Image banner doesn’t. Check the section settings for a video or background video field.
If your theme doesn’t support it natively, a video hero background can be added via code. Describe it to Fudge: “Replace the homepage hero background with a looping MP4 video. Keep the headline and CTA button on top. Fall back to the existing image on mobile.” A video adds weight to your most-visited page, so before you publish the draft, ask Fudge for a speed audit of the homepage too.
Hero images on inner pages
The steps above apply to any page with a hero or banner section - not just the homepage. Navigate to the relevant page in the Theme Editor (collections, pages, landing pages) and follow the same process to update the hero image there.
FAQ
What's the right image size for a Shopify hero background?
2560px wide: 2560 x 1440px for a 16:9 banner, or about 2560 x 1280px for a shorter 2:1 banner. Keep file size under 1MB after compression.
Should I use JPEG, PNG, or WebP for the Shopify hero?
A high-quality JPEG or WebP. Shopify's CDN converts and resizes uploads for each browser, so either works. Avoid PNG for hero photos — file sizes are typically 3–5x larger than equivalent JPEG/WebP without visible quality benefit.
Why does my Shopify hero image load slowly?
Three usual causes: (1) the source file is too large (compress to under 1MB), (2) the hero is being lazy-loaded when it shouldn't be (the hero is the LCP element — must load eagerly), or (3) the image is served at a much larger resolution than displayed. Check Network tab for the served file size.
Can I have different hero images for different markets or countries?
Yes via Shopify Markets or template variants. Markets allow per-market storefront customization. For finer control, describe what you want to Fudge ("show this hero image to UK visitors and a different one to US/CA visitors") and it builds a section that conditionally renders based on localization.country.iso_code. Alternative: customer geolocation via JavaScript.
Should I use a hero image or hero video for my Shopify homepage?
Image first for most stores — faster, cheaper, predictable. Video is worth it for lifestyle/apparel/cosmetics where motion adds clear value (texture, fit, ambiance). Always provide a poster image, mute by default (browser autoplay requirement), and consider mobile data costs. Bad video is worse than no video.
