A header slideshow, the rotating set of photos at the top of a home page, is one of the most requested and least effective things on a small business website. The usability research is old and unambiguous: Nielsen Norman Group’s study watched a user fail to find an offer that was in 98-point type on the home page, because it was on a rotating panel that moved before she read it. Slides after the first are seen by a small fraction of visitors, auto-rotation reads as advertising and gets ignored, and every extra slide is another large image to load before the page is usable. So the honest answer to “should your homepage have a header slideshow” is no for a service business, and a qualified yes for a photographer or maker whose work is the message, if the slideshow is built the way this post describes. Below: when it helps, when it hurts, how to build one on Squarespace 7.1 that does not tank the page, and the alternatives that do the job the slideshow was meant to do.
What is a header slideshow for, really?
| The reason people want one | What usually happens | Better answer |
|---|---|---|
| “We could not pick one photo” | Visitors see the first; the rest cost load time | Pick one; put the others in a gallery section below |
| “We have three messages” | Each is read by a third or fewer; the important one is missed | One message in the hero, the other two as sections beneath |
| “It looks alive” | Motion draws the eye away from the headline and button | A single still with a subtle video or gradient background |
| “Our work is visual and varied” | Legitimate | A slow, manual or slow-auto slideshow of the best five, with one headline that does not move |
Why do header slideshows hurt most sites?
- Attention: visitors decide in seconds, and a moving panel spends those seconds on motion instead of on what you do and where the button is; the reasons design matters start with that first screen.
- Banner blindness: rotating panels look like adverts, and adverts get ignored.
- Speed: five hero images at 2500 pixels is five downloads before the page settles, and the largest-contentful-paint metric that Google measures gets worse with each slide.
- Mobile: slides crop unpredictably, swipe gestures fight with page scrolling, and text on slides becomes unreadable.
- Accessibility: auto-moving content is hard for some visitors to read and is flagged by accessibility guidelines unless it can be paused.
- Maintenance: slides go stale; a “Summer offer” slide in November is a common sight and a classic design mistake.
When is a header slideshow the right choice?
- The images are the product: photographers, illustrators, interior designers, florists, fashion. The slides show range; the headline stays put.
- Manual or very slow: arrows or dots the visitor controls, or auto-advance no faster than six to eight seconds, with the first slide the strongest.
- Five images or fewer, each compressed to under 300 KB at 2500 pixels wide, per the banner size rules.
- Text and button outside the slideshow or fixed over it, never changing per slide.
- A still fallback on mobile, or a single image on phones.
How do you add a header slideshow on Squarespace 7.1?
Squarespace has no slideshow header setting; the standard method, which Big Cat Creative documents, is a gallery section styled to behave like one:
- Edit the home page, click Add Section at the top, choose Gallery, and pick the Slideshow layout (full-bleed or simple).
- Upload your five images, sized and compressed. Set the same aspect ratio for all so nothing jumps.
- In the section’s Design settings, set autoplay (slow) or off, arrows or dots on, and the section height (Large or full).
- Add the headline and button in a short block section directly beneath the gallery (gallery sections do not take blocks), or pull a Fluid Engine section up over the slideshow with negative top margin in CSS if the text must sit on the images.
- Optional CSS to set the slide speed and hide arrows on mobile:
/* hide the arrows on mobile; class names differ between Simple and Full slideshow layouts */
@media (max-width: 767px) {
section[data-section-id="YOUR-ID"] .gallery-slideshow-control-btn,
section[data-section-id="YOUR-ID"] .gallery-fullscreen-slideshow-control-btn { display: none; }
}Section IDs come from the block ID guide. Check the result on a phone before publishing; if the slides crop badly there, replace the section with a single image on mobile using the per-device visibility settings.
What are the alternatives that do the job better?
| Goal | Alternative | Why it works |
|---|---|---|
| Show range | One hero image plus a gallery grid or masonry section directly below | Every image is seen, none costs the first screen |
| Life and motion | A short video background, or a still with a subtle gradient | Motion without stealing the headline; see the video background post |
| Several messages | Stacked sections, one message each, in priority order | Every message read, in the order you chose |
| Featured work | A “Latest project” section that you swap monthly | One strong image, always current |
| Promotions | The announcement bar | Visible on every page, dismissible, never hides the hero |
The gallery-below-hero pattern is what most photography sites I build use: one decisive image with the headline and button, then the range immediately underneath where it costs nothing. The video background guide covers the motion option and its limits.
How do you decide?
- If the business sells a service, use a single image or video and put the words first.
- If the business sells what the images show, a slow or manual slideshow of five can work, with the words fixed.
- Either way, test on a phone and run PageSpeed Insights; a hero that takes more than three seconds to settle loses more visitors than any slide gains.
- If in doubt, single image. Nobody has ever left a site because the hero photo did not rotate.
On Squarespace and Showit projects the slideshow request comes up in nearly every first meeting, and a single strong image with a gallery below wins the comparison almost every time the client sees both side by side.
Frequently asked questions
For most service businesses, no. For photographers and makers whose images are the message, a slow or manual slideshow of five images with a fixed headline beneath can work, provided the page is checked on a phone and for speed.
Usability research has found auto-rotating panels get ignored or cause users to miss content, and each slide adds load time. A single clear image with a headline and button converts better on almost every small business site.
Add a Gallery section at the top of the page with the Slideshow layout, upload up to five compressed images at the same ratio, set slow autoplay or manual controls, and overlay or place beneath it a fixed headline and button.
Five or fewer, each under about 300 KB at 2500 pixels wide, with the strongest first, because many visitors only ever see the first slide.
One hero image with a gallery grid directly below, a short muted video background, stacked sections for multiple messages, a featured-project section swapped monthly, or the announcement bar for promotions.
Moving content that cannot be paused is a problem for some visitors and is flagged by accessibility guidelines. If you use a slideshow, keep it manual or slow with visible controls, and never put essential text only on a slide.
