Key takeaways
- Change your homepage banner in the Theme Editor: Online Store → Themes → Customize → Homepage → click the banner section.
- You can update the image, overlay text, button text, button link, and colour scheme without any code.
- For slideshow banners, each slide is a separate block - edit them individually.
- Background-video banners need a theme that supports them, an app or custom code.
To change the homepage banner in Shopify, go to Online Store → Themes → Customize, click the Image banner or Slideshow section, then replace the image, text and button and save.
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 homepage banner in Shopify
Step 1. Go to Shopify Admin → Online Store → Themes → Customize.
Step 2. The Theme Editor opens on your homepage by default. If it opens on a different page, use the page selector dropdown at the top centre of the editor to navigate to the homepage.
Step 3. In the left sidebar, find the banner section. It may be called Image banner, Hero, Slideshow, or Full-width image. The exact name depends on your theme.
Step 4. Click the section name to open its settings.
Step 5. Update the elements you need:
- Image - click the image thumbnail to replace it from your media library or upload a new file
- Overlay - adjust the overlay color and opacity so text stays readable over the image
- Text blocks - click the Heading or Subheading blocks to edit the copy
- Button - click the Button block to update the label and link destination
- Colour scheme - if your theme uses color schemes, select one that suits the new banner
Step 6. Save.
If you only need to swap the image, see how to change the hero image in Shopify.
How to customise a home page banner
The most common customisations beyond swapping the image:
Changing text colour. Click the Heading or Text block → look for a text colour setting, or use the section’s Color scheme option to switch to a lighter or darker scheme.
Adjusting the overlay. Most banner sections have an Overlay opacity slider. Increase it to make text more readable over busy images; decrease it to let the image show through more clearly.
Changing the button style. Look in the Button block settings for a style option - “Primary”, “Secondary”, “Outlined”. This controls whether it’s filled or outlined.
Changing banner height. Look in the section settings (not a block) for a Banner height or Section height setting. Options are usually “Small”, “Medium”, “Large”, or a custom pixel value.
How do I change the home page banner in Shopify for a slideshow?
If your banner is a slideshow (multiple rotating images), each slide is a separate block inside the section.
In the left sidebar, expand the slideshow section. You’ll see individual slide blocks listed below it. Click each slide block to edit that slide’s image, text, and button independently.
To add a new slide: click Add block at the bottom of the section’s block list and select the slide block type.
To reorder slides: drag the blocks up and down in the sidebar.
How to add a video banner to Shopify homepage
Many themes, including Dawn, have a Video section in the Theme Editor’s section picker (click Add section at the bottom of the sidebar). In Dawn it’s a click-to-play embed, not a background video.
For a full-width video background banner - a video playing silently behind overlay text - this is a more advanced component. A background video behind overlay text is not part of Dawn; some newer themes, such as Horizon, and many paid themes include it.
If your theme doesn’t support video banners natively, you have two options:
- A Shopify app that adds video section functionality
- Custom code via Fudge: “Add a full-width video background banner to the homepage with a headline and CTA button over it.”
To rework the whole page, see how to rebuild your Shopify homepage.
Banner image best practices
Use these specs to keep your banner fast and sharp:
| Spec | Recommended |
|---|---|
| Dimensions | 2560 x 1440px |
| File size | Under 1MB |
| Format | WebP or JPEG |
| Mobile image | 750 x 1000px (portrait crop) |
Always check the mobile preview in the Theme Editor before saving. Banner images often crop in unexpected ways on smaller screens. If your theme supports a separate mobile image field, use it. For why banners crop on mobile and what to do when your theme has no mobile field, see our Shopify image sizes guide.
Using Fudge to redesign your homepage banner
If you want more than a simple image swap - a new layout, added conversion elements, a different structure - Fudge, the AI operator for Shopify stores, builds it from a description:
“Redesign my homepage banner with a split layout: product image on the right, headline and two bullet points on the left, with a full-width background colour instead of an image.”
Fudge generates the code as a draft in your theme. Review it in the preview and publish when it’s right. If you’re not sure the banner is the problem, give Fudge a conversion goal instead: it looks for the pages where shoppers drop off and ranks the fixes before it builds anything.
FAQ
Should my homepage banner be a slideshow or a single image?
Single static usually wins on conversion. Slideshows split attention across multiple messages, slow first paint, and most shoppers don't see beyond the first slide before scrolling. Use a slideshow only if you genuinely have multiple equally-important campaigns running simultaneously.
What banner height converts best in Shopify?
A medium banner (around 60–80% of viewport height) typically beats a full-viewport banner. Full-screen banners hide the rest of your content below the fold, hurting scroll depth and product discovery. Apparel and lifestyle brands often use larger banners; stores with many products often use smaller ones.
Can I schedule a homepage banner to appear on a specific date?
Not natively in the Theme Editor. The cleanest approach: describe the launch date to Fudge and it generates a date-conditional Liquid wrapper that flips the banner on at your timestamp — no manual swap needed on launch day. Alternative: a Shopify scheduling app that controls section visibility by date, or duplicate the theme and publish manually.
Why is my homepage banner button cut off on mobile?
The banner height isn't enough for the heading + subheading + button to fit. Either reduce text length, switch to a "Small" banner height on mobile (some themes have separate desktop/mobile height settings), or move the button below the banner using a separate section.
Should homepage banner videos autoplay?
Yes, with caveats. Browsers require videos to be muted to autoplay — design for sound-off viewing. Use only for ambient backdrops where the message is in the overlay text, not the audio. Browsers block autoplay with sound, so an unmuted video simply won't start.
