Add a cursor-following image trail

The Trail effect block displays images that follow the cursor as visitors move their mouse across a section. You add it in the Shopify theme editor, supply its images through nested Trail effect image blocks, and tune how the trail looks with the block's settings.

Add the Trail effect block

The effect is a theme block, so it lives inside a section on your page. In the theme editor, open the section where you want the effect and add the Trail effect block to it.

Choose the trail images

Add a Trail effect image block for each image you want in the trail, and set its Image. When an image block has no image set, a placeholder is shown instead.

Adjust the trail appearance

The block's settings control how the trail looks. Set Mode to Trail for images that follow the cursor, or Cannon for a burst of images that fires when a visitor clicks. The trail-specific settings appear only while Trail is the active mode:

• Trail length — the number of images in the trail, from 1 to 20 (default 10).

• Trail delay — the delay between images in milliseconds, from 10 to 100 in steps of 5 (default 30).

• Trail fade effect — when the trail fades away: Fade after time delay or Fade after trail completion (default Fade after time delay).

• Trail Image Width (rem) — the width of each image, from 1 to 20 rem (default 6).

For the full list of settings and defaults, see the Trail effect block reference.

Preview on desktop

The trail is driven by mouse movement, so it only appears when a visitor moves a mouse cursor. On a touch device there is no mouse cursor, and the trail is not driven by finger movement, so it stays inactive there. Preview the effect in a desktop browser to confirm how it looks, and use Hide block on desktop / on mobile to control where the block appears.

FAQ