Scroll Text Hero is a Shopify theme section in the Section Star library. This unique hero section syncs your headline to the scrollbar showing a unique marquee that changes as you scroll the page. It is a great way to add some interest to your site as the customer scrolls.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
| Setting | Type | Default |
|---|---|---|
| Hero Padding Top/Bottom | Number | 100 |
| Hero Padding Top/Bottom | Number | 100 |
| Hero Padding Left/Right | Number | 10 |
| Subtle Shadow on Text | Checkbox | On |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>This is our hero tagline</b> |
| Hero Image | Image | — |
| Mobile Hero Image | Image | — |
| Image Size | Number | 1100 |
| Mobile Image Size | Number | 800 |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Scroll Text Hero”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.