The Stacking cards section tells a story in a series of cards, such as the milestones of your brand. As customers scroll, each card stops near the top of the screen and the next one slides up over it, so the cards pile up. To add one, click Add section in the editor and select Stacking cards.
The Stacking cards preset has a heading, a paragraph and three Story card blocks with the years 2020, 2022 and 2024. No preset comes with photos. Until you choose them, each card shows a plain circle where the photo goes, on your store as well as in the editor.
How the cards stack
On screens 1000 px and wider, each card holds its place below the header while the next card slides over it. A card turns slightly as it rises into place. The cards under it step back and darken, and two of them stay in view behind the top card.
On narrower screens, and for visitors whose device is set to reduce motion, the cards show one under another without stacking.
Layout
Margin top and Margin bottom add space above and below the section. Section layout settings describes them. The section has no background settings.
Content
Setting
What it does
Heading
The centered heading above the cards. Words you make bold start a second line.
Text
A short centered paragraph under the heading.
Leave both empty to start the section with the first card.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Story card blocks
Each card is a panel with rounded corners. On screens 768 px and wider, the round photo is on the left and the text is on the right. On narrower screens, the photo is above the text.
Setting
What it does
Content source
Custom, the default, uses the photo, heading and text you enter in the block. Article fills the photo, heading, text and story from the blog post you choose in Article. Until you choose a post, the card keeps its custom content.
Badge
Short text on a round seal on the top right corner of the photo, such as a year. With Article, leave it empty to show the year the post was published. With Custom, leave it empty to hide the seal.
Image
The photo, cropped to a circle around its center. Shows with Custom.
Text
The paragraph under the card's heading. Shows with Custom.
Heading
Shows with Custom. Words you make bold start a second line.
Link and Button label
The button under the text, with an arrow in a circle. When the card has a story, the button opens it in a popup, and Link adds a button under the story. Without a story, the button opens Link, and an empty Link hides it. Button label starts as Read story.
Full story
The longer text that opens in a popup when the button is clicked. Shows with Custom. With Article, the popup shows the whole blog post.
Article
The blog post the card uses when Content source is Article. The card shows the post's title, its featured image and the first 220 characters of its excerpt, or of the post when it has no excerpt.
The popup opens with the card's photo at the top, followed by its Story photo blocks, which customers swipe through when there is more than one. Under them come the badge, the heading, the story and the button to Link. Arrows on both sides of the popup move to the previous or next story.
Story photo blocks
A card can hold Story photo blocks, each with one Image. To add one, click Add block under the card in the editor sidebar and select Story photo. The photos show in the popup after the card's own photo, in the order of the blocks.
The Stacking cards section tells a story in a series of cards, such as the milestones of your brand. As customers scroll, each card stops near the top of the screen and the next one slides up over it, so the cards pile up. To add one, click Add section in the editor and select Stacking cards.
The Stacking cards preset has a heading, a paragraph and three Story card blocks with the years 2020, 2022 and 2024. No preset comes with photos. Until you choose them, each card shows a plain circle where the photo goes, on your store as well as in the editor.
How the cards stack
On screens 1000 px and wider, each card holds its place below the header while the next card slides over it. A card turns slightly as it rises into place. The cards under it step back and darken, and two of them stay in view behind the top card.
On narrower screens, and for visitors whose device is set to reduce motion, the cards show one under another without stacking.
Layout
Margin top and Margin bottom add space above and below the section. Section layout settings describes them. The section has no background settings.
Content
Setting
What it does
Heading
The centered heading above the cards. Words you make bold start a second line.
Text
A short centered paragraph under the heading.
Leave both empty to start the section with the first card.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Story card blocks
Each card is a panel with rounded corners. On screens 768 px and wider, the round photo is on the left and the text is on the right. On narrower screens, the photo is above the text.
Setting
What it does
Content source
Custom, the default, uses the photo, heading and text you enter in the block. Article fills the photo, heading, text and story from the blog post you choose in Article. Until you choose a post, the card keeps its custom content.
Badge
Short text on a round seal on the top right corner of the photo, such as a year. With Article, leave it empty to show the year the post was published. With Custom, leave it empty to hide the seal.
Image
The photo, cropped to a circle around its center. Shows with Custom.
Text
The paragraph under the card's heading. Shows with Custom.
Heading
Shows with Custom. Words you make bold start a second line.
Link and Button label
The button under the text, with an arrow in a circle. When the card has a story, the button opens it in a popup, and Link adds a button under the story. Without a story, the button opens Link, and an empty Link hides it. Button label starts as Read story.
Full story
The longer text that opens in a popup when the button is clicked. Shows with Custom. With Article, the popup shows the whole blog post.
Article
The blog post the card uses when Content source is Article. The card shows the post's title, its featured image and the first 220 characters of its excerpt, or of the post when it has no excerpt.
The popup opens with the card's photo at the top, followed by its Story photo blocks, which customers swipe through when there is more than one. Under them come the badge, the heading, the story and the button to Link. Arrows on both sides of the popup move to the previous or next story.
Story photo blocks
A card can hold Story photo blocks, each with one Image. To add one, click Add block under the card in the editor sidebar and select Story photo. The photos show in the popup after the card's own photo, in the order of the blocks.