> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Tell brand stories in a slider with Facet's stories section > Build Facet's stories slider: full-width pictures with a text card on each slide, numbered slide buttons, a crossfade and optional autoplay. The Facet stories section is a slider of large pictures, each with a card of text that overlaps the bottom of the picture. Slides crossfade, and numbered buttons let shoppers jump between them. Use it for brand stories, quotes or collection launches. This page covers the section settings and the Story block. ![The Stories section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-overview.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=7d1b4a895f71803286a492dadc0a5a50) ## What this section controls * An optional heading and text above the slider. * The slides, each with its own picture, heading, text and author line. * Autoplay and the time between slides. * The colors of the text cards and slide numbers. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Add the section** In the **Sections** panel, click **Add section** and choose **Stories**. It can't be added to the header or footer. **3. Fill each story** Click a **Story** block to pick its picture, then edit the heading, text and author inside it. Click **Add block**, then **Story**, to add a slide. ![The theme editor with the Stories section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=d62de38909ec520d947ad4f12b1125b5) ## Section settings ![Theme editor sidebar showing the Stories section settings: Auto-rotate slides, Change slides every, Card color scheme, Common settings, Color scheme, Top padding, and more.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=1a1c136366ddae95d3da06c240b37e63) * **Auto-rotate slides**: off by default. Moves to the next story on its own and pauses while the pointer is over the slider. Shoppers who ask their device to reduce motion don't get autoplay. * **Change slides every**: from 3 to 9 seconds. Default: 5. Appears only when **Auto-rotate slides** is on. * **Card color scheme**: the colors of the text card on every slide and of the slide numbers. When the slide changes, the new picture settles in from slightly larger and the card text rises in line by line. After the last slide, the slider goes back to the first. Shoppers can also use the arrow keys. ### Common settings ![Theme editor sidebar showing the Stories section settings (part 2, scrolled): Common settings, Color scheme, Top padding, Bottom padding, Page width, Custom CSS.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-settings-2.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=93c9a68af3ba418817f4c9b869d07ef2) * **Color scheme**: the colors of the section around the slides. * **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large. * **Page width**: Narrow, Narrower, Fluid or Full (default). See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. ## Blocks ### Heading and text The section has a fixed **Heading** and **Text** above the slider. A new section starts with the heading "Stories behind the pieces" and a line of text. Change them to your own, or empty both to hide them. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. ### Story ![Theme editor sidebar showing the Story block (in Stories) settings: Image, Mobile image.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-block-story-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=c155c443d775048fbad90dbf37f2f372) One slide. Add as many as you need and drag them to change their order. * **Image**: the slide picture. It is cropped to a wide 24:11 shape on large screens and to 4:5 on phones. A placeholder shows until you pick one. * **Mobile image**: an optional picture for phones. Without one, phones show **Image**. The text card under the picture holds **Heading**, **Text** and **Author** blocks. A new section starts each story with a centered heading, text and author line. #### Author ![Theme editor sidebar showing the Author block (in Stories) settings: Text, Alignment.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/stories/stories-block-author-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=6e73ad778428e3d22f81d79bf0c75671) A short credit line, such as the name of the person quoted. * **Text**: the credit line. A new block shows "Author name" after a dash. Replace it with your own credit. * **Alignment**: **Left**, **Center** (default) or **Right**. ## Best practices * **Use pictures with space at the bottom.** The card covers the lower edge of the picture, so keep faces and products in the upper part. * **Add a portrait mobile image.** Phones crop the picture to 4:5, which can cut the sides of a wide picture. * **Give shoppers time to read.** With autoplay on, pick at least 6 seconds when a story has a paragraph of text. ## Related guides > [card] [Testimonials](https://docs.shopify.lightsout.agency/themes/facet/sections/testimonials.md) > > Show customer quotes with star ratings. > [card] [Hero banner](https://docs.shopify.lightsout.agency/themes/facet/sections/hero-banner.md) > > A slideshow with text over the picture. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.