Start a project

Hero banner, split screen and video sections for Shopify

The big, page-defining layouts: hero banners with text over an image or a video, split screens, angled splits, sticky-scroll stories and cards that break their own grid.

Install Panely free → See the demos

These sections set the tone at the top of a page or between product rows. Image with text overlay is a full-bleed hero with your words in any corner. Text over video does the same over a background video (a video file or YouTube), with a poster image for devices that won’t autoplay.

Split screen puts an image beside your copy. Diagonal split divides the two panes with an angle you choose, or a curve or a chevron. Sticky scroll holds an image still while blocks of text scroll past, which suits brand stories and product walkthroughs. Offset cards stagger, overlap or tilt, for a looser, editorial feel.

Image with text overlay Offset cards Text over video Sticky scroll Diagonal split Split screen

Image with text overlay

Layered

A full-bleed image with your words laid over it. Position the text in any corner.

4 designs: Full bleed, Contained, Rounded, Framed. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 39

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Copy max width Slider, 280–1200px phone & desktop
Layout
  • Section height Slider, 200–900px phone & desktop
  • Text position Top left · Centre · Bottom left · Bottom right
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop
Style
  • Overlay darkness Slider, 0–0.9 phone & desktop

Content

Image
  • Background image Image
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Style
  • Corner radius Slider, 0–48px phone & desktop
  • Overlay color Colour phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Offset cards

Layered

Cards that break their own grid — staggered, overlapping or tilted.

4 designs: Staggered, Overlap, Tilt, Stepped. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 45

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Vertical offset Slider, 0–160px
  • Columns Slider, 2–4 phone & desktop
  • Gap Slider, 0–80px phone & desktop
  • Image height Slider, 120–560px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Cards
  • Cards A list of cards (up to 12): Image, Title, Body, Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Card style
  • Card title font Google Font and weight phone & desktop
  • Card title size Slider, 10–96px phone & desktop
  • Card title color Colour phone & desktop
  • Card title line height Slider, 0.9–2.4 phone & desktop
  • Card title letter spacing Slider, -3–8px phone & desktop
  • Card title alignment Design default · Left · Center · Right phone & desktop
  • Card body font Google Font and weight phone & desktop
  • Card body size Slider, 10–96px phone & desktop
  • Card body color Colour phone & desktop
  • Card body line height Slider, 0.9–2.4 phone & desktop
  • Card body letter spacing Slider, -3–8px phone & desktop
  • Card body alignment Design default · Left · Center · Right phone & desktop
  • Card background Colour phone & desktop
  • Card corner radius Slider, 0–36px phone & desktop

Text over video

Layered

A looping background video with your words over it, and a poster image for anything that will not autoplay.

4 designs: Full bleed, Contained, Rounded, Split. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 40

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Copy max width Slider, 280–1200px phone & desktop
Layout
  • Section height Slider, 240–900px phone & desktop
  • Text position Top left · Centre · Bottom left · Bottom right
Video
  • Loop On / off
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop
Style
  • Overlay darkness Slider, 0–0.9 phone & desktop

Content

Video
  • Video Link A Shopify video file (.mp4) or a YouTube link. Plays muted, on a loop, as a background.
  • Poster image Image Shows while the video loads. Leave empty with a YouTube link to use its thumbnail.
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop
Style
  • Overlay color Colour phone & desktop

Sticky scroll

Scroll

An image that stays put while your text scrolls past it. Add as many blocks as the story needs.

4 designs: Image left, Image right, Centered, Full. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 27

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px
  • Padding bottom Slider, 0–200px
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Image height Slider, 40–100vh phone & desktop
  • Gap between blocks Slider, 24–320px phone & desktop

Content

Image
  • Image that stays put Image
Blocks
  • Scrolling blocks A list of blocks (up to 12): Marker, Title, Body

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Block style
  • Marker font Google Font and weight phone & desktop
  • Marker size Slider, 10–96px phone & desktop
  • Marker color Colour phone & desktop
  • Marker line height Slider, 0.9–2.4 phone & desktop
  • Marker letter spacing Slider, -3–8px phone & desktop
  • Marker alignment Design default · Left · Center · Right phone & desktop
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–96px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.9–2.4 phone & desktop
  • Title letter spacing Slider, -3–8px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
  • Body font Google Font and weight phone & desktop
  • Body size Slider, 10–96px phone & desktop
  • Body color Colour phone & desktop
  • Body line height Slider, 0.9–2.4 phone & desktop
  • Body letter spacing Slider, -3–8px phone & desktop
  • Body alignment Design default · Left · Center · Right phone & desktop

Diagonal split

Split

Two panes divided by an angled edge instead of a straight one. Set the angle yourself.

4 designs: Diagonal, Steep, Curve, Chevron. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 37

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Max width Slider, 600–1800px phone & desktop
Layout
  • Height Slider, 240–900px phone & desktop
  • Angle Slider, 0–30% phone & desktop
  • Copy padding Slider, 12–140px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Image
  • Image Image
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Split screen

Split

Two equal panes — an image on one side, your copy on the other.

4 designs: Image left, Image right, Alternating, Stacked. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 39

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px
  • Padding bottom Slider, 0–200px
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Pane height Slider, 220–900px phone & desktop
  • Copy padding Slider, 12–140px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Image
  • Image Image
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Style
  • Copy pane background Colour phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

How to add a Panely section to your Shopify store

  1. Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
  2. Pick a section and press Add. Choose a design, and change the settings in the editor with a live preview beside them. You get a short section code.
  3. Place it once. In the theme editor, add the Panely block where you want the section, and paste the code into its Section code field.
  4. Edit any time. Change the section in Panely and save. Your store shows the change on its next page load, with nothing to paste again.

Each Add is its own copy with its own settings, so you can use the same section on as many pages as you like. Panely must stay installed for its sections to show. If you uninstall, they disappear, and your theme is left exactly as it was.

Questions about overlay & split layouts sections

How do I add a video background to my Shopify homepage?

Add the Text over video section in Panely, link your video (a video file or a YouTube video), add a poster image, and write your heading and button. The video plays muted behind the text, and the poster shows wherever video can’t autoplay.

Do these layouts work on phones?

Yes. Split layouts stack on narrow screens, and settings marked “phone and desktop” below can take a different value on phones, such as a shorter hero or smaller heading.

Add these sections to your store

Install Panely from the Shopify App Store, pick a section and place it in your theme in a couple of minutes. A free plan is available.

Install Panely free →
More Panely sections
Data-shaped Chart, Progress meters, Stat counters… Forms & capture Sticky bar, Inline form, Multi step form… Grids Filterable grid, Bento grid, Mosaic collage… Interactive Before / after slider, Countdown timer, Accordion… Motion & carousel Draggable Card Stack, Advance Slideshow, Infinite Marquee… Product structures Bundle Builder, Quick Add Rows, Single Product… Typographic treatments Oversized Statement, Checklist, Icon And Text…