> ## 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. # Build a hero banner slideshow in Facet > Add Facet's hero banner, choose text over image or side by side, set height and autoplay, and fill each slide with text, buttons and a product card. The Facet hero banner is a full-width slideshow for the top of a page. Each slide has its own picture, text, buttons and an optional product card, and the section decides the layout, height and how the slides move. ![The Hero banner section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=5797049f80e9d305a6cf82d6ad265350) ## What this section controls * The layout: text over the picture, or text in a panel beside it. * The banner height on large screens. * Autoplay, the time between slides, and the transition speed. * The slider dots and arrows. * The style of the product card shown on a slide. * The header colors when a transparent header sits over the banner. ## 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 **Hero banner**. The hero banner can't be added to the header. **3. Set up each slide** Click a **Slide** block to pick its picture and edit its text and buttons. Click **Add block**, then **Slide**, to add another slide. **4. Tune the slideshow** Click **Hero banner** to choose the layout, height and autoplay settings. ![The theme editor with the Hero banner section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=e76ae47e03d4c03e3ddbb5d290ffd7c1) ## Section settings ![Theme editor sidebar showing the Hero banner section settings: Layout, Banner height, Auto-rotate slides, Change slides every, Transition pace, Pagination, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=bcbf632146dd5a5238e040cba1bbf810) ### Layout > [accordion] Layout > > * **Text over image** (default): the slide text sits on top of the picture. > * **Side by side**: the text sits in a colored panel next to the picture. A scrolling line of text can run along the bottom of the banner in this layout. > [accordion] Image position > > **Right** (default) or **Left**. Appears only when **Layout** is **Side by side**. > [accordion] Banner height > > * **Adapt to image**: the banner keeps a wide 24:11 shape on large screens. > * **Small**: 450 pixels on large screens. > * **Medium**: 560 pixels on large screens. > * **Large** (default): 685 pixels on large screens. > * **Full screen**: fills the screen below the header on every device. > > On phones, every option except **Full screen** lets the picture decide the height. ### Slider * **Auto-rotate slides**: off by default. Moves to the next slide on its own. * **Change slides every**: from 3 to 9 seconds. Default: 5. Appears only when **Auto-rotate slides** is on. * **Transition pace**: **Slow**, **Medium** (default) or **Fast**. ### Pagination and arrows In the **Side by side** layout, the dots are hidden and previous and next arrows always show over the picture, so the settings below appear only when **Layout** is **Text over image**. * **Dots alignment**: **Left**, **Center** (default) or **Right**. The dots are hidden when the banner has one slide. Appears only when **Layout** is **Text over image**. * **Dots color scheme**: colors only the dots. The band behind them keeps the section's color scheme. Appears only when **Layout** is **Text over image**. * **Show arrows**: off by default. Shows round previous and next buttons over the slides. Appears only when **Layout** is **Text over image**. * **Arrows color scheme**: colors the arrow buttons. Appears only when **Show arrows** is on. ### Product card ![Theme editor sidebar showing the Hero banner section settings (part 2, scrolled): Show arrows, Product card background, Product card color strength, Product card blur, Product card button label, Common settings.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=cd55d4e7c2bf2c1aeb14572f8de0a871) * **Product card background**: **Frosted glass over the picture** (default) thins the card's color scheme and blurs the picture behind it. **Solid color scheme** fills the card with its color scheme. * **Product card color strength**: from 20% to 90%. Default: 35%. Lower values show more of the picture. Appears only with the frosted background. * **Product card blur**: from 4 to 32 pixels. Default: 12. Appears only with the frosted background. * **Product card button label**: the button text on every slide's product card. Leave it blank for "Shop now". ### Common settings ![Theme editor sidebar showing the Hero banner section settings (part 3, scrolled): Header color scheme over this banner, Top padding, Bottom padding, Page width, Custom CSS.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-settings-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=32f1928a43924542f987ef018c05bd7f) * **Header color scheme over this banner**: used when the header is transparent and this banner is the first section on the page. The header links and icons take this scheme's text color so they stay readable over the slides. * **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large. * **Page width**: Narrow, Narrower, Fluid (default) or Full. ## Blocks ### Slide Each slide is a block. Add as many as you need and drag them to change their order. ![Theme editor sidebar showing the Slide block (in Hero banner) settings: Image, Mobile image, Horizontal position, Vertical position, Color scheme.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-block-slide-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=9cddea71cfb479cd8d197843d36c226f) ![Theme editor sidebar showing the Slide block (in Hero banner) settings (part 2, scrolled): Vertical position, Color scheme, Header text color over this slide.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-block-slide-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=3d1b235a2f898a04445ef70c15feed63) ![Theme editor sidebar showing the Product spotlight block (in Hero banner) settings: Product, Show description, Position, Color scheme.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-block-product-spotlight-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=3f581f794791ad6b0368fd338e413cbe) > [tab] Picture > > * **Image**: the slide picture. > * **Mobile image**: an optional picture for phones, for example a portrait crop. Without one, phones show **Image**. > [tab] Text position > > * **Horizontal position**: **Left** (default), **Center** or **Right**. > * **Vertical position**: **Top**, **Middle** (default) or **Bottom**. > [tab] Colors > > * **Color scheme**: colors the text and buttons on this slide. In the side by side layout it also colors the text panel. > * **Header text color over this slide**: the color of the header links and icons while this slide shows, when the header is transparent and the banner is first on the page. Leave it empty to use the section's **Header color scheme over this banner**. > [tab] Nested blocks > > A new slide comes with a **Label**, **Heading**, **Text** and **Button**. Add, remove or reorder these blocks inside the slide. > > Each slide also has a **Product spotlight** block: > > * **Product**: the product shown on the card. The card is hidden until you pick one. > * **Show description**: on by default. > * **Position**: **Start** or **End** (default). > * **Color scheme**: the card's colors. ### Scrolling line In the side by side layout, the banner has a **Scrolling line** block along its foot. It shows nothing until you add text. ![Theme editor sidebar showing the Scrolling line block (in Hero banner) settings: Text, Size, Scrolling speed, Color scheme.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/hero-banner/hero-banner-block-scrolling-line-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=8da7845e0de610e1f7c6cc5074ac1b3b) * **Text**: the text that scrolls. * **Size**: **Display 1** (default), **Display 2**, **Heading 1** or **Heading 2**. * **Scrolling speed**: from 10 to 90 seconds per loop. Default: 40. Higher values scroll more slowly. * **Color scheme**: the colors of the line. ## Best practices * **Add a mobile image.** A wide desktop picture often loses its subject on a phone. A portrait crop keeps it in view. * **Give shoppers time to read.** With auto-rotate on, pick at least 5 seconds per slide when slides carry several lines of text. * **Check contrast on every slide.** Text over a busy picture is easier to read with a slide color scheme whose text color stands out from the picture. ## Related guides > [card] [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md) > > Turn on the transparent header that sits over this banner. > [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md) > > Create the color schemes used by slides, dots and arrows. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.