# Sections

Chapter 4 of the Inkwell user guide.

Add a section in the theme editor with **Add section**. Most sections share a left-aligned section heading: a **Heading** in the heading font, a **Text** (or **Body**) introduction under it and, where there's a **Link label** and **Link**, an underlined text link with an arrow at the right ("Shop all bestsellers"). Most also have a **Background** (Page, Blotter or Cover, chapter 2). A section that needs a product or collection shows placeholders until you choose one, so choose one before you publish.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening block (home page only) | **Layout**: **Flat lay** (your words beside your image on a blotter, with washi tape, a sticky note and a pen note), **Before and after** (a slider with tabs, from **Before and after pair** blocks, chapter 11), **Colour blocks** (your image over two blocks of the accent and sticky-note colors) or **Full-width image** (the image across the page, your words on a folded sheet over its lower edge; text never sits on the photo). **Background**, **Kicker**, **Heading** (italicize a word for the heading italic), **Body**, **Primary button label** and link, **Secondary button label** and link, and **Image** (not used by Before and after; without an image a drawn flat lay stands in). Up to five **Tick** blocks ("Instant download") show as a ticked line under the buttons. Under **Works with**: **Show Works with** (on), **Works with list** ("Note-taking apps, Any PDF reader, Print at home", separated by commas) and **Product** (its Works with metafield fills the row when the list is empty, chapter 8). Under **Paper details** (Flat lay only): **Washi tape**, **Sticky note** ("Undated, so start any week"), **Pen note** ("Hyperlinked tabs in the app version") and **Pen note position** (Top right or Bottom left); they also follow Theme settings › Digital products › Paper details. Under **Before and after**: **Image shape**, **Handle starts at** (50%, 10 to 90), **Before label** and **After label**. |
| **Slideshow** | Several heroes in turn (home, page and collection templates) | **Slide layout** (Flat lay or Full-width image), **Media position** (Left or Right, Flat lay only), **Image ratio** (Adapt to first image, Wide 16:9, Standard 4:3 or Square 1:1), **Background**, **Rotate slides automatically** (off) and **Change slides every** (7s, 5 to 10). Up to six **Slide** blocks: **Image**, **Eyebrow**, **Heading**, **Text**, **Button label** and **Link**. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Featured collection** | A grid of product cards | **Heading** ("Bestsellers"), **Text**, **Collection**, **Products to show** (8, 2 to 12), **Link label** ("Shop all"; a blank link goes to the collection) and **Background**. A chosen collection with no products shows nothing. |
| **Featured product** | One product with its buy box, or a look inside it | **Product**, **Media**: **Gallery** (the product's photos) or **Open spread of the preview pages** (the product's What's inside pages as an open book with the pages in a strip below and a counter, "Pages 1 and 2 of 12"; one page on phones; products without preview pages show the gallery, chapter 9), **Heading**, **Text**, **Show the flip-through button** (on, Open spread only: "Flip through 12 pages"), **Product link label** ("View the product", Open spread only), **Background**, **Enable image zoom** and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, Product metadata, What's inside, Before and after, Works with, Delivery note, the theme blocks of chapter 5 and app blocks. **Add section** offers **Featured product** and **What's inside** (the spread, ready to go). |
| **Collection list** | Collection tiles | **Heading**, **Body**, **Link label** and **Link**, **Collections** (empty shows every collection), **Tile style**: **Folder** (each collection as a paper folder with an index tab, its image or two drawn pages peeking out, the name and the number of products, "64 files"; folder colors take turns), **Sheet** (the image on a folded sheet) or **Image** (a plain image). **Columns on desktop** (3 or 4), **Collections per page** (12, 2 to 24) and **Background**. On the home page it shows the first page of collections; on your collections list page it paginates. |
| **Before and after** | Sliders comparing the same photo before and after a preset or edit | See chapter 11 |
| **License guide** | Your licenses as cards, with a compare table | See chapter 10 |
| **Image with text** | A story beside a photo | **Image**, **Image frame** (**Sheet**: on a folded sheet; **Blotter**: on the pale band; or **None**), **Media position** (Left or Right), **Eyebrow**, **Heading** ("Printed at home, the same day"), **Body**, **Button label**, **Link** and **Background**. Without an image, a drawn planner page stands in. |
| **How it works** | Numbered steps or a row of icons | **Heading** ("How it works"), **Text**, **Style**: **Numbered steps** (large italic numerals joined by a perforated line) or **Icons**, **Columns on mobile** (1 column or 2 columns, Icons only) and **Background**. Up to six **Step** blocks: **Icon** (34 to choose from, among them Bag, Download, Printer, Page, PDF, Tablet and pen, Laptop, Aperture, Film, Scissors and License), **Heading**, **Text** and **Link**. State only terms your store actually offers. |
| **Bundles** | Ready-made bundles you sell as one product each | **Heading** ("Bundles"), **Body**, **Link label**, **Link** and **Background**. Up to six **Bundle** blocks, each a stack of sheets: **Product** (the bundle as one product, priced as one; a compare-at price shows the saving), **Title** (used when no product is picked, or to rename it here), **Tagline** ("Three packs together · save 30%"), **Kit contents** (a ticked list; connect a metafield as a dynamic source to fill it per product) and **Button label** ("Add bundle to cart", which adds the bundle product). With no blocks, the section shows nothing. |
| **Shop the flat lay** | A flat lay photo with numbered paper tags on the products in it | **Image** (shown uncropped, at its own shape, so the tags stay where you put them), **Heading** ("Shop the flat lay"), **Text** and **Background**. Up to twenty **Hotspot** blocks: **Label** ("Weekly planner"), **Horizontal position** and **Vertical position** (50%, 0 to 100), **Product** (optional: shows the product's image and price with an Add to cart button) and **Detail** ("A4 and US Letter"). |
| **As featured in** | Up to twelve press or partner logos | **Heading** ("As featured in"), **Logo colors** (Monochrome, the default, draws every logo in one flat color that suits the palette; or Original. Use logos with transparent backgrounds), **Logo height** (40px, 24 to 96), **Layout on mobile** (Wrap or Scroll) and **Background**. Each **Logo** needs a **Company name** (a logo without a name isn't shown; with no **Image** the name shows as a wordmark), with an optional **Link** and **Quote**. |
| **Rich text** | Free text and buttons, or testimonials on index cards | **Heading**, **Text**, **Link label**, **Link**, **Layout** (**Stacked** or **Index cards**: blocks laid out as ruled cards), **Tilt the cards** (on, Index cards only: each card sits a degree or two off straight) and **Background**. Add Eyebrow, Heading, Text, Button and **Quote** blocks (chapter 5). **Add section** offers **Rich text** and **Index cards**. Replace the sample quotes with real ones. |
| **FAQ** | Questions and answers | **Heading** ("Questions, answered"), **Body**, **Text before the link** ("Still stuck?"), **Link label** ("Write to us") and **Link**, **Open the first question** (on) and **Background** (Blotter by default). Add **Collapsible row** blocks (chapter 5), one per question. Licenses, file types, printing and refunds on digital items are the questions digital shoppers ask most. |
| **Newsletter** | An email sign-up, or the freebie opt-in | **Type**: **Newsletter** (a sign-up row) or **Freebie: a download after sign-up** (chapter 12). **Heading** ("Notes from the studio"), **Text**, **Button label** ("Subscribe"), **Fine print** ("Unsubscribe any time.") and **Background**. Sign-ups are tagged `newsletter`. **Add section** offers **Newsletter** and **Freebie opt-in**. Only promise what you actually send. |
| **Blog posts** | Your latest articles | **Heading** ("From the journal"), **Text**, **Blog** (shows its newest articles and adds a link to it), **Articles to show** (3, 2 to 12), **Articles** (picked by hand, in your order, instead of the blog) and **Background** |
| **Section** | An empty section you fill with blocks | Takes any theme block and app blocks. **Background**. |
| **Custom Liquid** | App snippets or your own code | **Liquid** and **Background** |

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery, What's inside, Before and after and the buy box (chapter 6) |
| **Product recommendations** | A row of cards on the blotter. **Heading** ("Pairs well with"), **Background** (Blotter), **Show a link to the product's collection** (on: links to the first collection the product is in, such as "Shop planners"), **Recommendation type** (**Related products**, the default, or **Complementary products**, the ones you pair with this one in the Search & Discovery app) and **Products to show** (4, 2 to 10). |
| **Quick order list** | For B2B customers: every variant of a product in a table with quantity fields. **Heading** ("Quick order"), **Variants per page** (25, 10 to 50) and **Show SKU** (on). |

To pair products for **Complementary products** (the planner inserts that go with the planner, the LUTs that go with a preset pack): install Shopify's free **Search & Discovery** app, open **Recommendations**, search for a product and add its complementary products. They can take a little while to appear after you save.

## Page sections

* **Page**: your page's content, with **Show breadcrumbs**, an **Eyebrow**, **Background** and **Fact** blocks (a **Label** and a **Value**, such as Format: PDF) shown as a table of contents with dot leaders.
* **Contact form**: **Show breadcrumbs**, **Eyebrow**, **Show order number field** (on) and **Background**, with **Menu column** blocks (**Heading**, "Quick links", and **Menu**) and **Text** blocks (**Heading**, "Before you write", and **Text**) beside the form. The presets' text blocks tell shoppers where to find their files.
* **Collection list** (the collections list page): the Collection list section; with no collections chosen it lists every collection, **Collections per page** at a time, with page numbers.
* **Collection** and **Search**: chapter 14. **Blog**: **Show breadcrumbs**, **Body**, **Show tags** (on), **Show author** (off), **Articles per page** (9, 6 to 30) and **Background**. **Article**: **Background** and blocks for breadcrumb, title, byline (**Show author**), featured image, content, tags and share, plus the theme blocks of chapter 5.
* **404 page**: **Heading** ("This page has gone missing from the binder."), **Body**, **Show the requested address** (on) and **Background**.
* **Password**: your "opening soon" page, with a **Heading** ("Opening soon"), **Body**, **Show newsletter form** (on) and **Background** (Cover).

## Compare

Turn on **Show compare checkbox** in Theme settings › Product cards, create a page with the `page.compare` template and choose it as the **Comparison page**. Shoppers tick up to three products; a tray at the bottom of the screen shows their thumbnails and a **Compare** button. The **Compare** section (**Show breadcrumbs**) shows them side by side: price and availability, then **Format**, **Pages** and **File size** (from the metafields in chapter 7), **Works with**, **Licenses** (the values of the product's license option) and the rows of its **Spec table** block, with a switch to show only the rows that differ. Add **Spec row** blocks to the Spec table to compare more of your metafields (chapter 6).