Parallax scroll

The Parallax scroll section tells your brand story as a run of cards that slide in from alternating sides while the visitor scrolls, with the heading staying in place behind them. Use it for a philosophy, an "about us", or the pillars behind a product line.

How to add this section

Steps

1. In the theme editor (Customize), open the page you want it on.

2. Click Add section and choose Parallax scroll from the Storytelling group.

3. Add up to 7 Info card blocks and give each one an image or a video.

4. Fill in the heading, the description, and the button, then Save.

The section is available on any page template. It cannot be added to the header, the footer, or an overlay group.

How the animation behaves

• Cards alternate sides as they come in: the first from the left, the second from the right, and so on.

• On screens wider than 1200px, every third card is inset a little so the run does not fall into a strict zigzag.

• A Scroll to Explore hint appears under the heading and fades out as the first card arrives.

• The animation is skipped for visitors who have asked their device to reduce motion, and on very short screens (under 600px tall, or a landscape phone under 700px tall). The cards are then simply stacked and readable.

• A card's video plays only while the card is on screen and pauses when it leaves, so several videos in one section do not compete for bandwidth.

Section settings

General

Setting	Description
Color scheme	Select colors from Theme settings -> Colors. It applies to the section and to the cards.
Card width	The largest a card gets on desktop, from 320px to 720px. Cards still shrink to fit smaller screens, so this is a maximum rather than a fixed size.

Section header

Setting	Description
Subheading	Short line of text shown above the heading.
Heading	The main title of the section. It stays in place behind the cards while they scroll past.
Heading size	Choose Heading 1, Heading 2, or Heading 3.
Enable heading underline animation	Draws an animated underline under the words you set to italic in the heading. Use the Italic (I) button in the editor to mark the words.
Underline style	3 underline styles: Simple underline Curve stroke Squiggle underline
Underline color	The color of the animated underline.
Description	A short paragraph under the heading.

Enable heading underline animation and the theme's fade-in animation cannot run on the same heading, so turning the underline on switches the fade-in off for this section. Turn the underline off if you prefer the header to fade in like the rest of your page.

Button

Setting	Description
Button label	The text on the button under the cards. Leave it blank to hide the button.
Button link	Where the button goes. If you leave it blank, the button is shown as disabled.
Type	The button style, using the styles configured by the theme: Primary Outline Link

Mobile settings

Setting	Description
Hide description on mobile	Hides the section description on phones, so the cards start higher up the screen. On by default.

Section padding

Setting	Description
Top	Customize the top padding of the section (0 to 160px).
Bottom	Customize the bottom padding of the section (0 to 160px).

Section divider

Setting	Description
Show divider	Displays a dividing line to separate this section from the previous one.

Block settings

Add up to 7 Info card blocks, one per point in your story.

Setting	Description
Type	The media shown on the card: Image Video A card with no media yet shows a placeholder image.
Image	The image for the card, shown when Type is Image. The card follows the shape of the image you upload.
Video	A video uploaded to your store, shown when Type is Video. It plays on its own, without sound, and loops.
Link	An optional link. When it is set, the whole card becomes clickable.

Content inside a card

Each Info card holds its own blocks, so you can arrange the text next to the media:

• Highlight text, for a small label such as Our Belief

• Heading, for the card title

• Description, for a sentence or two under the title

Tips

• Keep the text on a card short. The card sits beside its image, so a label, a title, and one sentence read best while the card is moving.

• Cards look most even when their images share a shape, because each card follows the shape of its own image.

• 4 to 6 cards is a comfortable length. With only 2 the effect is barely noticeable, and at the maximum of 7 the visitor scrolls a long way before reaching the button.