> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Story

> A heading and text beside a photo, or a heading with up to six panels, each with an icon, text, a check mark or cross list, a figure and a link.

![Story on the storefront](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/story.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=ef3047ce1fd69eb63f9ca85b5e2b9a85)

Story, highlighted with the demo content

## Where to find it

On install it is on the about template (Repair first, recycle last) and the care template (What is covered). Create the page in **Online Store → Pages** with **Theme template** about or care, then in the theme editor choose **Pages**, then **about** or **care**, and select **Story**. Add it to other templates with **Add section**.

## How it works

* Layout Photo when one is chosen shows the text beside a photo once you pick one; without a photo the heading and text sit above the panels. Always text and photo keeps the photo area and shows a placeholder drawing until you choose one.
* In the photo layout, Link label and Link make a button under the text; without a photo they show as a link beside the heading.
* Panels sit up to three per row, so six panels make two rows. Under 750 px they stack.
* Each panel can show an Icon as a tile above the title, or small beside the title, then Text and a List with one item per line.
* List marks Check marks, for what is included shows green check marks; Crosses, for what is not shows gray crosses. The care template pairs a Covered panel with a Not covered panel this way.
* Figure, Figure unit and Figure text show one number large at the bottom of a panel, such as 4.6 t collected in 2025.
* Link id gives the section an anchor, so a link such as #coverage jumps to it.

![Story in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-story.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=05a474d216c594315ed1346df9c80fa7)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Edit Kicker, Heading and Text. Leave Heading blank and the panels' headings become the section's headings.
* For a photo story, choose Photo (landscape, at least 1600 px wide) and Photo position.
* Add a Panel block per point (up to 6) with Heading, Text and List. Choose Icon and Icon style, and List marks.
* Add Figure, Figure unit and Figure text to a panel only for a number you can stand behind.
* Add Link label and Link to a panel to send shoppers on, such as to the contact page for a repair quote.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |
| **Link id** | Text. Lets a link such as #repairs jump to this section. Letters, numbers and hyphens. |
| **Kicker** | Text. |
| **Heading** | Text. Default: Our story. |
| **Text** | Formatted text. |
| **Link label** | Text. |
| **Link** | Link: a page, product, collection or web address. |

**Photo**

| Setting | What it does |
| - | - |
| **Layout** | Options: Photo when one is chosen, Always text and photo. Without a photo, the heading sits above the panels. Default: Photo when one is chosen. |
| **Photo** | Image: upload one or choose from Content → Files. 1600 x 1200px recommended. |
| **Photo position** | Options: After the text, Before the text. Default: After the text. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Panel (up to 6)

| Setting | What it does |
| - | - |
| **Icon** | Options: None, Check, Cross, Wrench, Leaf, Shield, Truck, Return, Trade-in, Bolt, Chat, Pin, Info, Processor, Star. Default: None. |
| **Icon style** | Options: Tile above the title, Small, beside the title. Default: Tile above the title. |
| **Heading** | Text. Default: Panel title. |
| **Text** | Formatted text. |
| **List** | Text (several lines). One item per line. Default: First point Second point Third point. |
| **List marks** | Options: Check marks, for what is included, Crosses, for what is not. Default: Check marks, for what is included. |
| **Figure** | Text. A number shown large under the list, such as 4.6. |
| **Figure unit** | Text. Such as t or h. |
| **Figure text** | Formatted text (one line). Such as collected in 2025. |
| **Link label** | Text. |
| **Link** | Link: a page, product, collection or web address. |

> [!NOTE]
>
> On install the List in the about template's Repairs and Recycling panels and the care template's Covered panel is placeholder guidance, such as Say what you take back for recycling: replace it with your own services and terms.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.