Hero Banner Section for Shopify — Speed, Flexibility, Conversions

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