Hero is a Shopify theme section in the Section Star library. Display a large image and CTA on your home or landing pages to sell from the moment visitors arrive.
About the Hero section
The Hero section, created with Section Star for Shopify, serves as the focal point of your website. This section allows you to display a large background image, headline, subheadings, CTAs (Call to Actions), and text content. It is ideal for capturing the visitor's attention and conveying key brand messages or promotions right from the landing page. The Hero section is fully customizable, enabling you to adjust fonts, colors, paddings, and alignments according to your brand’s identity.
Live demo
Use cases
- Launch a New Collection: Use the Hero section to introduce a new collection with a captivating background image, a bold headline, and a "Shop Now" CTA button.
- Seasonal Promotions: Highlight seasonal sales by emphasizing promotional text and images that evoke the season’s feel, encouraging customers to browse items on sale.
- Brand Storytelling: Showcase your brand’s story or mission with compelling imagery and text, allowing new visitors to connect emotionally with your brand.
- Featured Products: Use the section to highlight new or best-selling products, complete with enticing headlines and direct links to product pages.
- Event Announcements: Create buzz around upcoming events or webinars by prominently featuring event details and a registration link.
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 |
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 |
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 | — |
| Hero Image | Image | — |
| Mobile Hero Image | Image | — |
| Image Size | Number | 1100 |
| Mobile Image Size | Number | 800 |
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”.
- 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.