Hero Builder is a Shopify theme section in the Section Star library. Create amazing hero sections with images, icons, columns, shapes and more.
About the Hero Builder section
The Hero Premium section is a dynamic and visually appealing component designed to enhance the banner area of your Shopify store. This section is highly customizable, allowing you to incorporate various elements like images, videos, text, icons, and buttons. It provides flexible design options, including background colors, gradients, images, and videos, making it ideal for showcasing key promotions or messages prominently on your homepage or any other page.
Live demo
Use cases
-
Seasonal Promotions: Use the Hero Premium section to highlight seasonal sales or special promotions. Add a compelling headline, a short engaging message, and a call-to-action button to direct visitors to the sale page.
-
New Product Launches: Showcase new products with a background video or high-quality image, a bold headline, and a button that links directly to the product page. This can generate excitement and drive conversions.
-
Customer Testimonials: Add a customer testimonial block with a rich text option, a 5-star rating, and a customer photo. This can help build trust with new visitors.
-
Brand Story: Use the Hero Premium section to share your brand story with a combination of text, videos, and images. This can enhance your brand's connection with customers by providing them with more context about your brand values and mission.
-
Special Announcements: Make important announcements such as free shipping offers, return policies, or new store features. Adding an icon with text can make these announcements more eye-catching.
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 |
| Mobile Text Size |
Range |
15 |
| Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
1.2 |
| Text Color |
Color |
#111 |
| Headline Size |
Range |
40 |
| Mobile Headline Size |
Range |
40 |
| Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
1.2 |
Section Design
Set the design of the section.
| Setting |
Type |
Default |
| Background Color |
Color or gradient |
linear-gradient(164deg, rgba(52, 133,… |
| Background Image |
Image |
— |
| Image Width |
Number |
1100 |
| Mobile Image Width |
Number |
600 |
| Background Image Position |
Select (Left, Center, Right) |
left |
| Hero Video |
Video |
— |
| Play Inline |
Checkbox |
On |
| Autoplay |
Checkbox |
On |
| Loop Video |
Checkbox |
On |
| Show Video Controls |
Checkbox |
Off |
| Mute Video |
Checkbox |
On |
| Cover Background |
Color or gradient |
linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity |
Range |
25 |
| Max Width |
Number |
5000 |
| Round Borders |
Range |
0 |
| Padding Top/Bottom |
Number |
25 |
| Mobile Padding Top/Bottom |
Number |
25 |
| Padding Left/Right |
Number |
25 |
| Mobile Padding Left/Right |
Number |
25 |
| Shape |
Select (None, Single Wave, Overlapping Single Wave, Wave, Overlapping Wave, Sharp Wave…) |
overlapping-wave |
Container Design
Set the design of the container.
| Setting |
Type |
Default |
| Max Width |
Number |
1000 |
| Box Alignment |
Select (Left, Center, Right) |
center |
| Width |
Range |
50 |
| Padding Top/Bottom |
Number |
10 |
| Mobile Padding Top/Bottom |
Number |
10 |
| Padding Left/Right |
Number |
10 |
| Mobile Padding Left/Right |
Number |
10 |
| Margin Left/Right |
Number |
10 |
| Mobile Margin Left/Right |
Number |
10 |
| Background Color |
Color or gradient |
linear-gradient(164deg, #FFFFFF 50%, … |
| Round Borders on Hero |
Range |
5 |
| Subtle Shadow on Hero |
Checkbox |
On |
| Gap Between Columns |
Number |
20 |
| Gap Between Content Elements |
Number |
20 |
Media Design
Set the design of the media.
| Setting |
Type |
Default |
| Round Borders on Media |
Range |
5 |
| Subtle Shadow on Media |
Checkbox |
On |
Column block settings
| Setting |
Type |
Default |
| Width |
Select (Default, 10%, 20%, 25%, 33%, 40%…) |
1fr |
Headline block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Content |
Inline rich text |
<strong>This is our hero.</strong> |
Paragraph block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Content |
Inline rich text |
This is sample content for your hero … |
Content block settings
| Setting |
Type |
Default |
| Content Tag |
Select (Paragraph, Headline 1, Headline 2, Headline 3, Headline 4, Headline 5) |
p |
| Alignment |
Text alignment |
left |
| Content |
Inline rich text |
Add headlines, text, and more with th… |
Rich Text block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Content |
Rich text |
<h4><b>Create Amazing Content</b></h4… |
Image block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
center |
| Image |
Image |
— |
| Call to Action Link |
URL |
— |
| Aspect Ratio |
Select (Auto, 4:1, 21:9, 16:9, 4:3, 1:1) |
auto |
| Max Width (optional) |
Number |
— |
Video block settings
| Setting |
Type |
Default |
| Hero Video |
Video |
— |
| Optional Link |
URL |
— |
| Play Inline |
Checkbox |
On |
| Autoplay |
Checkbox |
Off |
| Loop Video |
Checkbox |
Off |
| Show Video Controls |
Checkbox |
On |
| Mute Video |
Checkbox |
Off |
Button block settings
Primary Button
Set content for the primary button
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| 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 |
5 Star block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Icon Width |
Number |
100 |
| Spacing Between Elements |
Number |
20 |
| Gap Between Content Items |
Number |
5 |
| Text |
Inline rich text |
Rated 4.9/5 based on 100+ Testimonials |
| # Stars |
Select (5, 4.5) |
5 |
| Icon Color |
Color |
#111 |
Icon block settings
| Setting |
Type |
Default |
| Background |
Color or gradient |
linear-gradient(164deg, #0D8BF4 0%, #… |
| Icon Color |
Color |
#fff |
| Alignment |
Text alignment |
left |
| Icon Shape |
Select (Square, Rounded, Circle) |
circle |
| Icon Padding |
Number |
25 |
| Icon Size |
Range |
40 |
| Icon |
Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) |
tag |
Icon with Text block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Icon Color |
Color |
#111 |
| Icon Size |
Number |
25 |
| Gap Between Content Items |
Number |
5 |
| Element Spacing |
Number |
20 |
| Text |
Inline rich text |
This is sample text to go along with … |
| Icon |
Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) |
tag |
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 Builder”.
- 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.
