nicojuhari logo
Hero Banner

Hero Banner Section for Shopify — Speed, Flexibility, Conversions

Powerful hero banner with flexible layouts and rich content options to maximize conversions and showcase your brand.

Use the password: 1

View Demo

Features

  • Two layouts: split (image + content) or full-width background.
  • Separate desktop and mobile ordering, height, and font controls.
  • Rich content: eyebrow, headline, subtext, and two CTAs.
  • Performance-friendly and namespaced CSS.

Benefits

  • Faster conversions with a focused, clickable hero.
  • Perfect look on any device thanks to mobile-specific settings.
  • Clear hierarchy that guides visitors to the CTA.
  • Easy to edit in Shopify — no code needed.

How to Install

Go to Online Store > Themes > Actions > Edit Code

  • Add CSS File
    • In Assets folder, click Add a new asset
    • Create file: component-nc-hero-banner.css
    • Copy & paste the CSS code from the file
    • Save
  • Add Section File
    • In Sections folder, click Add a new section
    • Create file: nc-hero-banner.liquid
    • Copy & paste the complete section code
    • Save
The section has been tested in the Dawn theme only, but it should work with most Shopify themes.
Contact me and I will send the section's files to your email Contact
© 2025 Shopify & JavaScript Developer