# Hero Slider

> Display a large image and CTA on your home or landing pages.

URL: https://sectionstar.app/sections/hero-slider/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**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

1. **Product Promotions:** Showcase your best-selling products or new arrivals prominently on your homepage, encouraging visitors to explore.
2. **Seasonal Campaigns:** Create eye-catching slides that promote seasonal sales, holiday collections, and special discounts.
3. **Brand Storytelling:** Use the slider to tell your brand's story with compelling visuals and text, enhancing customer engagement.
4. **Customer Testimonials:** Highlight positive customer feedback and reviews in a visually appealing format to build trust and credibility.
5. **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 | — |