Effects settings

The Effects settings hold the bottom edge fade: a soft blur along the bottom edge of the screen. Content blurs a little as it scrolls under that edge, so the page seems to continue below. To find the settings, open the theme editor. In the editor sidebar, click Theme settings, then select Effects.

Effects sits between Layout and Animations in Theme settings, and the fade shows along the bottom edge of the preview.

Effects group in Theme settings with Show bottom edge fade on and Edge fade height at 80 px

Setting

What it does

Show bottom edge fade

Turns the blur on or off. On in all three styles. The fade adds no color, and visitors can still click what is under it.

Edge fade height

How tall the blurred band is, from 60 to 240 px. The value is the height on a window 900 px tall. Shorter and taller windows get a band in proportion, so it takes up the same share of the screen. Shows when Show bottom edge fade is on.

Where the fade does not show

  • On screens narrower than 1,000 px, such as phones and most tablets.

  • For visitors whose device is set to reduce motion.

  • While a Video section with a Scroll effect other than None, or a Featured collection with the Pinned row layout, holds the whole screen. The fade returns when the visitor scrolls past it.

  • Over a Video section while its video plays after a visitor clicks play. The video stays sharp.

  • Over the footer, which sits above the fade.

Was this article helpful?