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.
.png)
How to add this section
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: |
| Underline color | The color of the animated underline. |
| Description | A short paragraph under the heading. |
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: |
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 | 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.
No comments yet