Slidify 2.0: art direction, scheduling, and 40% less JavaScript

Slidify 2.0 is live for all stores. This release is mostly a rewrite: same features, substantially less code, plus the two things merchants asked for most.

Art direction per breakpoint

The most requested feature by a wide margin. A hero designed for a 1440px viewport rarely survives being cropped to 390px — the product drifts out of frame and the headline runs to four lines.

You can now set a different image crop, headline, subheadline and call to action per breakpoint. Three breakpoints are available: mobile, tablet and desktop. Anything you do not override inherits from desktop, so existing slides continue to work untouched.

Under the hood this uses <picture> with media conditions, so the browser downloads exactly one image — the correct one. It does not download the desktop version first and swap.

Campaign scheduling

Slides can now have a start and end time. Set a campaign up on Tuesday, have it go live at 9am Friday and expire on Sunday night without touching the store.

Two details worth knowing:

• Times are stored as UTC instants and rendered in your store’s timezone in the editor. A sale that ends at midnight in your timezone ends at the same real moment for every shopper.
• Scheduling is evaluated server-side at render. An expired slide is not in the HTML at all, rather than being hidden with CSS after it downloads.

You can also target slides by country, device type or customer tag. A returning-customer slide and a first-visit slide can occupy the same position.

40% less JavaScript

The runtime went from 47KB to 28KB compressed. Most of that came from three changes:

Dropped the animation library. Every transition is now a CSS transform or a Web Animations API call. Both are hardware-accelerated and both were already in the browser.

Removed the touch-gesture polyfill. Pointer Events are supported everywhere we support, and the native implementation feels better than the polyfill did.

Server-rendered slide one. The first slide’s markup is now emitted into your theme by Liquid rather than being constructed by JavaScript on load. This is the change with the largest real-world effect: the LCP element is in the initial HTML response, so it starts downloading before our script has even been parsed.

On a test store on simulated 4G, the homepage LCP improved from 2.9s to 1.8s with no other change.

Accessibility

The full set, all on by default:

• Arrow-key navigation between slides when the slider has focus
• A roving tabindex so the slider is one tab stop, not one per slide
• aria-live="polite" announcements on slide change
• Auto-advance pauses on hover, on focus, and permanently after any manual interaction
• Full prefers-reduced-motion support — transitions become instant cuts rather than being disabled entirely, so the slider still works

The pause-permanently-after-interaction behaviour is a change from 1.x, where auto-advance resumed after a delay. Testing showed people were being interrupted mid-read by a slide they had deliberately navigated to.

Zero layout shift

Every slide now declares its aspect ratio before its image loads. Combined with the server-rendered first slide, a Slidify slider now contributes 0.00 to CLS in our test suite.

Migration

None required. 2.0 shipped as a progressive rollout and every 1.x configuration was migrated automatically. Your slides, presets and settings are as you left them.

If you customised the slider with your own CSS, check it. Some internal class names changed during the rewrite. The public hooks — .slidify-slide, .slidify-dots, .slidify-track — are unchanged and remain the supported way to style it.

What is next

Working on now:

• Video slides with a poster frame and no autoplay-with-sound, ever
• A/B testing between two slide sets with significance reporting
• Metaobject support so slides can be managed as structured content alongside the rest of your store data

If you have something you need, tell us. The art direction feature in this release existed because eleven merchants asked for the same thing in six weeks.

Slidify is free to install with a free plan that covers most stores. Have a look.