Testimonial, icon row and checklist sections for Shopify

Sections made of words, set well: customer reviews, an icon row for features and guarantees, checklists, numbered steps, a pull quote and one big statement.

Words do a lot of selling, and these sections give them the room to do it. Multiple Reviews shows customer testimonials with star ratings as a slider, grid, masonry wall or list. Single Quote gives one quote space and an attribution.

The icon and text row is the workhorse for “free shipping · 30-day returns · made in Portugal” and feature lists. Checklist shows what’s included, with crosses for what isn’t, which suits comparisons. Numbered steps handles how-it-works and care instructions, renumbering as you add and remove steps. Oversized Statement sets a single sentence as large as the screen allows.

Free sections are in every plan, the free plan included. Premium sections need a paid plan.

Oversized Statement

Free Display

One sentence, set as large as the screen allows.

4 designs: Centered, Left, Outline, Highlight. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 30

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
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Statement
  • The statement Text, several lines
  • Kicker Text
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Statement style
  • Statement font Google Font and weight phone & desktop
  • Statement size (smallest) Slider, 14–90px phone & desktop
  • Statement size (largest) Slider, 24–200px
  • Statement color Colour phone & desktop
  • Line height Slider, 0.8–1.8 phone & desktop
  • Letter spacing Slider, -8–8px phone & desktop
  • Statement alignment Design default · Left · Center · Right phone & desktop
  • Highlight color Colour phone & desktop
Kicker style
  • 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
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

Checklist

Free List

Lines with ticks against them, and crosses for anything not included.

4 designs: Ticks, Two column, Boxed, Compare. 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, 480–1600px phone & desktop
Layout
  • Gap between lines Slider, 2–40px phone & desktop
  • Columns Slider, 1–3 phone & desktop
  • Mark size Slider, 10–44px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Lines
  • Lines A list of lines (up to 40): Text, Note, Show as not included

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
Line style
  • Line font Google Font and weight phone & desktop
  • Line size Slider, 10–96px phone & desktop
  • Line color Colour phone & desktop
  • Line line height Slider, 0.9–2.4 phone & desktop
  • Line letter spacing Slider, -3–8px phone & desktop
  • Line alignment Design default · Left · Center · Right phone & desktop
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–96px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.9–2.4 phone & desktop
  • Note letter spacing Slider, -3–8px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
  • Tick color Colour phone & desktop
  • Excluded color Colour phone & desktop

Interactive Glyph Explorer

Premium Interactive

A row of large characters. Choosing one shows what it stands for.

4 designs: Specimen, Tiles, Outline, Text above. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 52

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
  • Alignment Center · Left
  • Gap between characters Slider, 0–80px phone & desktop
  • Text width Slider, 280–1000px phone & desktop
  • Text padding Slider, 0–60px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Characters
  • Characters A list of characters (up to 12): Character, Title, Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Character style
  • Character font Google Font and weight phone & desktop
  • Character size Slider, 32–320px phone & desktop
  • Character color Colour phone & desktop
  • Character line height Slider, 0.8–2.4 phone & desktop
  • Character letter spacing Slider, -8–12px phone & desktop
  • Chosen character color Colour phone & desktop
  • Marker under the chosen one Colour phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–60px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 10–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
  • Text background Colour phone & desktop
  • Text corner radius Slider, 0–40px phone & desktop
Kicker style
  • 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.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, 10–120px 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
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Icon And Text

Free List

A glyph beside a line of text, repeated. Use it for features, guarantees, care steps or delivery terms.

4 designs: Row, Grid, Stacked, Inline. 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, 480–1600px phone & desktop
Layout
  • Columns Slider, 1–6 phone & desktop
  • Gap Slider, 4–72px phone & desktop
  • Icon size Slider, 12–72px phone & desktop
  • Put the icon in a circle On / off

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Items
  • Items A list of items (up to 24): Icon (emoji or letter), Icon image (optional), Title, Body

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
Icon style
  • Icon background Colour phone & desktop
Item style
  • 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

Kinetic Typography Hero

Premium Motion

Huge lines of text that slide, grow or light up as the page scrolls.

4 designs: Sliding lines, Growing, Line by line, Tilting. 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 phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
  • Minimum height Slider, 0–100% phone & desktop A share of the screen height.
Motion
  • Movement Slider, 0–100 phone & desktop How far the text moves as the page scrolls. 0 keeps it still.
Layout
  • Gap between lines Slider, 0–60px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Intro Text, several lines
Lines
  • Lines A list of lines (up to 6): Line
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Line style
  • Line font Google Font and weight phone & desktop
  • Line size Slider, 24–260px phone & desktop
  • Line color Colour phone & desktop
  • Line line height Slider, 0.8–2.4 phone & desktop
  • Line letter spacing Slider, -8–12px phone & desktop
  • Line alignment Design default · Left · Center · Right phone & desktop
  • Every other line Colour phone & desktop
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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

Masked Typography

Free Display

Giant letters with an image, a moving gradient or a video showing through them.

4 designs: Moving gradient, Image, Moving image, Video. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 41

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
Fill
  • Around the letters White · Black A video shows through letters cut from a white or a black panel. Match the section background to it.
  • Seconds per pass Slider, 4–60s phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • The letters Text Keep it short: one or two words read best.
  • Intro Text, several lines
Fill
  • Image inside the letters Image With a video, this shows until the video starts.
  • Video inside the letters Link A link to a video file (.mp4). Plays muted, on a loop.
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Letter style
  • Letters font Google Font and weight phone & desktop
  • Letters size Slider, 40–400px phone & desktop
  • Letters color Colour phone & desktop
  • Letters line height Slider, 0.8–2.4 phone & desktop
  • Letters letter spacing Slider, -8–12px phone & desktop
  • Letters alignment Design default · Left · Center · Right phone & desktop
  • Gradient from Colour phone & desktop
  • Gradient to Colour phone & desktop
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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

Multiple Reviews

Free Quotation

Customer reviews with stars, as a slider with arrows and dots, a grid, masonry or a list, any number per row.

4 designs: Slider, Grid, Masonry, List. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 65

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
  • Per row Slider, 1–4 phone & desktop Phones always show one.
  • Gap Slider, 0–60px phone & desktop
  • Card padding Slider, 8–64px phone & desktop
  • Show stars On / off
  • Show photos On / off
Slider
  • Controls None · Arrows · Dots · Arrows and dots
  • Play automatically On / off Pauses while a shopper hovers or uses the controls. Off for shoppers who ask for reduced motion.
  • Seconds per step Slider, 2–20s

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Reviews
  • Reviews A list of reviews (up to 24): Review, Headline (optional), Stars, Name, Detail (optional), Photo (optional)

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 font Google Font and weight phone & desktop
  • Intro size Slider, 10–96px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.9–2.4 phone & desktop
  • Intro letter spacing Slider, -3–8px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Slider
  • Controls color Colour phone & desktop
Cards
  • Card background Colour phone & desktop
  • Card border Colour phone & desktop
  • Card radius Slider, 0–40px phone & desktop
  • Star color Colour phone & desktop
  • Empty star color Colour phone & desktop
Review text
  • Headline font Google Font and weight phone & desktop
  • Headline size Slider, 10–96px phone & desktop
  • Headline color Colour phone & desktop
  • Headline line height Slider, 0.9–2.4 phone & desktop
  • Headline letter spacing Slider, -3–8px phone & desktop
  • Headline alignment Design default · Left · Center · Right phone & desktop
  • Review font Google Font and weight phone & desktop
  • Review size Slider, 10–96px phone & desktop
  • Review color Colour phone & desktop
  • Review line height Slider, 0.9–2.4 phone & desktop
  • Review letter spacing Slider, -3–8px phone & desktop
  • Review alignment Design default · Left · Center · Right phone & desktop
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 10–96px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.9–2.4 phone & desktop
  • Name letter spacing Slider, -3–8px phone & desktop
  • Name alignment Design default · Left · Center · Right phone & desktop
  • Detail font Google Font and weight phone & desktop
  • Detail size Slider, 10–96px phone & desktop
  • Detail color Colour phone & desktop
  • Detail line height Slider, 0.9–2.4 phone & desktop
  • Detail letter spacing Slider, -3–8px phone & desktop
  • Detail alignment Design default · Left · Center · Right phone & desktop

Numbered Steps

Free List

Steps in order, numbered automatically as you add and remove them.

4 designs: Numbered, Timeline, Grid, Large. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 50

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
  • Gap between steps Slider, 4–80px phone & desktop
  • Columns (grid design) Slider, 1–4 phone & desktop
  • Number circle size Slider, 18–90px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Steps
  • Steps A list of steps (up to 20): Title, Body

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
Step style
  • Number font Google Font and weight phone & desktop
  • Number size Slider, 10–96px phone & desktop
  • Number color Colour phone & desktop
  • Number line height Slider, 0.9–2.4 phone & desktop
  • Number letter spacing Slider, -3–8px 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
  • Number background Colour phone & desktop
  • Number alignment Design default · Left · Center · Right phone & desktop
  • Connector color Colour phone & desktop

Single Quote

Free Quotation

A single quote given room, with an attribution.

4 designs: Centered, Rule, Mark, Boxed. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 30

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
  • Avatar size Slider, 0–120px phone & desktop

Content

Quote
  • Quote Text, several lines
  • Attribution Text
  • Role or source Text
  • Avatar Image

Style

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

Section heading

Free Display

A kicker, a heading, a sub heading and a description, with the words you choose highlighted.

Live demo
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
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Alignment Left · Center · Right
  • Text width Slider, 320–1400px phone & desktop
  • Space between lines Slider, 0–60px phone & desktop

Content

Kicker
  • Kicker Text
Heading
  • Heading Text
Sub heading
  • Sub heading Text
Highlight
  • Highlighted words Text Type words exactly as they appear in the heading or sub heading. Every place they appear is highlighted.
Description
  • Description Text, several lines

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Kicker
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–120px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Sub heading
  • Sub heading font Google Font and weight phone & desktop
  • Sub heading size Slider, 10–120px phone & desktop
  • Sub heading color Colour phone & desktop
  • Sub heading line height Slider, 0.8–2.4 phone & desktop
  • Sub heading letter spacing Slider, -3–8px phone & desktop
  • Sub heading alignment Design default · Left · Center · Right phone & desktop
Highlight
  • Highlight style Marker · Underline · Text color only · Pill · Italic
  • Highlight text color Colour phone & desktop
  • Highlight color Colour phone & desktop The marker, the underline or the pill behind the words.
Description
  • Description font Google Font and weight phone & desktop
  • Description size Slider, 10–120px phone & desktop
  • Description color Colour phone & desktop
  • Description line height Slider, 0.8–2.4 phone & desktop
  • Description letter spacing Slider, -3–8px phone & desktop
  • Description alignment Design default · Left · Center · Right phone & desktop

Text Distortion

Premium Interactive

A headline whose letters stretch, lean and push away from the cursor.

5 designs: Stretch, Bulge, Lean, Push away, Lift. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 38

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
  • Alignment Center · Left
Motion
  • Strength Slider, 0–100 phone & desktop
  • How far the cursor reaches Slider, 80–500px
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

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

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 24–300px 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
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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 Morphing

Premium Motion

A sentence with one word that melts into the next, over and over.

4 designs: Morph, Fade, Roll, Flip. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 42

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
  • Changing word sits On its own line · In the sentence
  • Alignment Center · Left
Motion
  • Seconds each word stays Slider, 0.5–6s
  • Seconds to change Slider, 0.2–2s phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Intro Text, several lines
Sentence
  • Before the changing word Text
  • Changing words A list of words (up to 10): Word
  • After the changing word Text
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Sentence style
  • Sentence font Google Font and weight phone & desktop
  • Sentence size Slider, 20–200px phone & desktop
  • Sentence color Colour phone & desktop
  • Sentence line height Slider, 0.8–2.4 phone & desktop
  • Sentence letter spacing Slider, -8–12px phone & desktop
  • Sentence alignment Design default · Left · Center · Right phone & desktop
  • Changing word color Colour phone & desktop
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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

Typography Loading Screen

Free Motion

A full-screen opening made of words: it plays as the page opens, then lifts away.

5 designs: Words, one at a time, Words, stacking up, Name fills with color, Name and a bar, Counting to 100. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 25

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
Timing
  • Seconds on screen Slider, 0.8–8s phone & desktop
  • Pause before it lifts Slider, 0–3s phone & desktop
  • It leaves by Fading out · Sliding up · Sliding down
  • Plays Every time the page opens · Once per visit

Content

Words
  • Words A list of words (up to 8): Word
  • Name Text
  • Small line underneath Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Word style
  • Word font Google Font and weight phone & desktop
  • Word size Slider, 20–220px phone & desktop
  • Word color Colour phone & desktop
  • Word line height Slider, 0.8–2.4 phone & desktop
  • Word letter spacing Slider, -8–12px phone & desktop
  • Word alignment Design default · Left · Center · Right phone & desktop
  • Accent color Colour phone & desktop
Small line style
  • Small line font Google Font and weight phone & desktop
  • Small line size Slider, 10–32px phone & desktop
  • Small line color Colour phone & desktop
  • Small line line height Slider, 0.8–2.4 phone & desktop
  • Small line letter spacing Slider, -8–12px phone & desktop
  • Small line alignment Design default · Left · Center · Right phone & desktop

Animated Underline Showcase

Free Interactive

A list of large links, each underlined with its own animation on hover or on scroll.

4 designs: Stacked, Numbered, Columns, Running line. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

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
Underline
  • Underline A different one on each link · Slides in · Grows from the middle · Becomes a marker · Wavy · Two lines · Thickens
  • Draws On hover · When scrolled into view
  • Seconds to draw Slider, 0.1–1.5s phone & desktop
  • Line thickness Slider, 1–12px phone & desktop
Layout
  • Gap between links Slider, 0–80px phone & desktop
  • Columns Slider, 2–4 phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Links
  • Links A list of links (up to 16): Text, Link, Note (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Link style
  • Link font Google Font and weight phone & desktop
  • Link size Slider, 14–140px phone & desktop
  • Link color Colour phone & desktop
  • Link line height Slider, 0.8–2.4 phone & desktop
  • Link letter spacing Slider, -8–12px phone & desktop
  • Line color Colour phone & desktop
  • Link color on hover Colour phone & desktop
  • Link alignment Design default · Left · Center · Right phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–32px 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
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • 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.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, 10–120px 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
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Vertical Typography

Free Display

A line of text running up the side of the page, beside your heading and copy.

4 designs: Text on the left, Text on the right, Both sides, Upright letters. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

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
Side text
  • Side text reads Bottom to top · Top to bottom
  • Side text position Middle · Top · Bottom
  • Gap beside the side text Slider, 0–120px phone & desktop
  • Line beside the side text On / off
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Side text
  • Side text Text
  • Side text (other side) Text
Heading
  • 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
Side text style
  • Side text font Google Font and weight phone & desktop
  • Side text size Slider, 16–200px phone & desktop
  • Side text color Colour phone & desktop
  • Side text line height Slider, 0.8–2.4 phone & desktop
  • Side text letter spacing Slider, -8–12px phone & desktop
  • Line color Colour phone & desktop
Kicker style
  • 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.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, 10–120px 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, 10–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

Word Animation

Free Motion

A headline whose words arrive one at a time, each with its own movement.

6 designs: Rise, Fade, Focus, Flip, Pop, Wave, on a loop. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 38

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
  • Alignment Center · Left
Motion
  • Seconds per word Slider, 0–2s phone & desktop 0 shows the words without moving them.
  • Delay between words Slider, 0–400ms phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

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

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 20–200px 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
Kicker style
  • 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.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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

Interactive Word Cloud

Premium Interactive

A cloud of words, sized by importance, that grow and change color under the cursor.

4 designs: Cloud, Scattered, Pills, Running line. 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
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Interaction
  • Near the cursor, words Grow and change color · Grow · Change color · Stay as they are
  • How much they grow Slider, 0–100% phone & desktop
  • How far the cursor reaches Slider, 80–500px
Layout
  • Gap between words Slider, 4–60px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Words
  • Words A list of words (up to 40): Word, Importance, Link (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Word style
  • Word font Google Font and weight phone & desktop
  • Word size Slider, 10–60px phone & desktop
  • Word color Colour phone & desktop
  • Word line height Slider, 0.8–2.4 phone & desktop
  • Word letter spacing Slider, -8–12px phone & desktop
  • Highlight color Colour phone & desktop
Kicker style
  • 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.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, 10–120px 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
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro 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 typographic treatments sections

How do I add customer testimonials to Shopify?

Add the Multiple Reviews section in Panely and type each review with its name, star rating and an optional photo. Show them as a slider with arrows and dots, a grid, a masonry wall or a list, one to four per row.

Do I need icon images for the icon row?

No. Type an emoji or a letter as each icon, or upload a small image if you have your own icon set. The checklist draws its ticks and crosses itself.

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.