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.
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:
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.
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.
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.
