How to Add an Image to Shopify Homepage (2026 Guide)

How to add an image to a Shopify homepage happens in the theme editor, not in Products. Homepage heroes, slideshows, and image banners are theme sections. Product photos are separate assets edited under each product.

This guide covers both: adding homepage visuals in the theme customizer, and keeping product images sharp in sections that pull from your catalog. Pixly optimizes product media, not theme banner files.

Before you start: homepage vs product images

If you need to change a product photo shown in a featured collection block, edit the product in Products → Media, not the theme image picker.

How to add an image to your Shopify homepage (theme editor)

1. In Shopify admin, go to Online Store → Themes.
2. Click Customize on your live theme (or a duplicate if you prefer to preview first).
3. On the homepage preview, click the section you want (e.g. Image banner, Slideshow, Hero).
4. Click the image block inside that section.
5. Click Select image → Upload or choose from Files.
6. Adjust overlay, heading, button, and mobile layout if your theme supports it.
7. Click Save.

Repeat for each slide in a slideshow section. Most themes let you add, remove, or reorder slides from the left sidebar.

Recommended homepage image sizes

Homepage banners are wide, not square. Sizes vary by theme. Common targets:

Check your theme documentation for exact specs. Shopify Help covers theme image settings.

Product images in collection sections should follow 2000 × 2000 px square rules from our image size guidelines.

How to add a slideshow image on the homepage

1. Customize theme → select Slideshow section.
2. Click Add slide (or duplicate an existing slide).
3. Upload the slide image and set alt text (describe the slide for accessibility and SEO).
4. Add optional heading, subtext, and button link.
5. Set slide order and autoplay settings if available.
6. Save.

Use consistent aspect ratios across slides so the slideshow does not jump between transitions.

Product images on the homepage (featured collections)

Homepage Featured collection sections display product media from your catalog. To update those thumbnails:

1. Go to Products → open the product.
2. Edit Media (replace, reorder, or add alt text).
3. Save. The homepage updates when the theme pulls fresh product data.

For bulk product image fixes (WebP, alt text, square crop), use Pixly on product media, then verify the homepage collection block:

Sync history confirms optimized product files reached Shopify. Homepage banner files uploaded in the theme editor are outside Pixly's scope.

Mobile homepage images

Themes often serve a separate mobile crop or stack sections vertically. After saving:

1. Use the mobile preview toggle in the theme editor.
2. Check that text remains readable and faces are not cropped out.
3. Test on a real phone. See best image size for Shopify mobile.

Lazy load homepage and slideshow images

How to lazy load images in Shopify on the homepage depends on your theme. Many Online Store 2.0 themes lazy-load slides after the first or defer off-screen images automatically.

Theme editor steps (when available):

1. Customize → select Slideshow or Image banner section.
2. Check section settings for lazy load or performance options (not all themes expose this).
3. Keep the first slide optimized and sharp. It is often the LCP element on the homepage.
4. Compress wide banner files before upload. Lazy load does not fix a 2 MB hero.

Advanced (Liquid): Developers add loading="lazy" to image tags below the fold. Do not lazy-load the primary hero if PageSpeed flags LCP. Full speed context: optimize Shopify store speed.

Product images in featured collection blocks follow product media rules, not theme lazy-load settings alone.

Bottom line

How to add an image to a Shopify homepage means using the theme customizer for heroes and slideshows, and Products → Media for catalog photos shown in featured sections.

Install Pixly on Shopify for product image SEO and WebP across your catalog. How to change images · Pricing

---

Written by Matteo, founder of Pixly. Questions? hello@getpixly.app