Banner sticky scrolling
Banner sticky scrolling shows a series of full-width banners. Each banner sticks while the next one scrolls over it, and a list of categories follows the active banner. Product blocks place a product card on a banner.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Banner Sticky Scrolling. Drag it to where you want it on the page.
Step 2: Add banners
- Click Add block > Category item. Write the Category label, choose an image or video, the overlay, and a link.
- Add a Product block inside a category item to show a product card on that banner, and choose its position.
Step 3: Choose the effect
- Choose the Desktop scroll style (1) and Mobile scroll style: normal banner scroll, wipe transition or stacked overlap.
- Set the category list width, alignment and text style.
Settings reference
Banner Sticky Scrolling
| Layout | |
|---|---|
| Category width desktop | Slider. |
| Category width mobile | Slider. |
| Category alignment | Options: Left, Center, Right. |
| Category content background | Turns this on or off. |
| Category content color scheme | Colors from Theme settings > Colors. |
| Content padding | Slider. |
| Background height | Slider. |
| Category row gap | Slider. |
| Category text style | Options: Display, Page title, Section heading, Secondary heading, Subheading, Body. |
| Category text scale | Slider. |
| Make category font bolder | Turns this on or off. |
| Show category numbers | Turns this on or off. |
| Desktop scroll style | Options: Normal banner scroll, Wipe transition, Stacked overlap. |
| Mobile scroll style | Options: Normal banner scroll, Wipe transition, Stacked overlap. |
| Products | |
| Product width desktop | Slider. |
| Product width mobile | Slider. |
| Media desktop | |
| Media height mode | Options: Adapt, Viewport, Fixed. |
| Media ratio | Options: Square, Landscape 4:3, Landscape 16:9, Portrait 4:5, Portrait 3:4, Portrait 9:16. |
| Viewport height | Slider. |
| Fixed height | Slider. |
| Media mobile | |
| Media height mode | Options: Adapt, Viewport, Fixed. |
| Media ratio | Options: Square, Landscape 4:3, Landscape 16:9, Portrait 4:5, Portrait 3:4, Portrait 9:16. |
| Viewport height | Slider. |
| Fixed height | Slider. |
| Media appearance | |
| Media corner radius | Slider. |
| Banner spacing | Slider. |
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.