# Hero

> Display a large image and CTA on your home or landing pages to sell from the moment visitors arrive.

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

---

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

1. **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.
2. **Seasonal Promotions:** Highlight seasonal sales by emphasizing promotional text and images that evoke the season’s feel, encouraging customers to browse items on sale.
3. **Brand Storytelling:** Showcase your brand’s story or mission with compelling imagery and text, allowing new visitors to connect emotionally with your brand.
4. **Featured Products:** Use the section to highlight new or best-selling products, complete with enticing headlines and direct links to product pages.
5. **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 |