How to Create a Stacking Effect in Showit (Free Canvas + Tutorial)

In this Showit design tutorial, we’ll walk you through how to build a stacking effect in Showit. It feels dynamic, layered, and editorial — but it’s surprisingly simple to build inside Showit once you know how the canvas settings work.

If you’ve been wanting to level up your Showit site with a photo-forward section that actually feels different — this tutorial is for you.

In the video below, I’ll walk you through the exact setup. But if you prefer to read (or want to reference this later), we’ve included written instructions, screenshots, and a free share key so you can explore it on your own time.

Let’s get into it.

What You’ll Be Creating

This effect includes:

• A primary content section that stays pinned while you scroll
• A series of images that stack on top as the user scrolls
• A smooth, layered feel that draws your eye down the page
• Fully responsive behavior on desktop and mobile

Why We Love The Stacking Effect in Showit

This photo stacking section is perfect for:

• Portfolio intros
• Showit template demos
• Brand storytelling moments

It adds movement without requiring animation or code. It feels high-design without being high effort.

Plus: it’s fully customizable, so you can plug in your own visuals and use it again and again.

How to create a stacking effect in Showit

1. Start with Your Primary Canvas (The “Sticky” Section)

This is the section you want visible behind all the stacking images—usually a headline or intro text.

In the canvas settings:

• Canvas Type: Set to Window Height
• Sticky: Set to Top on Scroll
• Stacking Order: 0 (this ensures it sits behind everything else)

This pins the canvas in place as other elements scroll over it.

2. Add Your Stacking Canvases (One for Each Image)

For each image you want to appear as users scroll:

In the canvas settings:

• Canvas Type: Normal
• Sticky: Top on Scroll
• Stacking Order: 1 (higher than the base canvas)
• Canvas Background: Transparent (this is crucial!)

Why transparent? If you add a background color, it will block out your base canvas and ruin the layered effect. You want the image to feel like it’s floating in, not on a solid block.

3. Fine-Tune the Image Placement

This part is a bit of trial and error.

• Drag your image into the stacking canvas
• Preview the site
• Adjust placement based on where it lands on scroll
• Repeat until the effect feels right

Pro Tip: Keep your key content (like text) in mind. You don’t want your stacked images overlapping anything important.

4. Mobile Experience

We recommend limiting the number of stacked images on mobile to avoid scroll fatigue. In our demo, we only kept the first three image canvases active on mobile.

On mobile:

• Match your stacking and sticky settings from desktop
• You can use Window Height on some of the stacking canvases for added control
• Test thoroughly to make sure things don’t feel too long or awkward

5. Canvases Beneath

Whatever canvas comes after your stacking section (maybe an About section or gallery) needs a higher stacking order than your stacked images.

Set it to:

• Stacking Order: 2 or higher
  (And same goes for every section beneath it!)

If not, you risk weird floaty layers sitting over your content later in the page. And nobody wants that.

---

This kind of canvas is the perfect example of doing more with less.

It feels high impact, but it’s actually super simple once you understand how the settings work. Whether you’re building out your own site in Showit or piecing together a new Showit template, this effect adds just the right amount of movement and magic. Play around with it, make it yours — and if you haven’t already, grab the free share key above so you can see how it all comes together!

Psssst — want more canvases? Meet the Web Designer Library Membership.