How to Change the Homepage Banner in Shopify (2026)

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.
• Video banners and animated sections require code or a Shopify app.

Your homepage banner is your store’s first impression. Updating it for a new campaign, a seasonal promotion, or a brand refresh is a routine task 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 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.

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

Standard Shopify themes like Dawn support video sections natively. Look for a Video section type in the Theme Editor’s section picker (click Add section at the bottom of the sidebar).

For a full-width video background banner - a video playing silently behind overlay text - this is a more advanced component. The Dawn theme includes this as part of the Image banner section (look for a “Video” tab alongside the image selector). Other themes may not 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.”

Banner image best practices

Use these specs to keep your banner fast and sharp:

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.

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 - describe it to Fudge:

“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. Review and publish when it’s right.