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.

Blob Split Diagonal Split Foreground Cutout Frame Breaker Glass Overlay Text Over Image Layered Hero Offset Cards Split Screen Sticky Scroll Text Over Video Zigzag Split

Blob Split

Free Shaped splits

Words on one side and a picture on the other, cut to a soft, uneven shape that can slowly change.

4 designs: The shape alone, A colour behind it, A ring round it, Pebbles beside it. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 46

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, 320–1600px phone & desktop
Layout
  • Picture on the left On / off
  • Shape Pebble · Bean · Cloud · Drop
  • Shape of the pictures Square · Portrait (4:5) · Landscape (4:3)
  • Width of the picture Slider, 25–65%
  • Gap Slider, 0–140px phone & desktop
Motion
  • Slowly changes shape On / off
  • Seconds for one change Slider, 2–30s phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Picture
  • Picture Image
  • Describe the picture Text Read out by screen readers.
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Shape style
  • Colour behind it Colour phone & desktop
  • Pebbles Colour phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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

Diagonal Split

Free 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

Foreground Cutout

Free Cutouts

What is in your picture rises out of the top of its shape, as if stepping out of the frame.

4 designs: Out of a card, Out of a circle, Out of an arch, Out of a band. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 46

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, 320–1600px phone & desktop
Layout
  • Picture on the left On / off
  • How far it rises out Slider, 0–60% phone & desktop
  • Width of the shape Slider, 200–640px phone & desktop
  • Gap Slider, 0–140px phone & desktop
  • Shadow under it On / off
Motion
  • Grows a little when pointed at On / off
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Picture
  • Picture Image A picture with a clear background (PNG or WebP): what is in it rises out of the shape. Any other picture rises out as a rectangle.
  • Describe the picture Text Read out by screen readers.
  • Picture inside the shape (optional) Image Shown behind, cut to the shape.
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Shape style
  • Shape Colour phone & desktop
  • Corner radius Slider, 0–80px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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

Frame Breaker

Free Broken frames

A picture that will not stay in its frame: taller than its panel, slid off its outline, tilted off its card, or out to the edge of the screen.

4 designs: Taller than its panel, Slid off its frame, Tilted off its card, Out to the edge of the screen. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 46

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, 320–1600px phone & desktop
Layout
  • Picture on the left On / off
  • Shape of the pictures Portrait (4:5) · Square · Landscape (4:3) · Tall (2:3)
  • How far it escapes Slider, 0–120px phone & desktop
  • Tilt Slider, -12–12° phone & desktop
  • Gap Slider, 0–140px phone & desktop
  • Shadow under the picture On / off
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Picture
  • Picture Image
  • Describe the picture Text Read out by screen readers.
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Frame style
  • Panel, frame or card Colour phone & desktop
  • Corner radius Slider, 0–60px phone & desktop
  • Corner radius of the picture Slider, 0–60px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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

Glass Overlay

Free Glass

Your words on a pane of frosted glass, over a picture or a video.

4 designs: Card, Pane down one side, Bar along the bottom, Card with notes floating round it. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 54

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, 320–1600px phone & desktop
Layout
  • Where the glass sits Left · Centre · Right
  • Height Slider, 320–960px phone & desktop
  • Width of the glass Slider, 260–900px
  • Room inside the glass Slider, 12–80px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Behind the glass
  • Picture Image
  • Video (optional) Link A link to an .mp4 file. It plays silently, on a loop, over the picture. It is not played for someone who has asked for less motion: they see the picture.
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link
Notes
  • Notes A list of notes (up to 4): Words

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Glass
  • Blur Slider, 0–40px phone & desktop
  • Tint of the glass Colour phone & desktop
  • How solid the glass is Slider, 0–80% phone & desktop
  • Edge of the glass Colour phone & desktop
  • Corner radius Slider, 0–60px phone & desktop
  • Darken what is behind Slider, 0–80% phone & desktop
  • Glow when there is no picture Colour phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–28px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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

Text Over Image

Free 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

Layered Hero

Free Layers

A hero built in layers: a shape, a big word, your picture over it, and things in front.

4 designs: A word behind the picture, A word behind, a word in front, Words beside it, Words above it. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 60

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, 320–1600px phone & desktop
Layout
  • Shape behind the picture Circle · Panel · Arch · None
  • Size of the shape Slider, 20–100% phone & desktop
  • Height Slider, 280–900px phone & desktop
  • Height of the picture Slider, 30–120% phone & desktop
  • How far down the back word sits Slider, 0–100% phone & desktop
  • How far down the front word sits Slider, 0–100% phone & desktop
  • Picture on the left On / off
Motion
  • Things in front drift gently On / off
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Picture
  • Picture Image A picture with a clear background (PNG or WebP) works best. The big word then shows round what is in it.
  • Describe the picture Text Read out by screen readers.
Big words
  • Word behind the picture Text
  • Word in front of the picture Text
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link
Things in front
  • Things in front A list of things (up to 8): Picture, Words on the badge, Badge color, Across, Down, Size, Turn

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Layers style
  • Shape behind the picture Colour phone & desktop
Big word style
  • Big word font Google Font and weight phone & desktop
  • Big word size Slider, 40–400px phone & desktop
  • Big word color Colour phone & desktop
  • Big word line height Slider, 0.8–2.4 phone & desktop
  • Big word letter spacing Slider, -8–12px phone & desktop
  • Front word color Colour phone & desktop
Badge style
  • Badge font Google Font and weight phone & desktop
  • Badge size Slider, 9–40px phone & desktop
  • Badge color Colour phone & desktop
  • Badge line height Slider, 0.8–2.4 phone & desktop
  • Badge letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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

Free 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

Split Screen

Free 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

Sticky Scroll

Free 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

Text Over Video

Free 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

Zigzag Split

Free Shaped splits

A picture and your words, split by a zigzag, saw teeth, a single point or a lightning bolt.

4 designs: Zigzag, Saw teeth, One point, Lightning. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 44

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, 320–1600px phone & desktop
Layout
  • Picture on the right On / off
  • Height Slider, 300–900px phone & desktop
  • Width of the picture Slider, 30–70%
  • Size of the teeth Slider, 10–120px phone & desktop
  • Room round the words Slider, 16–120px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Picture
  • Picture Image
  • Describe the picture Text Read out by screen readers.
Words
  • Kicker Text
  • Heading Text
  • Text Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Split style
  • Behind the words Colour phone & desktop
  • Corner radius Slider, 0–48px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–140px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 9–40px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • 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 Availability calendar, Bubble Chart, Changelog… Forms & capture Appointment Request, Email Capture Card, Feedback Widget… Grids Filterable grid, Bento grid, Mosaic collage… Interactive Before / After Slider, Countdown Timer, Accordion… Motion & carousel Draggable Card Stack, Circular Carousel, Circular Text Marquee… Product structures Bundle Builder, Product Carousel, Product Grid… Typographic treatments Oversized Statement, Checklist, Interactive Glyph Explorer…