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.
Your hero image is the first thing visitors see. Changing it is one of the most impactful visual updates you can make, and it takes under two minutes in the Theme Editor.
Why you can trust us
Jacques has 15+ years of Shopify development experience. We built Fudge — an AI storefront editor used by hundreds of Shopify stores, with a 5.0 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.
How do I change my photo on Hero?
If you can’t find the hero section in the sidebar, try clicking directly on the hero image in the canvas preview on the right side. This selects the section and opens its settings in the left panel.
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 | WebP (preferred) or JPEG |
| 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.
Use WebP. Shopify automatically converts uploaded images to WebP for supported browsers, but starting with a WebP source gives the best results.
How to set a separate mobile hero image
Many themes support a dedicated mobile image for the hero section. This matters because a landscape 2560 x 1440px image often crops awkwardly on portrait mobile screens.
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
Hero image text (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:
“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 generates the changes as a draft in your theme. You review and approve before anything goes live.
