Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Hero Premium Section

Learn how to create a Hero Premium section with Sections Pro in Shopify

Description of the 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.

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 "Hero Premium"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Overview of the Configuration Settings

  1. Font Settings:

    • Override theme fonts with the option to choose custom fonts for headlines and text.
    • Control text size and line height for both desktop and mobile views.

  2. Color Settings:

    • Customize text and background colors, including gradient options.
    • Set cover background color and opacity for overlays.

  3. Background Settings:

    • Add background images and choose their placement (left, center, right).
    • Incorporate background videos with options to control autoplay, loop, controls, and mute settings.

  4. Padding and Margin Settings:

    • Set custom padding and margins for both desktop and mobile views for precise layout control.

  5. Hero Container and Design Settings:

    • Adjust the maximum width and round the borders of the hero container.
    • Configure box alignment (left, center, right).
    • Add subtle shadow effects to hero content.

  6. Column and Content Settings:

    • Use blocks to add various content types such as headlines, paragraphs, images, videos, buttons, icons, and rich text.
    • Customize button styles, including colors, padding, border radius, and text size.

  7. Icon and Icon with Text Settings:

    • Choose icon types from a wide range of pre-defined icons.
    • Set icon sizes, colors, shapes, and alignment.
    • Combine icons with text and adjust their layout with customized spacing.

The Hero Premium section offers a robust set of features and customization options, empowering store owners to create engaging and high-conversion hero sections effortlessly.