Horizontal scroll
On desktop, Horizontal scroll pins in place and its panels travel sideways as visitors scroll down. On mobile it becomes a swipe rail. Mix product panels and image panels, and end with a big word and a link.
How to set it up
Step 1: Add the Horizontal scroll section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Horizontal scroll and select it (1).
Step 2: Set the end panel
- Set the End panel word (1), badge and link, and the progress line.
Step 3: Add panels
- Add Product panel blocks (a product, a tint and a width) and Image panel blocks (an image, a caption and a width).
Settings reference
Horizontal scroll
| End panel word | |
|---|---|
| End panel badge | |
| End panel link | Where the link goes. |
| Progress line | Desktop: the line beside the heading. Mobile: a line under the swipe. Options: Desktop and mobile, Desktop only, Mobile only, Off. |
Product panel
| Product | A product. |
|---|---|
| Panel tint | |
| Width | Options: Small, Medium, Large. |
Image panel
| Image | An image from your files. |
|---|---|
| Caption | |
| Width | Options: Small, Medium, Large. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Visitors who prefer reduced motion see a normal swipe rail.