Hero Slider is a Shopify theme section in the Section Star library. Display a large image and CTA on your home or landing pages.
About the Hero Slider section
The Hero Slider is an engaging, full-width carousel that takes center stage on your Shopify store's homepage or any designated page. This section brings dynamic visuals to your site, allowing you to highlight multiple products, collections, or promotional content in a slideshow format. The Hero Slider includes customizable text, buttons, and background options, ensuring it fits seamlessly with your store's branding.
Live demo
Use cases
- Product Promotions: Showcase your best-selling products or new arrivals prominently on your homepage, encouraging visitors to explore.
- Seasonal Campaigns: Create eye-catching slides that promote seasonal sales, holiday collections, and special discounts.
- Brand Storytelling: Use the slider to tell your brand's story with compelling visuals and text, enhancing customer engagement.
- Customer Testimonials: Highlight positive customer feedback and reviews in a visually appealing format to build trust and credibility.
- Event Announcements: Promote upcoming events, webinars, or special live sessions with informative and attractive slides.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Slideshow Design
Set the display for the slideshow
| Setting | Type | Default |
|---|---|---|
| Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(255, 255… |
| Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(255, 255… |
| Indicator Color | Color | #fff |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
Content
Set the display of the content.
| Setting | Type | Default |
|---|---|---|
| Margin | Number | 10 |
| Padding | Number | 20 |
| Text Color | Color | #111 |
| Background Color | Color or gradient | linear-gradient(177deg, rgba(255, 255… |
| Show Glass Effect? | Checkbox | On |
Button
Set content for the buttons.
| Setting | Type | Default |
|---|---|---|
| Show buttons? | Checkbox | On |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Secondary Button
Set content for the secondary button
| Setting | Type | Default |
|---|---|---|
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
Slideshow
Set settings for your slideshow
| Setting | Type | Default |
|---|---|---|
| Subtle Shadow on Text | Checkbox | Off |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1) | 4 / 3 |
| Mobile Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1) | 16 / 9 |
| Enable Autoplay? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Slide block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Mobile Image (optional) | Image | — |
| Image Size | Number | 1100 |
| Mobile Image Size | Number | 800 |
| Main Text | Inline rich text | <strong>Slide Headline</strong> |
| Alternate Text | Inline rich text | Sample slide text. |
| Call to Action Text | Text | Lets go |
| Call to Action Link | URL | — |
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 Slider”.
- 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.