Shopify Hero Section

Description of the Section

The Hero section, created with Sections Pro 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.

Demo of the Section

Installation Instructions

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

Sample Use Cases for a Shopify E-commerce Store

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.

Overview of the Configuration Settings

• Font Settings:

  • Override theme fonts: Option to use custom fonts for headline and text.
  • Text Font: Choose the custom font for text.
  • Headline Font: Select the custom font for headlines.

• Text Settings:

  • Text Size: Set the size of the text in pixels.
  • Line Height: Adjust the line height of the text.
  • Text Color: Define the color of the text.
  • Headline Size: Specify the size of the headline text in pixels.
  • Headline Line Height: Set the line height for the headline text.
  • Headline Color: Select the color of the headline text.
  • Subtle Shadow on Text: Option to add a text shadow for better readability.

• Color Settings:

  • Background: Choose the background color or gradient for the hero section.
  • Cover Background: Set the background for the overlay cover.
  • Cover Opacity: Adjust the opacity percentage of the cover background.

• Alignment Settings:

  • Box Alignment: Configure the horizontal alignment of the content box (left, center, right).
  • Text Alignment: Set the alignment of the text within the content box (left, center, right).

• Dimension Settings:

  • Max Width of Section: Specify the maximum width of the Hero section in pixels.
  • Padding (Top, Bottom, Left, Right): Adjust the padding around the content within the Hero section.
  • Element Spacing: Set the spacing between elements inside the section.

• Button Style Settings:

  • Button Background Color: Choose the background color or gradient for the CTA button.
  • Button Text Color: Define the color of the button text.
  • Padding (Top/Bottom, Left/Right): Configure the padding within the CTA button.
  • Border Radius: Set the border radius for the CTA button's corners.

• Content Settings:

  • Headline: Enter the main headline for the Hero section, supporting rich text.
  • Content: Add descriptive text or additional information within the Hero section.
  • Hero Image: Select an image to display in the background of the Hero section.
  • Call to Action (CTA): Define the text and link for the CTA button.