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.
Sentence fontGoogle Font and weightphone & desktop
Sentence sizeSlider, 20–200pxphone & desktop
Sentence colorColourphone & desktop
Sentence line heightSlider, 0.8–2.4phone & desktop
Sentence letter spacingSlider, -8–12pxphone & desktop
Sentence alignmentDesign default · Left · Center · Rightphone & desktop
Changing word colorColourphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Button
Button text sizeSlider, 11–28pxphone & desktop
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button corner radiusSlider, 0–40pxphone & desktop
Button alignmentDesign default · Left · Center · Rightphone & desktop
Typography Loading Screen
FreeMotion
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Timing
Seconds on screenSlider, 0.8–8sphone & desktop
Pause before it liftsSlider, 0–3sphone & desktop
It leaves byFading out · Sliding up · Sliding down
PlaysEvery time the page opens · Once per visit
Content
Words
WordsA list of words (up to 8): Word
NameText
Small line underneathText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Word style
Word fontGoogle Font and weightphone & desktop
Word sizeSlider, 20–220pxphone & desktop
Word colorColourphone & desktop
Word line heightSlider, 0.8–2.4phone & desktop
Word letter spacingSlider, -8–12pxphone & desktop
Word alignmentDesign default · Left · Center · Rightphone & desktop
Accent colorColourphone & desktop
Small line style
Small line fontGoogle Font and weightphone & desktop
Small line sizeSlider, 10–32pxphone & desktop
Small line colorColourphone & desktop
Small line line heightSlider, 0.8–2.4phone & desktop
Small line letter spacingSlider, -8–12pxphone & desktop
Small line alignmentDesign default · Left · Center · Rightphone & desktop
Animated Underline Showcase
FreeInteractive
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Underline
UnderlineA different one on each link · Slides in · Grows from the middle · Becomes a marker · Wavy · Two lines · Thickens
DrawsOn hover · When scrolled into view
Seconds to drawSlider, 0.1–1.5sphone & desktop
Line thicknessSlider, 1–12pxphone & desktop
Layout
Gap between linksSlider, 0–80pxphone & desktop
ColumnsSlider, 2–4phone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Links
LinksA list of links (up to 16): Text, Link, Note (optional)
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Link style
Link fontGoogle Font and weightphone & desktop
Link sizeSlider, 14–140pxphone & desktop
Link colorColourphone & desktop
Link line heightSlider, 0.8–2.4phone & desktop
Link letter spacingSlider, -8–12pxphone & desktop
Line colorColourphone & desktop
Link color on hoverColourphone & desktop
Link alignmentDesign default · Left · Center · Rightphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 10–32pxphone & desktop
Note colorColourphone & desktop
Note line heightSlider, 0.8–2.4phone & desktop
Note letter spacingSlider, -8–12pxphone & desktop
Note alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Vertical Typography
FreeDisplay
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Side text
Side text readsBottom to top · Top to bottom
Side text positionMiddle · Top · Bottom
Gap beside the side textSlider, 0–120pxphone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Button
Button text sizeSlider, 11–28pxphone & desktop
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button corner radiusSlider, 0–40pxphone & desktop
Button alignmentDesign default · Left · Center · Rightphone & desktop
Interactive Word Cloud
PremiumInteractive
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Interaction
Near the cursor, wordsGrow and change color · Grow · Change color · Stay as they are
How much they growSlider, 0–100%phone & desktop
How far the cursor reachesSlider, 80–500px
Layout
Gap between wordsSlider, 4–60pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Words
WordsA list of words (up to 40): Word, Importance, Link (optional)
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Word style
Word fontGoogle Font and weightphone & desktop
Word sizeSlider, 10–60pxphone & desktop
Word colorColourphone & desktop
Word line heightSlider, 0.8–2.4phone & desktop
Word letter spacingSlider, -8–12pxphone & desktop
Highlight colorColourphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
How to add a Panely section to your Shopify store
Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
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.
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.
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.