Product details
Product details annotates one product photo with numbered markers. Each marker pairs a spot on the photo with a short text — and optionally its own close-up photo shown in a circle.
What it does
Section titled “What it does”Use it when one product photo carries several features worth pointing at — pockets, zippers, fabrics. Shoppers tap a number in the list (or on the photo) and the section highlights that detail: the marker lights up, and with a close-up image uploaded, a circular photo shows exactly that spot.
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 Product details.
- Upload the Product image and edit the demo Detail block.
- Add a Detail block per feature (up to 6), set its marker position, then save.
Choose a style
Section titled “Choose a style”The Layout setting switches between two looks:
| Style | Look |
|---|---|
| Connected close-up (default) | The photo on one side; selecting a detail draws a circle with a connecting line at that spot — using the detail’s own close-up photo if one is uploaded |
| Detail card | The list becomes cards beside the photo, without the circle close-up |
Both sit on a Section background tint and share the numbered-marker interaction.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and upload a Product image (1600–2400 px on the longest side).
- In the first Detail block, type the List title and the Detail description.
- Place the marker with Marker horizontal/vertical position (percentages of the photo).
- Optionally upload a Separate close-up image (800–1200 px square) — the photo itself is never enlarged as a substitute.
- Repeat per detail, save, and tap through the numbers in the preview.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading | “Little details.” | Text | Section title, first line |
| Highlighted heading line | “Lots of care.” | Text | Second heading line, shown in the accent style. Leave empty for a single-line heading |
| Introduction | (demo paragraph) | Text | Short intro under the heading |
| Product image | Empty | Image picker | The annotated photo. Recommended 1600–2400 px on the longest side; the full image shows — re-check marker positions after changing it |
| Product image description | Empty | Text | Describes the photo for screen readers and search engines |
| Layout | Connected close-up | Connected close-up / Detail card | The two arrangements above |
| Section background tint | Lilac | None (white) / Cream / Lilac / Mint / Apricot | Soft color behind the section |
| Image ratio | Landscape (4:3) | Square (1:1) / Landscape (4:3) / Portrait (4:5) | Frame shape of the product photo |
Blocks
Section titled “Blocks”Add up to 6 Detail blocks — one per feature.
| Block | Limit | What it adds |
|---|---|---|
| Detail | 6 | One numbered feature: list entry, marker, optional close-up |
Detail settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| List title | “Thoughtful detail” | Text | The line in the numbered list |
| Short summary | Empty | Text | One-line preview under the list title |
| Detail heading | Empty | Text | Title in the detail panel. Uses the list title when left empty |
| Detail description | (demo text) | Text | What makes this detail special |
| Separate close-up image | Empty | Image picker | Square photo (800–1200 px) for the circular close-up. Leave empty for text only |
| Close-up horizontal position | 100 % | 0–100 %, step 1 | Connected close-up only: where the circle sits — 0 hugs the left edge, 100 the right |
| Close-up vertical position | 15 % | 0–100 %, step 1 | Connected close-up only: 0 is the top edge, 100 the bottom |
| Marker horizontal position | 50 % | 0–100 %, step 1 | Where the numbered marker sits on the product photo |
| Marker vertical position | 50 % | 0–100 %, step 1 | Same, from the top |
Images and content tips
Section titled “Images and content tips”- Product photo: 1600–2400 px on the longest side, with clear space around each feature you want to mark.
- Close-ups: square crops, 800–1200 px, one per detail — shoot them deliberately; a zoomed screenshot of the main photo reads poorly in a circle.
- Three to five details read best; the marker positions are percentages of the photo, so re-check them whenever the photo changes.
Good to know
Section titled “Good to know”- Two ways to select. Shoppers tap a number in the list or the marker on the photo — both highlight the same detail.
- The circle position is separate from the marker. The marker sits on the photo; the close-up circle sits wherever there’s room (that’s the Close-up position setting).
- No close-up photo? No problem. Details without their own image show text only, and the main photo is never blown up as a fake close-up.
- On phones the section becomes a compact flow: heading, a height-limited photo, the number row, and the current detail’s text.
Example setups
Section titled “Example setups”Bed anatomy. Connected close-up, one bed photo, four details (bolster, cover zipper, base, non-slip bottom), each with a square close-up, Lilac tint.
Quiet card list. Detail card layout, no close-ups, five short text details — the fastest version to fill in.
Common questions
Section titled “Common questions”The marker sits in the wrong place after I changed the photo. Markers are percentages of the photo — open each Detail block and re-check the position while previewing.
The close-up circle covers my photo’s subject. Move it with Close-up horizontal/vertical position — it slides along the edges of the photo stage, independent of the marker.
My detail only shows text, no circle. That detail has no Separate close-up image. Upload one (square, 800–1200 px) — the main photo is never enlarged as a substitute.
Tapping a number does nothing in the editor. Select the Detail block in the sidebar (or use the live preview) — the editor’s sidebar list selects, the page itself responds to taps.