> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/auto-cutout.md).

# Auto-cutout

Auto-cutout is Showcase's built-in background remover. Turn it on for a story screen and the theme keys out the flat studio backdrop from your product photos in the visitor's browser — so the product floats directly on your story background, like a hand-made cutout, with no Photoshop and no per-image work.

## Turning it on

It's a per-screen checkbox called **Auto-remove studio background**:

* On the **homepage** — per Story block (so you can enable it only for products whose photos suit it).
* On the **product page** — one toggle in the Product page section.
* On the **collection page** — one toggle for all products on the page.

It's **off by default** everywhere.

## How it works, in plain words

When a product image loads on a cutout-enabled screen:

1. The theme samples the **four corners** of the photo.
2. If all four corners are (nearly) the **same color**, that color is treated as the studio backdrop.
3. Every pixel close to that color turns transparent; pixels near the product's edge fade out gradually, so edges stay soft rather than jagged.
4. The processed image replaces the original on screen.

Two safety behaviors worth knowing:

* **It bails out on real photos.** If the corners *disagree* — a lifestyle shot, a gradient, a location background — the theme concludes it's not a studio backdrop and leaves the image completely untouched. Enabling cutout on a mixed gallery is safe: only the qualifying shots get cut.
* **It processes in idle time.** Cutouts run after the page is interactive, so nothing slows first load; images may visibly "pop" from backdrop to cutout a moment after appearing.

## What photos qualify

✅ **Cuts out cleanly:**

* Product on a **seamless white / light gray / single-color** backdrop
* All four corners showing pure backdrop (product doesn't touch the edges)
* Even lighting — no heavy vignette or colored gradient
* Product color clearly different from the backdrop

❌ **Gets skipped (left untouched):**

* Lifestyle and on-model shots with real backgrounds
* Backdrops with strong shadows or gradients reaching the corners
* Photos where the product covers one or more corners

⚠️ **The tricky middle:** a *white product on a white backdrop* may qualify but partially dissolve — pixels of the product that match the backdrop color go transparent too. For white/cream pieces, shoot on a contrasting backdrop (light gray behind white garments) or leave cutout off for that screen.

## Shooting for clean cutouts

1. **Use a seamless single-color backdrop** — white or \~10% gray works best.
2. **Keep the product centered** with generous margin — remember the slideshow crops every image to a 4:5 portrait frame from the center, and the cutout needs clean corners *after* that crop.
3. **Light evenly.** Two soft sources beat one hard one; kill corner shadows.
4. **Avoid backdrop-colored products** on that backdrop (see above).
5. **Skip transparent props** — acrylic stands photograph as backdrop-colored and will vanish; use fishing line or lay-flats.

## When cutout isn't happening

Run through this list:

1. Is **Auto-remove studio background** actually ticked for *this* screen (block-level on the homepage)?
2. Do all four corners of the photo show pure, even backdrop? Zoom in — a soft shadow in one corner is enough to trigger the safety bail-out.
3. Is the image cropped so the product touches an edge? Re-crop with more margin.
4. Hard-refresh the page — cutouts are computed live in the browser, and a stale cached page can lag behind a settings change.

💡 **The signature move:** cutout + a plain **Background color** on the story screen. The product floats on flat color like a museum piece — and because there's no photo backdrop fighting your palette, the whole deck instantly looks art-directed.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/auto-cutout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.