Card fan

Card fan stacks cards around a center point and opens them like a hand of cards as the visitor scrolls. Each card has an image, a color, a title and a link, so it works for shades, scents or collections. A button sits in the middle.

How to set it up

Step 1: Add the section

1. In the theme editor, open the page and click Add section.
2. Choose Card fan. Drag it to where you want it on the page.

Step 2: Add the cards

1. Click Add block > Card. Choose an Image, a Card color and a Title and Subtitle.
2. Add a Link to a product or collection.
3. Leave Text color empty to pick light or dark text from the card color.
4. Add 5 to 9 cards for the best fan.

Step 3: Set the fan

1. Under Fan, choose how it Opens: With the scroll or Once, when in view.
2. Set the Spread (1) on desktop and on mobile, and the Card width.
3. Write the Center button label and add its link.

Step 4: Write the heading

1. Under Heading, write an eyebrow, a heading (italic words are highlighted), the highlight style and color, and a short text.

Step 5: Review the settings

1. See the settings reference below for every option.

Settings reference

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

• On touch screens, the first tap picks a card and turns it upright, a second tap opens its link, and a swipe moves to the next card.
• With the scroll needs the browser's scroll-driven animation; other browsers open the fan once it is in view.
• Visitors who ask for reduced motion see the fan open without the animation.

Related

• Promo tiles
• Collection spotlight
• Motion and hover effects