Image focus story
Image focus story tells the story of one photo in chapters. As the shopper scrolls, the view glides into each detail you’ve marked — stitching, materials, buckles — with a short text for each.
What it does
Section titled “What it does”Use it when one great photo deserves more than a caption — a hero product’s craft story. It is not a slideshow of many images: every chapter looks into the same picture. You choose up to 8 focus points, each with its own text and zoom.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Image focus story (or Soft detail studio to start with the spotlight style).
- Upload one Image and edit the demo chapter.
- Add a Focus chapter block per detail (up to 8), set its position and zoom, then save.
Choose a style
Section titled “Choose a style”The Layout setting switches between three desktop looks:
| Style | Look |
|---|---|
| Image and scrolling chapters (Split) | Photo on one side, chapters scrolling beside it |
| Soft detail studio | A calm “studio” view where each chapter shows in a spotlight circle |
| Immersive close-up (default) | The photo fills the stage; the view zooms from chapter to chapter |
Phones have their own independent layout: Compact pinned image (photo stays pinned while short chapter cards pass) or Horizontal chapter cards (one swipeable row of chapters). Spotlight-style layouts show each chapter’s title and description; the scrolling layouts show the section heading with the chapters.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and upload one complete, sharp product image (2000–2400 px on the long edge).
- In the first Focus chapter, type the Heading and text.
- Adjust Horizontal position and Vertical position — 0 % is the image’s left/top edge, 100 % its right/bottom edge. Selecting the chapter in the editor previews its focus point.
- Set Focus zoom (1–4×; around 2.4× makes a clear close-up).
- Repeat per chapter, save, and scroll the preview slowly.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Optional short tagline | Empty | Text | Small line above the section. Leave empty to hide |
| Heading | “Good design is in the details.” | Text | Section title |
| Text | (demo paragraph) | Text | Intro line under the heading |
| Image | Empty | Image picker | The one photo every chapter looks into. Recommended 2000–2400 px on the long edge; X/Y positions use the original image — re-check every chapter after changing it |
| Layout | Immersive close-up | Image and scrolling chapters / Soft detail studio / Immersive close-up | Desktop arrangement |
| Image position | Left | Left / Right | Which side the photo sits on (Split layout) |
| Section background tint | Cream | None (white) / Cream / Lilac / Mint / Apricot | Soft color behind the section |
| Image ratio | Landscape (4:3) | Landscape (4:3) / Square (1:1) / Portrait (4:5) / Wide (16:9) | Frame shape of the photo |
| Image stage size | Medium | Small / Medium / Large / Fill available viewport | How tall the photo stage is |
| Mobile layout (independent of desktop) | Horizontal chapter cards | Compact pinned image / Horizontal chapter cards | The phone arrangement — set separately from desktop |
| Enable image focus motion | On | On / Off | The zooming, panning, and arrival ring. Respects the shop’s animation setting and reduced motion; with motion off, navigation still works and short screens show a static overview |
| Desktop chapter scrolling | Scroll with the page | Scroll with the page / Scroll inside the section | How chapters advance (Split layout) |
| Snap to chapters on desktop | On | On / Off | The view settles on each chapter instead of drifting past |
| Snap to chapters on mobile | On | On / Off | Same, on phones |
| Image display | Show complete image | Show complete image / Crop to fill | Whether the whole photo stays visible (contain) or fills the frame (cover) |
| Desktop image width | 58 % | 40–70 %, step 1 | How much room the photo takes beside the chapters |
| Mobile image height (% of viewport) | 34 % | 25–50 %, step 1 | Pinned-image height on phones |
| Spotlight diameter | 48 % | 20–70 %, step 1 | Size of the sharp circle in the spotlight layouts (percentage of the frame’s shorter side) |
| Outside spotlight darkness | 50 % | 0–80 %, step 1 | How much the area outside the spotlight dims |
Blocks
Section titled “Blocks”Add up to 8 Focus chapter blocks — one per detail.
| Block | Limit | What it adds |
|---|---|---|
| Focus chapter | 8 | One focus point: title, text, position, zoom |
Focus chapter settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading | “A thoughtful detail” | Text | The chapter’s title |
| Text | Empty | Text | One or two short sentences (longer text stays scrollable) |
| Horizontal position | 50 % | 0–100 %, step 1 | Distance from the original image’s left edge. Selecting the chapter previews the point |
| Vertical position | 50 % | 0–100 %, step 1 | Distance from the original image’s top edge |
| Focus zoom | 2.4× | 1–4×, step 0.1 | Magnification at this point |
Images and content tips
Section titled “Images and content tips”- One complete, sharp photo, 2000–2400 px on the long edge. Blurry sources get worse at 2.4× zoom.
- Positions refer to the original image. Replace or re-crop the photo and every chapter point needs a re-check.
- Two to five chapters read best; each text should be one or two sentences.
Good to know
Section titled “Good to know”- Motion has manners. Zooming and panning switch off with the shop’s animation setting or the visitor’s reduced-motion preference; the chapters remain fully readable, and short screens fall back to a static overview.
- Snapping keeps the pace. With snap on, the view settles on each chapter — turn it off for a free-scroll feel.
- In the theme editor, clicking a chapter previews its focus point on the image — the fastest way to position all points.
Example setups
Section titled “Example setups”Craft close-up. Immersive close-up, one collar photo, four chapters (buckle, stitching, ring, lining) at 2.4×, Cream tint, snap on.
Quiet studio. Soft detail studio, three chapters, Spotlight diameter 55 %, outside darkness 60 % — a moody product spotlight.
Common questions
Section titled “Common questions”A chapter points at the wrong spot after I changed the photo. Positions follow the original image — after any image change, open each chapter and nudge X/Y while previewing.
The zoom looks blurry on my photo. The source is too small for the zoom level — use a bigger image or lower the Focus zoom.
Nothing zooms on my phone. Check the Mobile layout you chose, and that motion isn’t switched off by the visitor’s reduced-motion setting — the chapters still work as readable cards.
The section scrolls past too fast to read. Turn on Snap to chapters, or switch Desktop chapter scrolling to “Scroll inside the section” (Split layout).