> ## 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. # Feature products over a picture with Facet's spotlight > Set up Facet's spotlight: a picture or looping video with text placed over it and product cards stacked or piled as a deck you click through. The Facet spotlight is a large picture or a muted, looping video with text and product cards placed over it. Use it to show a look or a campaign together with the products in it. This page covers the media, text and product card settings, and the Product spotlight block that adds each card. ![The Spotlight section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-overview.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=771203ccd350da551b7d60e9ece5908d) ## What this section controls * The picture or video and the banner height. * A tint over the picture. * Where the text sits over the picture. * How the product cards are arranged, where they sit and how they look. * The layout on phones. ## 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 **Spotlight**. It can't be added to the header or footer. **3. Pick the media** Click **Spotlight**, choose **Image**, **Video** or **External video** under **Media**, and add the file or link. **4. Add products** Click **Add block**, then **Product spotlight**, and pick a product. Repeat for each product card. ![The theme editor with the Spotlight 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/spotlight/spotlight-location.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=84c0df99ff015a74347e2646f582cde8) ## Section settings ### Media ![Theme editor sidebar showing the Spotlight section settings: Media, Image, Mobile image, Banner height, Image overlay color, Image overlay strength, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-settings-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=fcd3d69534be355e740733c834699849) > [accordion] Media > > * **Image** (default): shows **Image**, and **Mobile image** on phones if you add one. A placeholder shows until you pick a picture. > * **Video**: a video you upload to Shopify. It plays muted on a loop behind the content. > * **External video**: a YouTube or Vimeo link. It plays muted on a loop behind the content. > > Only the fields for the option you choose appear. > [accordion] Banner height > > * **Adapt to image**: the banner takes the shape of the picture or video. > * **Small**: at least 450 pixels on large screens. > * **Medium**: at least 560 pixels on large screens. > * **Large** (default): at least 685 pixels on large screens. > * **Full screen**: fills the screen below the header on every device. > > On phones, every option except **Full screen** takes the shape of the mobile image, or a 4:5 shape when there is no mobile image. A video keeps its own shape on phones. > [accordion] Image overlay color and Image overlay strength > > A tint over the picture to help text stand out. **Image overlay color** defaults to black. **Image overlay strength** goes from 0% to 90%. Default: 20%. At 0% the picture shows as it is. ### Content ![Theme editor sidebar showing the Spotlight section settings (part 2, scrolled): Text color scheme, Horizontal position, Vertical position, Mobile layout, Product cards, Layout.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-settings-2.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=cf6dd7b05d9e78a4b240da97f5f8790f) * **Text color scheme**: colors the text, buttons and arrows over the picture. Its background color is not drawn, so the picture shows through. * **Horizontal position**: **Left** (default), **Center** or **Right**. * **Vertical position**: **Top** (default), **Middle** or **Bottom**. * **Mobile layout**: **Below the picture** (default) or **Over the picture**. > [accordion] How Mobile layout works > > * **Below the picture**: on phones the text sits above the picture and the product cards in a row below it, both in the section's own **Color scheme**. Frosted cards turn solid here. > * **Over the picture**: the text stays on the picture at the top and the cards at the bottom, whatever positions you chose for desktop. > > On phones the product cards are always a row that shoppers swipe sideways. ### Product cards ![Theme editor sidebar showing the Spotlight section settings (part 3, scrolled): Horizontal position, Vertical position, Arrows color scheme, Product card background, Product card color strength, Product card blur.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-settings-3.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=7cbc8e9f84cb5e3211c41c1c57a8cd85) > [accordion] Layout > > * **Stacked down the side**: the cards sit one under another. > * **Card deck** (default): the cards sit on one pile, with the cards behind the top one peeking out at a slight tilt. Round previous and next arrows above the pile bring the next card to the front. The arrows show when there are two or more cards. In the Theme Customizer, the card you select comes to the front. > [accordion] Horizontal position and Vertical position > > Where the cards sit over the picture. Horizontal: **Left**, **Center** or **Right** (default). Vertical: **Top**, **Middle** or **Bottom** (default). > [accordion] Arrows color scheme > > The colors of the round deck arrows, so they stay readable on the picture whatever the text color scheme. > [accordion] Product card background > > * **Solid color scheme**: fills each card with its color scheme. > * **Frosted glass over the picture** (default): thins the card's color scheme and blurs the picture behind it. > > With frosted glass on, two more settings appear: > > * **Product card color strength**: from 20% to 90%. Default: 50%. Lower values show more of the picture. > * **Product card blur**: from 4 to 32 pixels. Default: 12. > [accordion] Product card button label > > The button text on every card, whatever the stock. Default: "Shop now". Leave it blank for "Shop now". ### Common settings ![Theme editor sidebar showing the Spotlight section settings (part 4, scrolled): Product card blur, Product card button label, Common settings, Color scheme, Top padding, Bottom padding, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-settings-4.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=f795e12ebb5ba76e06a653aaa889fe68) * **Color scheme**: the colors of the section around the banner, and of the text and cards on phones with **Below the picture**. * **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large. * **Page width**: **Regular**, **Fluid** (default) or **Full**. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. ## Blocks ### Text ![Theme editor sidebar showing the Spotlight copy block (in Spotlight) settings: Alignment, Desktop width limit.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-block-spotlight-copy-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=abf9c31a391874ecd5b23ba81375fbbb) The text over the picture is a fixed **Spotlight copy** block. It holds **Label**, **Heading**, **Text**, **Button** and **Group** blocks; see [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. * **Alignment**: **Left** (default), **Center** or **Right**. Lines up the blocks inside the text box. * **Desktop width limit**: from 320 to 800 pixels. Default: 540. The widest the text box can be. The section places the box with **Horizontal position** and **Vertical position** under **Content**. ### Product spotlight ![Theme editor sidebar showing the Product spotlight block (in Spotlight) settings: Product, Show description, Position, Color scheme.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/spotlight/spotlight-block-product-spotlight-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=9c1f00c92cffa08419a1296caf7e7d67) Each product card is a **Product spotlight** block. Add one per product and drag them to change their order. * **Product**: picked with the product picker. The card shows the product's featured image, title, a short description and the price, with the compare-at price struck through when there is one. Until you pick a product, the card shows example content in the Theme Customizer and is hidden in your store. * **Show description**: on by default. Shows the first 8 words of the product description. On phones the card is more compact and leaves the description out. * **Position**: **Start** or **End** (default). With **Stacked down the side**, the card lines up with the left or right edge of the stack. * **Color scheme**: the card's colors. The card button adds the product to the cart when it has a single variant and is in stock. For any other product it opens the product page. ## Best practices * **Use two or three cards in a deck.** The deck shows up to three cards at once, so more than that stay hidden until shoppers click through. * **Keep text and cards apart.** Put the text and the cards in different corners, for example text at the top left and cards at the bottom right, so they don't overlap. * **Raise the overlay for busy pictures.** An overlay strength of 30% to 40% keeps white text readable over a bright picture. * **Add a mobile image.** A portrait crop keeps the subject in view on phones. ## Related guides > [card] [Hero banner](https://docs.shopify.lightsout.agency/themes/facet/sections/hero-banner.md) > > A slideshow with the same product card on each slide. > [card] [Featured product](https://docs.shopify.lightsout.agency/themes/facet/sections/featured-product.md) > > Show one product with its full buy options. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.