Hero Parallax is a Shopify theme section in the Section Star library. Create a hero with a parallax background effect.
About the Hero Parallax section
The Hero Parallax section is a dynamic and visually appealing feature that allows you to create a hero section with a parallax effect for your Shopify store. This section is perfect for capturing visitors' attention with a stunning background image, captivating texts, and call-to-action buttons. The parallax scrolling effect adds depth and movement, enriching the user experience and making your store stand out.
Live demo
Use cases
- Seasonal Promotions: Highlight your seasonal sales and promotions with engaging headlines and attractive call-to-action buttons.
- New Arrivals: Showcase your latest products with high-quality images and enticing descriptions.
- Customer Testimonials: Add five-star customer reviews and feedback to build trust and credibility.
- Brand Storytelling: Use the section to tell your brand story with rich text blocks and images.
- Event Announcements: Promote upcoming events or launches with a captivating hero section.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Hero Design
Set the design for the hero
| Setting | Type | Default |
|---|---|---|
| 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 |
| Box Alignment | Text alignment | center |
Content
Set the section content.
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>This is our hero tagline</b> |
| Content | Rich text | <p>Use this to add a description to y… |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Image
Set the background image.
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Mobile Image | Image | — |
| Image Size | Number | 1100 |
| Mobile Image Size | Number | 800 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
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 “Hero Parallax”.
- 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.