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
- New Arrivals: Highlight the latest products in your store with a captivating headline and enticing imagery.
- Seasonal Promotions: Announce seasonal sales or limited-time offers to engage customers and boost sales.
- Top-Rated Products: Showcase customer favorites with a five-star rating graphic to build trust and encourage sales.
- Brand Story: Present your brand's story or unique selling points right at the top to captivate your audience.
- 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 |
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 “Feature 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.