Pop-out image

Pop-out image displays a single photo that can grow past the edges of its frame — like a sticker placed on the page. It has no heading, no buttons, and no content blocks: one photo, one optional link. Use it as a small decorative highlight between busier sections.

Because it is deliberately simple, there are no layout styles to choose — the only decisions are which photo you upload, how large it appears, and where it links.

What it does

The section reserves a box on the page and centers your photo inside it. While the photo stays at 100 % scale it sits neatly inside the box; push the scale above 100 % and the photo grows past the box edges on all sides, creating the “pop-out” effect.

Two typical uses:

• A transparent product cutout (a jumping dog, a floating treat bag) that seems to escape its frame.
• A linked photo that sends shoppers to a collection or campaign page.

Add it to a page

1. In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
2. Open the template where you want the section (for example, the home page).
3. Click Add section and choose Pop-out image.
4. Upload your photo and adjust the two sliders — that is the whole setup.

Set it up: quick start

1. Add the section (see above).
2. Click the Image setting and upload your photo. A transparent PNG cutout gives the strongest pop-out effect.
3. Optionally set Link so the photo leads somewhere — a collection, a product, or a page.
4. Adjust Image scale (%): leave it at 100 for a photo that fits its box, or raise it above 100 to let the photo overflow the frame.
5. Adjust Minimum height if the reserved area needs to be taller or shorter.
6. Save and check the preview at both desktop and phone widths.

Settings

Setting	Default	Options	What it does
Image	Empty	Image picker	The photo to display. Transparent PNG cutouts pop out best
Link	Empty	URL	Makes the whole photo clickable. Leave empty for a purely decorative image
Image scale (%)	100	50–130 %, step 5	Scales the photo inside its box. Above 100 % the photo floats past the box edges on all sides
Minimum height	260 px	120–480 px, step 20	The height of the reserved box behind the photo. Raise it when a larger scale needs more room

Images and content tips

• Transparent PNG cutouts work best. With a transparent background, the part of the photo that overflows the frame really looks like it floats; a rectangular photo just looks cropped.
• Above 100 % scale, leave breathing room. The photo extends past its box on every side, so avoid placing the section directly against other elements you don’t want it to overlap.
• Keep the photo itself sharp. The section scales the photo up on wide screens — a source around 1000 px or wider stays crisp.
• On phones the photo is never wider than the screen; a large scale simply fills the width instead of overflowing.

Good to know

• The photo loads lazily. Visitors only download it when it is close to the screen, which keeps pages fast.
• Without a photo, the placeholder shows everywhere — in the theme editor and on the published storefront, both show the same neutral placeholder graphic. It’s there so you can see and position the section; upload your photo or remove the section before you publish.
• The link covers the whole photo — there is no separate button or label, so pick a destination that is obvious from the picture.

Example setups

Hero accent. A transparent cutout of a dog mid-jump, Image scale (%) 115, Minimum height 320 px, no link. Place it between the newsletter and the footer for a playful close to the home page.

Collection doorway. A cutout of a cat with a toy, Image scale (%) 100, Link pointing to the “Cat toys” collection. Place it beside a text section to invite a click.

Common questions

My photo doesn’t “pop out” — it just sits in the box. The pop-out effect only appears when Image scale (%) is set above 100. Also check that the photo is a transparent PNG — a solid rectangular photo fills its frame and the overflow is barely visible.

The photo overlaps the section above it. Is that broken? No — at scales above 100 % the photo intentionally grows past its own box. Lower Image scale (%), or increase Minimum height so the box itself provides more space.

Why does the photo look smaller on phones? On small screens the photo is capped at the screen width so it never runs off the edge. The scale setting still controls its size relative to the box.