# Feature Hero

> A beautiful hero with featured sections.

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

---

**Feature Hero** is a Shopify theme section in the Section Star library. A beautiful hero with featured sections.

## About the Feature Hero section

The Feature Hero section from **Section Star** for Shopify allows store owners to highlight key offerings with an eye-catching hero banner accompanied by interactive featured blocks. This section is highly customizable, letting you define typography, background, dimensions, and button styles.

## Live demo

## Use cases

1. **New Arrivals**: Highlight the latest products in your store with a captivating headline and enticing imagery.
2. **Seasonal Promotions**: Announce seasonal sales or limited-time offers to engage customers and boost sales.
3. **Top-Rated Products**: Showcase customer favorites with a five-star rating graphic to build trust and encourage sales.
4. **Brand Story**: Present your brand's story or unique selling points right at the top to captivate your audience.
5. **Newsletter Signup**: Encourage visitors to join your mailing list with a persuasive call-to-action.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Font
Set the fonts for your section

| Setting | Type | Default |
| --- | --- | --- |
| Override theme fonts | Checkbox | Off |
| Headline Font | Font | sans-serif |
| Text Font | Font | sans-serif |

### Text
Set the text for your section

| Setting | Type | Default |
| --- | --- | --- |
| Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | 1.5 |
| Text Color | Color | #111 |
| Headline Size | Range | 40 |
| Headline Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
| Headline Color | Color | #111 |

### Section Design
Set the design for the section

| Setting | Type | Default |
| --- | --- | --- |
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background | Color or gradient | — |
| Content Background | Color or gradient | linear-gradient(319deg, rgba(226, 236… |
| Background Image | Image | — |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 0 |
| Shape | Select (None, Single Wave, Overlapping Single Wave, Wave, Overlapping Wave, Sharp Wave…) | rounded |

### Dimensions
Set the section dimensions in pixels.

| Setting | Type | Default |
| --- | --- | --- |
| Max Width of Section | Number | 1000 |
| Gap Between Images | Number | 25 |
| Overlap of Featured Items | Number | -125 |
| Padding Top | Number | 125 |
| Padding Bottom | Number | 125 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |
| Spacing between Elements | Number | 15 |

### Features
Set the display of the featured section.

| Setting | Type | Default |
| --- | --- | --- |
| Feature Max Width | Number | 1000 |
| Feature Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 4 / 3 |
| Round Borders on Feature | Range | 5 |
| Subtle Shadow on Feature | Checkbox | On |
| Feature Headline Size | Range | 20 |
| Feature Headline Color | Color | #111 |
| Feature Text Size | Range | 15 |
| Feature Text Color | Color | #111 |
| Padding in Feature | Number | 20 |
| Spacing between Elements in Feature | Number | 10 |

### Content
Set the content for the section

| Setting | Type | Default |
| --- | --- | --- |
| Headline | Inline rich text | <b>Sample headline</b> |
| Headline Alignment | Text alignment | center |
| Content | Inline rich text | This is the placeholder text for the … |
| Content Alignment | Text alignment | center |

### 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
Mobile slideshow settings

| Setting | Type | Default |
| --- | --- | --- |
| Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Indicator Color | Color | #111 |
| Enable Autoplay? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |

### Feature block settings

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Content Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Featured Product</b> |
| Show Five Stars | Checkbox | On |
| Star Color | Color | #111 |
| Text | Inline rich text | Use this text block to describe your … |
| Button Link | URL | — |
| Button Text | Text | Learn more |