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.

​

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.

​

Section settings

​

Media

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.

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.

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

• 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.

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

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.

Horizontal position and Vertical position

Where the cards sit over the picture. Horizontal: Left, Center or Right (default). Vertical: Top, Middle or Bottom (default).

Arrows color scheme

The colors of the round deck arrows, so they stay readable on the picture whatever the text color scheme.

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.

Product card button label

The button text on every card, whatever the stock. Default: “Shop now”. Leave it blank for “Shop now”.

​

Common settings

• 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 for details.

​

Blocks

​

Text

The text over the picture is a fixed Spotlight copy block. It holds Label, Heading, Text, Button and Group blocks; see Theme blocks 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

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

Hero banner

A slideshow with the same product card on each slide.

Featured product

Show one product with its full buy options.