> ## 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. # Pair pictures and text with Facet's scrolling highlights > Set up Facet's scrolling highlights: pictures that scroll past text held mid-screen on desktop, a swipeable row on phones, and a color scheme per highlight. The Facet scrolling highlights section pairs a column of pictures with text that changes as shoppers scroll. Each highlight is one picture with its own heading, text and optional icon. Use it to walk through product features or brand values one at a time. This page explains the scroll behavior on desktop and phones, the section settings and the Highlight block. ![The Scrolling highlights section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-overview.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=9af0efd3d020a61ab3190538aed677dc) ## What this section controls * Which side the pictures sit on, their shape, width and spacing on desktop. * How faded the pictures that are not current look on desktop. * Whether the section changes color with each highlight. * An optional heading and text above the highlight text. ## How the scrolling works > [tab] Desktop > > The pictures sit in one column and scroll with the page. The text column beside them stays in the middle of the screen while the pictures pass. > > The picture closest to the middle of the screen is the current one. It shows in full, and the other pictures fade back. As a new picture reaches the middle, its text replaces the text before it. Clicking a picture scrolls it to the middle. > [tab] Phones and tablets > > On screens narrower than 750 pixels, the pictures become a row that shoppers swipe sideways, one picture at a time. The edge of the next picture shows beside the current one, so shoppers can tell the row swipes. Swiping sideways over the text also moves the row. The text sits under the row and changes to match the picture in view. Dots under the text show the current highlight, and tapping a dot moves to that picture. > > All pictures show in full on phones. **Inactive picture strength**, **Desktop width limit** and **Space between pictures** apply to desktop only. A highlight with a video plays it, muted and on a loop, only while that highlight is current. Shoppers who ask their device to reduce motion get the changes without the sliding and fading. ## 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 **Scrolling highlights**. It can't be added to the header or footer. **3. Fill each highlight** Click a **Highlight** block to pick its picture and edit its heading and text. Click **Add block**, then **Highlight**, to add another. ![The theme editor with the Scrolling highlights section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-location.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=1c562cd97dd3cac0a4ca45f74d6c5f98) ## Section settings ### Pictures ![Theme editor sidebar showing the Scrolling highlights section settings: Image position, Image aspect ratio, Desktop width limit, Space between pictures, Inactive picture strength, Change color scheme with each highlight, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-settings-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=38b73a39d98609ca2b4ac8fa4f0badbf) > [accordion] Image position > > **Left** (default) or **Right**. The side of the picture column on desktop. > [accordion] Image aspect ratio > > The shape of every highlight picture: **1:1** (default), **4:5**, **3:4**, **2:3**, **5:4**, **4:3** or **16:9**. Pictures are cropped to fit. > [accordion] Desktop width limit > > The widest a picture can be on desktop: from 320 to 900 pixels. Default: 620. A narrower picture is centered in its column. > [accordion] Space between pictures > > The gap between pictures on desktop: **Small**, **Medium**, **Large** (default) or **Extra large**. > [accordion] Inactive picture strength > > How strongly the pictures that are not current show on desktop: from 10% to 100%. Default: 30%. The current picture always shows in full. At 100% no picture fades. ### Colors ![Theme editor sidebar showing the Scrolling highlights section settings (part 2, scrolled): Change color scheme with each highlight, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-settings-2.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=78b3cc6889c34185c77d647e6d076e70) * **Change color scheme with each highlight**: off by default. When on, the whole band and its text take each highlight's **Color scheme** as that highlight reaches the middle of the screen, with a soft fade between them. ### Common settings * **Color scheme**: the colors of the section. With **Change color scheme with each highlight** on, the highlights' schemes paint over it. * **Top padding** and **Bottom padding**: None, Small, Medium, Large (default) or Extra large. * **Page width**: **Regular** (default), **Fluid** or **Full**. 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 highlight text. A new section starts with the heading "Why it lasts" and an empty text. Empty either one to hide it. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. ### Highlight Each highlight is one picture and its text. Add as many as you need and drag them to change their order. ![Theme editor sidebar showing the Highlight block (in Scrolling highlights) settings: Image, Mobile image, Video, Icon, Icon source, Icon size, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-block-highlight-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=2cd310898986193da9de60e8fa1bd4a8) ![Theme editor sidebar showing the Highlight block (in Scrolling highlights) settings (part 2, scrolled): Icon, Icon source, Icon size, Icon position, Color scheme.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/scrolling-highlights/scrolling-highlights-block-highlight-2.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=dbddc8c9434dda440b1907cfb18bcffc) > [tab] Media > > * **Image**: the highlight picture. A placeholder shows until you pick one. > * **Mobile image**: an optional picture for phones. Without one, phones show **Image**. > * **Video**: plays muted on a loop in place of the picture while this highlight is current. > [tab] Icon > > * **Icon source**: **None** (default), **Theme icon**, **Image** or **SVG code**. > * **Icon**: with **Theme icon**, pick Heart (default), Star, Sparkle, Leaf, Sun, Wave, Checkmark, Delivery truck, Clock, Package, Return arrow, Shield, Store or Payment card. > * **Icon**: with **Image**, upload a small picture. > * **SVG code**: with **SVG code**, paste the code of an SVG icon. Use `currentColor` for strokes and fills so the icon follows the color scheme. > * **Icon size**: from 24 to 72 pixels. Default: 40. Appears only when an icon source is chosen. > * **Icon position**: **Above the text** or **Beside the text** (default). Appears only when an icon source is chosen. > [tab] Color scheme > > * **Color scheme**: used only when the section's **Change color scheme with each highlight** is on. The band takes this scheme while the highlight is current. > [tab] Nested blocks > > A highlight can hold **Heading**, **Text**, **Button** and **Label** blocks. A new highlight in a new section comes with a heading and text. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. > [!WARNING] > > SVG code that contains scripts or event handlers, or that doesn't include an `` tag, is ignored and no icon shows. Paste only SVG files you trust. ## Best practices * **Use three to five highlights.** Fewer don't show off the scroll effect, more make the section long on desktop. * **Keep each text short.** The text column holds one highlight at a time, sized to the picture. A heading and two or three lines fit best. * **Pick contrasting color schemes for the tint.** With the color change on, schemes that differ clearly make each step easy to notice. * **Add mobile images for wide pictures.** Phones show one picture across the screen, so a square or portrait crop fills it better. ## Related guides > [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md) > > Create the color schemes each highlight can take. > [card] [Image with text](https://docs.shopify.lightsout.agency/themes/facet/sections/image-with-text.md) > > Show one picture beside text without the scroll effect. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.