Start a project

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.

Install Panely free → See the demos

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.

Oversized Statement Checklist Icon And Text Numbered Steps Single Quote Multiple Reviews

Oversized Statement

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
Layout
  • Smallest size Slider, 14–90px phone & desktop
  • Largest size Slider, 24–200px
Statement style
  • Line height Slider, 0.8–1.8 phone & desktop
  • Letter spacing Slider, -8–8px 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
  • 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
  • Statement font Google Font and weight phone & desktop
  • Statement color Colour phone & desktop
  • Statement alignment Design default · Left · Center · Right phone & desktop
  • Highlight color Colour 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

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

Icon And Text

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

Numbered Steps

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

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

Multiple Reviews

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

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.

Install Panely free →
More Panely sections
Data-shaped Chart, Progress meters, Stat counters… Forms & capture Sticky bar, Inline form, Multi step form… Grids Filterable grid, Bento grid, Mosaic collage… Interactive Before / after slider, Countdown timer, Accordion… Motion & carousel Draggable Card Stack, Advance Slideshow, Infinite Marquee… Overlay & split layouts Image with text overlay, Offset cards, Text over video… Product structures Bundle Builder, Quick Add Rows, Single Product…