Horizon Slideshow Section vs Hero Section: A 2026 Shootout

If you have a homepage banner to ship this week, pick the Hero section. The Horizon slideshow section has an animation bug that hides your text in Firefox and older iPadOS, no way to swap the image between mobile and desktop, and a height control that can make the banner disappear on the setting called "Auto." The Hero section has none of those. Use Slideshow only when you actually need slides that cycle, and patch it before you send traffic to it.

Shopify Staff wrote "we'll soon be investing in bringing improvements to our Slideshow section" on August 14, 2025. Thirteen months later, the improvements they described have not shipped. Horizon 4.1.5 landed on August 31, 2026 and fixed two slideshow bugs: a flashing scrollbar near the pagination dots and a video thumbnail that rendered behind text when the slide layout put media below the copy. Real fixes, minor scope. The animation-timeline browser bug, the mobile image gap, and the object-fit crop are all still there. The Theme Store review split on Horizon overall sat at roughly 35% positive and 39% negative across 191 reviews as of July 2026. That is the context you are building on. If you are picking a section for your homepage banner today, treat "Slideshow section" and "Hero section" as two different products with the same visual footprint, not two flavors of the same one.

What each Horizon section actually is

The Hero section is a single-media banner with a "Show different media on mobile" toggle in the Theme Customizer, a Dynamic height setting, and no reliance on scroll-driven CSS animation. It has none of the known cross-browser rendering failures that the Slideshow section has. Shopify Staff have said the ability Hero has is exactly the ability Slideshow does not.

The Slideshow section is a cycling banner made of individual slide blocks. Since Horizon 3.2.0 (December 2025), it uses the CSS animation-timeline property to drive scroll-linked transitions. It exposes a "Size" setting (Auto, Small, Medium, Large) that controls container height, not image cropping. It has no per-slide mobile image picker. And it does not respect focal points when the slides are dynamically connected to a collection.

Both sections render as full-width bands. Both offer image, text, and button blocks. From the theme editor they look nearly interchangeable. The failure modes only surface once real visitors show up.

Browser compatibility: only one section reliably shows its text

The Horizon slideshow section fails to render text and buttons in Firefox on any version and in Safari on iPadOS earlier than 26. Slides still cycle. The visitor sees a banner with no words on it.

The cause is the animation-timeline: scroll() property that Horizon 3.2.0 introduced. Chrome supports it. Recent Safari (iOS/iPadOS 26 and newer) supports it. Firefox does not. Older Safari does not. The Horizon CSS uses animation-timeline to fade slide content in, and browsers that do not understand the property start the animation at opacity zero and never resolve it. The slide cycles. The text is technically there. It just never becomes visible.

Confirmed by tim_tairli (a Shopify Partner) in Community thread 580679 on December 23, 2025, and verified by the merchant who reported it. The fix he posted is two CSS lines:

.slide__content {
  opacity: 1;
  animation: none;
}

Drop that in Custom CSS, save, and Firefox visitors will see your text again. The trade-off is that you lose the scroll-reveal animation entirely, in every browser. If you want to keep the animation in Chrome while un-hiding text in Firefox, you have to wrap the animation rules in a @supports (animation-timeline: scroll()) block, which needs code-editor access rather than the Custom CSS box.

The Hero section does not use animation-timeline for anything. It renders in Firefox, in old Safari, in every current browser I've tested. If you are the only person QA-ing your homepage and you only test in Chrome (which is the default), you would never see the Slideshow bug. That is the argument for defaulting to Hero.

There is also a second, separate animation failure that surprised me the first time I hit it. When a visitor has the OS-level "Reduce Motion" accessibility preference enabled, Horizon's slideshow gates its transitions behind @media (prefers-reduced-motion: no-preference) and suppresses the animation entirely. A merchant on r/shopify (thread 1n03gz7, January 2025) spent an evening thinking their slideshow was broken before realizing macOS Accessibility settings were the cause. Nothing about Horizon is doing this wrong. It is respecting a legitimate accessibility hint. But if you are QA-ing on a Mac that has Reduce Motion on, do not conclude your code is broken.

Behavior	Hero section	Slideshow section
Renders text in Firefox	Yes	No, without the CSS patch
Renders text in older iPadOS Safari	Yes	No, without the CSS patch
Uses `animation-timeline`	No	Yes, since v3.2.0
Honors Reduce Motion	Standard	Suppresses transitions entirely

Mobile and desktop images: only one section has the toggle

The Hero section exposes a "Show different media on mobile" checkbox. You upload one image for desktop and a second for mobile. The theme swaps them at the breakpoint. That is a native, supported, first-class feature.

The Horizon slideshow section does not have that toggle. It has one image slot per slide, and it uses object-fit: cover at every Size preset. Portrait product photos will be heavily cropped. A landscape hero shot will look right on desktop and get sliced top-and-bottom on phones. Shopify Staff (nicklepine) confirmed the gap on August 15, 2025 in thread 556889: "At the moment, Horizon does not let you set different hero media on mobile vs desktop without custom code." As of this month, that is still the case for the Slideshow section. It applies to the Horizon Collection variants too (Ritual, Fabric, Vessel), not only the base theme.

If your homepage is fashion, home decor, seasonal, or anything where the desktop shot is horizontal and the phone shot is portrait, the difference between these two sections is the entire difference between "your merchandising works" and "your merchandising is silently cropped in half." The community-recommended image dimensions for the Slideshow section are 2:1 landscape, at least 2000x1000 pixels. That spec does not appear anywhere in Shopify's official Horizon docs. It is folklore that hardened after enough merchants asked the same question.

If you truly need cycling slides with per-viewport images, you are looking at custom code. There are three community-tested paths, covered further down.

Height and cropping: where "Auto" means "invisible"

The Slideshow section's Size setting is a fixed-preset dropdown: Auto, Small, Medium, Large. It looks like a dynamic height control. It is not. "Auto" collapses the container to zero, and your banner disappears. Alexandra_Steegmann documented this in Shopify Developer thread 20889 on August 8, 2025 and there is still no fix. Use Small, Medium, or Large.

The Hero section has a Dynamic height setting that does what a merchant would guess Auto does: it adapts to the image aspect ratio. If you upload a portrait image, Hero shows it as portrait. If you upload a 2:1 landscape, Hero shows it as 2:1. Slideshow will crop both to the height preset you chose, always centered.

Focal points do not help. If your slideshow is dynamically connected to a collection (e.g. showing the collection's featured image), the crop is always center-based regardless of the focal point you set on the source image. cee_em traced that in the same developer thread on August 26, 2025.

The community's default crop fix is one line: .slideshow__slide img { object-fit: contain; }. That resolves cropping for landscape images. It also turns every portrait image into a square with letterboxing on the sides. Tracey_Bowen1 hit exactly that regression in thread 418104 in August 2025 after applying the standard "fix." Which is the Horizon slideshow section problem in miniature: the obvious fix half-works, and the half that breaks is invisible until a portrait product photo lands in the slot.

Behavior	Hero section	Slideshow section
Native mobile image toggle	Yes	No
Dynamic height	Yes	No, fixed presets only
"Auto" height is safe	Yes	No, collapses to zero
Focal points on collection-connected images	Standard	Ignored, always center-cropped

The three community workarounds, ranked by how much rope they give you

If your homepage design really does need cycling slides, and you have accepted that the native Slideshow section will not get you there, the community has converged on three paths. I have used all three in real audits. Each one buys you a different set of trade-offs.

Option 1: dual sections with a CSS show/hide. Add two banner sections to your homepage: one with the desktop image, one with the mobile image. Grab each section's ID from the theme editor URL, then hide each outside its target viewport with a media query in Custom CSS. Zero code editing. It is the fastest path.

The trade-off is fragility. Any theme update that renames the section wrapper class will silently break the CSS. Nothing errors out. The mobile banner just starts appearing on desktop, or the desktop banner starts appearing on mobile, and you will find out from a customer email. Test the homepage in both viewports after every Horizon update. This approach appears in threads 572031, 562686, and several others as the fastest workaround.

Option 2: patch blocks/_slide.liquid to add a mobile image picker. This is the newest and, in my read of the threads, currently the best low-effort path for a merchant with light developer comfort. Ploqo posted the exact steps in thread 677002 on September 6, 2026: open Edit code, open blocks/_slide.liquid, wrap the image render in a conditional <picture> element, add a checkbox and an image_picker to the schema. Two merchants (Gloomy and ST2026) confirmed it working within three days. Recommended mobile image size: roughly 1080x1080.

Trade-off: every future Horizon update that touches blocks/_slide.liquid overwrites the patch. Horizon 4.x updates have modified that file. Keep a copy of the patched version somewhere outside the theme (a Gist, a text file, your notes app) so you can re-apply it after each update. If you are on Horizon and you plan to stay current, treat this as a maintenance obligation of about ten minutes per Horizon release.

Option 3: build a custom Liquid section from scratch. FangandFiber published a full custom slideshow section in Community thread 572788 in October 2025 that supports separate desktop and mobile image pickers per slide, configurable autoplay interval, configurable fade duration, pause-on-hover, AVIF/WebP format preferences, swipe gestures, and lazy-load options. It lives in sections/. Theme updates do not touch it.

Trade-off: it is a real Liquid section, not a snippet, and you need to be comfortable enough with Liquid to debug it if a Horizon breaking change bumps something it depends on. If you are not sure whether you are that comfortable, you are not. That is fine. Options 1 and 2 exist.

What about a slideshow app? sadik_ShopiDevs recommended Slider Revolution & Sections in thread 630964 (June 2026) as the commercial alternative. It works. It also adds a subscription and one more app to your load budget. FangandFiber, who is a merchant not a developer, wrote in thread 572788: "I want to avoid apps wherever possible." That is a completely defensible position on Horizon; you can build a better slider yourself in an afternoon than most of the paid apps will give you, and yours will not ping a third-party CDN on every render.

I have not tested the mobile CTA double-tap bug (thread 421821), where the button requires a first tap to enter a focus state before a second tap navigates. It is reported specifically on iOS. There is no confirmed community fix. If your slideshow relies on a mobile button as its primary conversion, run a manual test on a real iPhone before you launch, not on Chrome DevTools' device emulation. If you find the double-tap, you have a real problem the CSS patches above will not solve, and that is the right moment for a 15-minute expert chat rather than another round of stackoverflow searches.

What we'd actually pick

For most homepages, pick the Hero section. Use it once for the top banner. If you want visual variety, stack a Hero, then a collection block, then a second Hero further down. That is a homepage layout that ships working on the first render in every browser without a CSS patch. It has the mobile image toggle. It has the dynamic height that "Auto" pretends to be. It is the section Horizon actually finished.

Pick the Horizon slideshow section only if you have decided that cycling slides are core to the design. In that case:

Apply the two-line CSS patch (.slide__content { opacity: 1; animation: none; }) before you send traffic to it. Without this, half your Firefox users see a blank banner.
Choose one image aspect ratio and use it for every slide. 2:1 landscape at 2000x1000 or larger is the community-hardened default. Mixing portrait and landscape images inside the same slideshow will look broken no matter which crop rule you apply.
Never set height to Auto. Use Small, Medium, or Large.
If you need per-viewport images, decide between the three workarounds above by how much update-fragility you can tolerate. Dual sections is fastest, _slide.liquid patch is the current sweet spot for most merchants, and a custom Liquid section is the answer if the homepage banner is central to the store and stability matters more than an hour of work.
QA on a real iPhone, a real iPad, and Firefox on a laptop. Not just Chrome. The Slideshow section fails asymmetrically across browsers, and you cannot see the failure from the theme editor.

If you want a wider inventory of what breaks in this theme after you install it, I keep a running list of Horizon audit findings that overlaps some of this ground and adds the header, breadcrumb, and variant-picker bugs a fresh store will hit next.

One concrete action to take today: open your live store in Firefox on any laptop. Load the homepage. Look at the top banner. If your headline is missing, you are running the Horizon slideshow section and it is broken in Firefox right now, whether or not you knew. Paste the two-line CSS above into Custom CSS and refresh. That is the smallest useful thing you can do to your Horizon store this afternoon.