Snug Gallery / Guides

Gallery slider autoplay in Shopify: interval, pauses, motion

How slider autoplay works in Snug Gallery: the 2 to 10 second interval, when it pauses, why reduced motion skips it, and how hover and video motion fit in.

A slider that advances by itself is one of those features that is either exactly right or quietly ruining the page. Right, when a shopper lands on a lookbook and the hero image changes before they decide whether to scroll. Wrong, when the slide moves while they are reading a caption, or when the motion makes someone feel sick, or when the page keeps animating in a background tab and the laptop fan comes on. This guide explains how the slider autoplay in Snug Gallery is built around those failure cases: what the interval setting does, every situation in which the slider stops moving, why some shoppers never see it move at all, and how the other motion settings (hover effects and muted video autoplay) follow the same rules.

Where autoplay lives and what it applies to

Autoplay belongs to the Slider layout only. Open the gallery block in the theme editor, set Layout to Slider, and two settings appear further down: Slider: autoplay, a checkbox that is off by default, and Slider: interval, a range from 2 to 10 seconds that defaults to 5. The Carousel layout, which shows several items side by side with arrows, has no autoplay. It is built for browsing a row of products, not for a hero, and a row that scrolls on its own tends to move the thing you were about to click.

The slider itself shows one item per view, with arrows, a dot for each item, and wrap-around: the arrow after the last slide takes you back to the first. The left and right arrow keys move it when the track has focus. Autoplay simply calls the same next-slide function on a timer, so a slide that advances by itself looks identical to one you clicked.

Choosing the interval

The range is capped on purpose. Below two seconds a slide is gone before anyone has read a caption or registered the product, and the gallery starts to feel like a loading animation. Above ten seconds most shoppers have scrolled past, so the motion costs you a little attention for nothing. Five is a sensible default for product photography; for images with captions that need reading, seven or eight is usually better.

A useful way to pick: open the gallery on a phone, start reading each caption out loud at a normal pace, and set the interval to the longest one plus a second. If that number is over ten, the captions are too long for a slider and belong in a grid with the caption underneath.

Every time the slider stops moving

Autoplay is designed to get out of the way the moment a shopper shows interest. The timer pauses when the pointer enters the gallery and restarts when it leaves. On a touch screen it pauses the moment a finger touches the slider and resumes when the finger lifts, so a shopper swiping through the slides is never racing the timer. If anything inside the slider receives keyboard focus, an arrow button, a dot, a video, the timer pauses until focus leaves, which keeps the slides still for someone navigating with a keyboard or a screen reader.

It also stops when the page is not visible. Switch to another browser tab, minimise the window, or lock the phone, and the timer stops; return and it starts again. This is the difference between a page that uses a little battery while open and one that keeps repainting images in the background for an hour.

Finally, with fewer than two items there is nothing to rotate, so the arrows are hidden and autoplay does nothing, even if the box is ticked. A gallery that is temporarily down to one image, because the others were removed or are waiting on approval, simply shows that image.

Why some shoppers never see it move

Every modern operating system has a setting to reduce motion. On an iPhone it is under Accessibility, Motion; on Windows it is Show animations in Windows; on a Mac it is Reduce motion. Browsers expose that choice to web pages, and Snug Gallery honours it: when reduced motion is on, autoplay is skipped entirely, no matter what the theme setting says. The shopper still has the arrows, the dots and the keyboard, and the slide changes jump into place instead of gliding, because the smooth scroll between slides is turned off under the same preference.

This is not a bug to design around. People turn that setting on because moving content makes them dizzy, distracted or nauseous, and a merchant has no way of knowing who they are. The honest answer is that autoplay is a nice-to-have for the majority and a problem for a minority, so the app gives the majority the motion and the minority the stillness, without asking either of them to do anything.

If you are testing and the slider does not autoplay for you, check this setting first. It is a common surprise on a Mac that has had Reduce motion switched on for years.

Hover effects: motion that only happens on request

The Hover effect setting applies to the Grid, Masonry, Justified and Carousel layouts and offers None, Zoom, Lift, Shine and Grayscale to colour. These are the other source of movement in a gallery, and they follow a different rule from autoplay: nothing happens until the shopper does something. A zoom that only runs under the pointer is motion the shopper asked for, which is why these effects stay available under reduced motion while autoplay does not.

Two details are worth knowing. On a touch screen there is no hover, so the effects do not appear at all, and the gallery should look finished without them. And while a video tile is playing, the zoom and grayscale effects are suppressed on that tile, so a playing video is never scaled or desaturated under the pointer.

Shine, the diagonal highlight that sweeps across the image, is the one effect that is a true animation rather than a change of state, and it runs for under a second on hover. If your brand leans towards calm, Lift (a small rise and a shadow) is the least busy option that still confirms the tile is interactive.

Muted video autoplay

The third motion setting is Autoplay uploaded videos muted. Off, which is the default, a video tile shows its poster frame and plays when clicked, in the lightbox, with sound. On, uploaded videos play in the grid itself, muted and looped, which is the only form of autoplay browsers permit without a tap. Clicking still opens the full player with sound.

The trade-off is bandwidth. Every video in the gallery starts loading on page view, not just the one a shopper clicks, so a lookbook with twelve clips is twelve downloads before anyone has chosen anything. Keep the clips short, keep the number small, and note that YouTube and Vimeo videos always show their poster regardless of this setting, since an embedded player cannot be loaded silently in a tile. The video guide covers hosting choices in more detail.

A short checklist before you ship autoplay

Watch the slider on a phone with your thumb resting on it and make sure it stays still until you lift. Open the page, switch tabs for a minute, come back and confirm the slide you left is the slide you return to. Turn on reduced motion on your own device and check the gallery still works with arrows and dots. Read the longest caption against the interval. If all four pass, the autoplay is doing its job: moving when nobody is looking closely, and stopping the moment someone is.

Snug Gallery treats motion as something the gallery offers rather than something it imposes. The slider moves for shoppers who are not interacting, stops for those who are, and never starts for those who have asked their device for stillness. If you want a gallery that respects that line out of the box, install Snug Gallery and try the Slider layout with autoplay on a lookbook page.

Frequently asked questions

Why does the slider autoplay for some visitors but not for me?

Your device probably has reduced motion turned on. Snug Gallery skips autoplay when the browser reports that preference, and switches slide changes from smooth to instant. Turn the setting off in your OS accessibility options to see the behaviour most shoppers get, then turn it back on if you prefer it.

Can I set the slider interval below two seconds?

No. The range is 2 to 10 seconds. Faster than two seconds a slide changes before a caption can be read and the gallery looks like an animation rather than a set of images. If you want a rapid, looping feel, a short muted video tile does that job better than a fast slider.

Does autoplay keep running when the page is in a background tab?

No. The timer stops whenever the page is hidden, including a switched tab, a minimised window or a locked phone, and starts again when the page is visible. It also pauses while the pointer is over the slider, while a finger is touching it, and while anything inside it has keyboard focus.

Can the Carousel layout autoplay too?

Not at the moment. Autoplay is specific to the Slider layout, which shows one item at a time. The Carousel shows several items in a row for browsing and scrolls only when the shopper uses the arrows or swipes, because a row that moves on its own tends to shift the item someone is about to tap.

More guides