Shopify Feature Hero Section

Description of the Section

The Feature Hero section from Sections Pro 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.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Premium Sections
3. Search for "Feature Hero"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

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.

Overview of the Configuration Settings

Font Settings

• Override theme fonts: Option to use custom fonts instead of the theme's default.
• Headline Font: Choose the font for your headline text.
• Text Font: Choose the font for your main text.

Text Settings

• Text Size: Adjustable text size in pixels.
• Text Line Height: Different line height options to set the spacing between lines of text.
• Text Color: Customizable color for text.
• Headline Size: Adjustable headline size in pixels.
• Headline Line Height: Set line height for headlines.
• Headline Color: Customizable color for headlines.

Background Settings

• Background: Define the background color or gradient for the section.
• Content Background: Set the background color or gradient for the content area.
• Background Image: Option to upload a background image.
• Cover Background: Customize the overlay background color or gradient.
• Cover Opacity: Set the opacity level for the cover overlay.

Shape Settings

Different shapes available for the hero section to enhance its visual appeal:

• None
• Single Wave
• Overlapping Single Wave
• Wave
• Overlapping Wave
• Sharp Wave
• Sharp Overlapping Wave
• Rounded
• Rounded Offset
• Point
• Offset Point

Dimension Settings

• Max Width of Section: Set the maximum width of the section in pixels.
• Gap Between Images: Define spacing between featured images.
• Overlap of Featured Items: Adjust the overlap level for featured items.
• Padding: Set padding values for top, bottom, left, and right.

Feature Settings

• Feature Max Width: Set maximum width for feature blocks.
• Feature Background Color: Customize the background color or gradient for feature blocks.
• Image Aspect Ratio: Choose aspect ratio for featured images (21:9, 16:9, 4:3, 1:1, auto).
• Round Borders on Feature: Adjust the border radius.
• Subtle Shadow on Feature: Option to add a subtle shadow around feature blocks.
• Feature Headline Size: Adjustable size for feature headlines.
• Feature Headline Color: Customizable color for feature headlines.
• Feature Text Size: Adjustable text size for feature descriptions.
• Feature Text Color: Customizable color for feature text.
• Padding in Feature: Define padding within feature blocks.
• Spacing between Elements in Feature: Set spacing between elements within feature blocks.

Content Settings

• Headline: Customizable rich text for the section headline.
• Headline Alignment: Set the alignment of the section headline.
• Content: Define rich text content for the section.
• Content Alignment: Set alignment for the main content text.

Button Settings

• Show buttons: Toggle to show or hide buttons.
• Call to Action (CTA): Rich text for primary CTA button.
• Call to Action Link: URL for primary CTA button.
• Show Secondary Action: Toggle to show or hide secondary action button.
• Secondary Call to Action: Rich text for secondary CTA button.
• Secondary Call to Action Link: URL for secondary CTA button.

Button Style Settings

• Primary Button Background Color: Customize background color for the primary button.
• Secondary Button Background Color: Customize background color for the secondary button.
• Primary Button Text Color: Set text color for the primary button.
• Secondary Button Text Color: Set text color for the secondary button.
• Text Size: Adjustable text size for buttons.
• Padding: Set top/bottom and left/right padding for buttons.
• Border Radius: Define border radius for rounded button corners.
• Border Size: Set border size for buttons.
• Border Color: Customize border color.

Slideshow Settings (Mobile Only)

• Progress Background Color: Customize background color for slideshow progress indicator.
• Progress Foreground Color: Customize foreground color for slideshow progress indicator.
• Indicator Color: Set color for slideshow indicators.
• Enable Autoplay: Option to enable or disable autoplay.
• Autoplay Time: Different autoplay time intervals for slideshow (10s, 7.5s, 5s, 3s, 2s).