Halloween effects — client preview

Bunting, spiders — alone or together

Hangs from the bottom of the main nav bar, over the top of the hero below. Shown alone and combined, so you can pick just one if together feels busy.

Bunting only

Spiders only

Both together

Bat swarm, drifting ghosts & fog

Full-width hero treatments — pick one, or mix fog with another effect.

Guttering candles & bubbling brew

Sits along the bottom edge of a dark promo strip.

Cobweb corner, bats & low mist

Same image box as the live product page (Bacardi Spiced & Cola 250ml), styled with the real .page-singleproduct__image class from single-product.php, so the effects preview exactly as they'll look on site. The bats and mist need a transparent packshot to pass behind the product — same as the real product images.

Cobweb corner

Bacardi Spiced & Cola 250ml

Bats crossing behind

Bacardi Spiced & Cola 250ml

Low mist

Bacardi Spiced & Cola 250ml

On a real listing page we'd thin the bat swarm back down (one or two per tile, offset per product like the kit default) so a grid of forty doesn't all move in lockstep, and use one effect per grid rather than stacking all three — they're shown at full strength here so each one reads clearly on its own tile.

Bats over the category banner

The same hero-fill treatment, sized down for the narrower banner at the top of a category or search results page.

Transparent overlays on brand colour

Everything below is fully transparent with no background of its own, so it drops onto any coloured box — a save badge, a multibuy tag, a "new in" ribbon — not just the dark panels used elsewhere in this preview.

Jack-o'-lanterns & graveyard

The animation replaces the footer's grey background outright, with the footer's actual content lifted on top so it keeps its normal layout. Pumpkins sit in a gap below the content; the graveyard's moon and clouds sit in a gap above it, with a graveyard photo pinned along the bottom edge, side to side, and a simple rain overlay falling across the whole scene.