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: 2000px wide, compressed to under 500KB.
Your hero image is the first thing most visitors see. Changing it via the Theme Editor takes under a minute. Here’s exactly how to do it.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 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.
Related: Fudge Store Editor.
Related: Change the Homepage Banner in Shopify.
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.
Recommended image specifications
Getting the technical specs right makes a real difference to how the hero looks and loads:
Related: Compress Images in Shopify.
Width: 2000-2400px is standard for full-width hero images. 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 500KB. A hero image that loads slowly creates a bad first impression and hurts Core Web Vitals scores.
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: “Add a 40% dark overlay to the hero image section on the homepage.” Fudge generates the code and shows a draft before publishing.
Related: 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 support a video background for the hero section instead of a static image. Look for a “Video” tab or “Background video” option within the same section settings.
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.”
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
2000–2400px wide is standard. Wider than 2400px adds file weight without visual benefit on most displays. Height varies by aspect ratio: 16:9 for widescreen banners (1125–1350px tall), 2:1 for shorter banners (1000–1200px). Keep file size under 500KB after compression.
WebP first. It's typically 25–35% smaller than JPEG at equivalent quality, and Shopify's CDN auto-converts uploads where supported. JPEG as fallback for photographic content. Avoid PNG for hero photos — file sizes are typically 3–5x larger than equivalent JPEG/WebP without visible quality benefit.
Three usual causes: (1) the source file is too large (compress to under 500KB), (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.
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.
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.
