# What's inside: preview pages and the flip-through

Chapter 9 of the Inkwell user guide.

Shoppers buying a planner or an ebook want to see the pages before they pay. **What's inside** puts a strip of preview pages under the product's photos, each a small paper sheet with its label in italic under it ("Page 18 of 120 · Weekly spread"), with "What's inside", the number of sample pages ("12 sample pages") and a **Flip through** button above it. Click a page, or Flip through, and a **full-screen flip-through** opens at that page. Under the strip, **What's included** lists what the download contains with ticks, in two columns. In the buy box, **The details** gives the format, pages, file size and delivery.

## Add your preview pages

Use either of these; the metafield wins when both are set.

1. **The `custom.preview_pages` metafield** (a list of files, chapter 7): choose the page images in the product's **Metafields**. They show in list order, and each file's **alt text** is its label. This keeps the pages out of your product media altogether.
2. **Product media tagged `#inside`**: add the page images to the product's media like any other photo, and start each one's alt text with `#inside`, then the label: `#inside Page 18 of 120 · Weekly spread`. Capitals don't matter (`#Inside` works). They show in media order.

The `#inside` tag is a marker for the theme, never something shoppers see. Images tagged `#inside` stay out of the gallery, its thumbnails, zoom, the card's photo and its hover image, and the tag (with the space after it) is taken off the label wherever the theme shows it: the strip, the flip-through, the gallery, cards, quick view and the image description in social share previews. If **every** image of a product is tagged, the gallery shows them all (cleaned) so the product isn't left without a photo. Keep a real product photo first in the media list: Shopify uses the first image when the product is shared on social media.

Write the label you want shoppers to read: "Page 18 of 120 · Weekly spread", "Cover", "Habit tracker". A page with no label is called "Sample page 4" by its position; the theme never makes up a page number. To edit an image's alt text, click the image in the product's media (or the file in **Content › Files**) and edit **Alt text**.

> **Tip:** Use 6 to 12 pages that show the range: the cover, an index, a few typical spreads and something special. Export them as images of the same size and shape (portrait pages for planners, landscape for slide templates); the strip and the flip-through keep each page's own shape.

## The What's inside block

Every product page has the block under its gallery. Select it in the theme editor (in the Product section's list) to change it:

| Setting | Default | What it does |
| --- | --- | --- |
| Show What's inside | On | Off hides the block on every product that uses the template |
| Heading | What's inside | The heading over the strip |
| Show preview pages | On | The strip of pages. Off shows only the checklist. |
| Pages in the strip | 12 (4 to 12) | How many pages the strip shows. The flip-through always has every page. |
| Full-screen flip-through | On | Pages open the flip-through, and the **Flip through** button shows. Off makes the pages plain pictures. |
| Show What's included | On | The checklist from `custom.included` |
| Checklist heading | What's included | The heading over the checklist |

The block shows nothing on a product with neither preview pages nor a What's included list: no heading, no gap. With pages but no list, it shows the strip only; with a list but no pages, the checklist only. You can also add the block to a **Featured product** section.

On desktops the strip shows about six pages across the gallery's width, with round arrow buttons while there are more to scroll to; on phones it shows about three and swipes.

## The flip-through

The flip-through is a full-screen panel: the product's title and the page's label at the top with a counter ("4 of 12") and a close button, the page large in the middle on the blotter with its folded corner, previous and next buttons either side, and a row of page thumbnails underneath (the current one ringed).

* **Keyboard**: the left and right arrow keys turn the pages, **Home** and **End** jump to the first and last, and **Esc** closes it. Focus goes back to the page or button that opened it.
* **Touch**: swipe left or right on the page; scrolling up and down still works.
* **Mouse**: the buttons, the thumbnails, or a click outside the panel to close.
* Screen readers hear the page's label and position ("Page 18 of 120 · Weekly spread, 4 of 12") at each turn.
* Pages fade in with a small slide, held still for visitors who prefer reduced motion. Right-to-left languages turn the other way.

## The details

The buy box's **Spec table** block, titled **The details**, reads like a table of contents with dot leaders:

* **Format**: `custom.file_format` ("PDF + hyperlinked PDF")
* **Pages**: `custom.page_count` ("120")
* Your variant options with the chosen value ("Paper size: A4, US Letter" becomes "Paper size: A4" as shoppers choose)
* **File size**: `custom.file_size` ("24 MB")
* **Delivery**: "Instant download", for downloads (chapter 8)

Each row hides when it has no value, and each can be turned off in the block (chapter 6). The page count also puts a "120 pages" chip on the product's card (**Theme settings › Digital products › Page count on product cards**).

## The open spread on the home page

The **Featured product** section's **Media** setting **Open spread of the preview pages** shows a product's What's inside pages as an open book: two pages side by side with a shadow in the gutter (one page on phones), a strip of page thumbnails under it with their labels, arrows that step a page, and a counter ("Pages 1 and 2 of 12"). The section's **Flip through 12 pages** button (**Show the flip-through button**) opens the flip-through at the page on show, and **Product link label** ("View the product") links to the product. Add a **What's inside** block to the section with **Show preview pages** off to show the What's included checklist beside the spread, as the Inkwell and Studio presets do.

**Add section › What's inside** adds this section ready to go: choose your product. A product without preview pages shows its gallery instead.