D Drop-in Sections
Subscribe
Back to library

Hero · Hero

Hero Banner — free copy-paste Shopify section

Full-width hero with overlay, height presets, dual CTA

Looking for a free Shopify hero section you can paste without installing an app? This full-width banner is built for Online Store 2.0 homepages and campaign landing pages. Merchants use it when they need a clear headline, dual CTAs, and an overlay image that still looks sharp on mobile.

Where to use it

Pages

  • Homepage
  • Landing page

Jobs to be done

  • Showcase product

Functions

  • Hero

How to install

Copy the full dropin-hero-banner.liquid source, create that file under your theme’s sections/ folder, then add the section in the Shopify theme editor. It works on Dawn, Prestige and any Online Store 2.0 theme — no app, snippet or global CSS required. See the install guide.

FAQ

Does this Shopify hero section need an app?

No. Copy the .liquid file into your theme’s sections folder and add it in the theme editor.

Will it work on Dawn or other OS 2.0 themes?

Yes. It is self-contained CSS/JS with a di- namespace, so it does not depend on Dawn-specific classes.

Can I change the height and overlay?

Yes. Overlay opacity, section height (including full-screen), and left/center alignment are theme-editor settings.

Related Sections

Related Solution Kits