Scrolling lookbook story tells a story in chapters. Each chapter pairs one photo with a caption, a few lines of text and up to four products from that look. On desktop, a chapter's photo stays in view while its products scroll past, then the next chapter takes over. It is the centerpiece of the Almanac preset's home page.
Where to find it
In the theme editor, click Add section and choose Scrolling lookbook story. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
- Desktop. Each chapter is two columns. The photo fills the height of the screen and stays in place; the caption and a two-column grid of products scroll beside it. Image position puts the photo on the left or the right.
- Phones and tablets. The chapters stack: photo, caption, then products. Mobile product layout shows the products as a row to Swipe, with the next product peeking in, or as a Two-column grid.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Large. | How large the heading is set. |
| Text | Formatted text. | A short introduction under the heading. Optional. |
| Image position | Left or Right. Default: Left. | Which side the photos sit on, on desktop. On mobile the photo always comes first. |
| Mobile product layout | Swipe or Two-column grid. Default: Swipe. | How each chapter's products are shown on phones and tablets. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 6 blocks.
Chapter
One look: a photo, a caption, some text and its products. Chapters are numbered in order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The chapter's photo. A tall photo works best. Set its focal point so the subject stays in view when it is cropped. |
| Caption | Text. | The chapter's title, such as "Morning light". Select a word and make it italic for emphasis. |
| Text | Formatted text. | A line or two about the look. Optional. |
| Products | Products, up to 4. | Up to 4 products worn or shown in the photo. They appear as product cards, with quick add. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Chapter image | 2000 x 2500 px (4:5 portrait) | On desktop the photo is cropped to the height of the screen, so it can end up taller or narrower than 4:5. On mobile it is shown at 4:5. Set a focal point. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Three or four chapters make a story. Six is the limit.
- Choose products for every chapter. On your storefront, a chapter with no products shows only its image and text. The placeholder products you see in the theme editor are not shown to customers.
- Shoot the chapters as a set: the same light and setting makes the scroll feel like turning pages.
- Product cards here follow your theme settings under Product cards, so they match the rest of the store.