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.

​

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

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.

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.

​

Section settings

​

Pictures

Image position

Left (default) or Right. The side of the picture column on desktop.

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.

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.

Space between pictures

The gap between pictures on desktop: Small, Medium, Large (default) or Extra large.

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

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

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.

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.

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.

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 for their settings.

SVG code that contains scripts or event handlers, or that doesn’t include an <svg> 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

Colors

Create the color schemes each highlight can take.

Image with text

Show one picture beside text without the scroll effect.