Sections that give numbers, places and dates a proper shape: charts, counters, timelines, a map with pins, calendars and clocks. You type the values, and the section draws them.
Shopify themes are good at products and pictures, but weak at anything shaped like data. If you want to show how a product compares, how far a fundraiser has got, where your shops are or what happened in your brand’s history, you usually end up with a screenshot of a chart or a custom-coded section.
Panely’s data-shaped sections draw these from values you enter in the app. A chart is real inline SVG with an accessible data table, not an image. Counters count up when they scroll into view. A timeline runs down or across the page. The calendar and clock work out today’s date in the shopper’s browser.
Free sections are in every plan, the free plan included.
Premium sections need a paid plan.
Availability calendar
FreeTime
A month calendar that always shows the current month, with the slots you mark as available, limited, full or closed.
4 designs:
Month, Compact, List, Week.
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
Cell heightSlider, 32–140pxphone & desktop
GapSlider, 0–24pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Slots
SlotsA list of slots (up to 60): Date, State, Note, LinkPick a date for each slot. The calendar always shows the current month, and any later month a slot falls in.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Calendar style
Month label fontGoogle Font and weightphone & desktop
Month label sizeSlider, 10–96pxphone & desktop
Month label colorColourphone & desktop
Month label line heightSlider, 0.9–2.4phone & desktop
Month label letter spacingSlider, -3–8pxphone & desktop
Month label alignmentDesign default · Left · Center · Rightphone & desktop
Weekday fontGoogle Font and weightphone & desktop
Weekday sizeSlider, 10–96pxphone & desktop
Weekday colorColourphone & desktop
Weekday line heightSlider, 0.9–2.4phone & desktop
Weekday letter spacingSlider, -3–8pxphone & desktop
Weekday alignmentDesign default · Left · Center · Rightphone & desktop
Day number fontGoogle Font and weightphone & desktop
Day number sizeSlider, 10–96pxphone & desktop
Day number colorColourphone & desktop
Day number line heightSlider, 0.9–2.4phone & desktop
Day number letter spacingSlider, -3–8pxphone & desktop
Day number alignmentDesign default · Left · Center · Rightphone & desktop
Available colourColourphone & desktop
Limited colourColourphone & desktop
Full colourColourphone & desktop
Closed colourColourphone & desktop
Cell corner radiusSlider, 0–24pxphone & desktop
Bubble Chart
FreeNumbers
Circles placed by two numbers and sized by a third, to compare three things at once.
4 designs:
Plain, Grid lines, Names inside, Numbered, with a key.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 66
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, 320–1600pxphone & desktop
Axes
Its decimalsSlider, 0–3
Its decimalsSlider, 0–3
Layout
Height of the chartSlider, 200–720pxphone & desktop
Smallest circleSlider, 6–60pxphone & desktop
Largest circleSlider, 20–200pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Chart data
CirclesA list of circles (up to 30): Name, Across, Up, Size, ColourA circle needs a number across and a number up. Size is optional.
Note under itText, several lines
Axes
What runs acrossText
Before its numbersText
After its numbersText
What runs upText
Before its numbersText
After its numbersText
What the size showsText
Scale
Across starts atNumber
Across ends atNumber
Up starts atNumber
Up ends atNumberLeave these blank to fit the circles.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Chart style
How solid a circle isSlider, 20–100%phone & desktop
First colorColourphone & desktop
Second colorColourphone & desktop
Third colorColourphone & desktop
Fourth colorColourphone & desktop
Axes and grid linesColourphone & desktop
Name style
Name fontGoogle Font and weightphone & desktop
Name sizeSlider, 9–24pxphone & desktop
Name colorColourphone & desktop
Name line heightSlider, 0.8–2.4phone & desktop
Name letter spacingSlider, -8–12pxphone & desktop
Axis style
Axis fontGoogle Font and weightphone & desktop
Axis sizeSlider, 9–22pxphone & desktop
Axis colorColourphone & desktop
Axis line heightSlider, 0.8–2.4phone & desktop
Axis letter spacingSlider, -8–12pxphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 9–24pxphone & 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, 9–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, 9–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, 9–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
Changelog
FreeSequence
What changed, version by version: a number, a date, a label and the changes themselves.
4 designs:
Feed, Cards, Version beside, Compact.
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 320–1600pxphone & desktop
Layout
Gap between entriesSlider, 8–72pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Entries
EntriesA list of entries (up to 40): Version, Date, Label, Label color, Title, Changes, one per line, Link words (optional), LinkNewest first.
Words on the newest entryTextLeave empty for none.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Log style
Card backgroundColourphone & desktop
LinesColourphone & desktop
Accent colorColourphone & desktop
Corner radiusSlider, 0–32pxphone & desktop
Version style
Version fontGoogle Font and weightphone & desktop
Version sizeSlider, 9–40pxphone & desktop
Version colorColourphone & desktop
Version line heightSlider, 0.8–2.4phone & desktop
Version letter spacingSlider, -8–12pxphone & desktop
Date style
Date fontGoogle Font and weightphone & desktop
Date sizeSlider, 9–28pxphone & desktop
Date colorColourphone & desktop
Date line heightSlider, 0.8–2.4phone & desktop
Date letter spacingSlider, -8–12pxphone & desktop
Label style
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 9–20pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.8–2.4phone & desktop
Label letter spacingSlider, -8–12pxphone & desktop
Title style
Title fontGoogle Font and weightphone & desktop
Title sizeSlider, 9–44pxphone & desktop
Title colorColourphone & desktop
Title line heightSlider, 0.8–2.4phone & desktop
Title letter spacingSlider, -8–12pxphone & desktop
Title alignmentDesign default · Left · Center · Rightphone & desktop
Change style
Change fontGoogle Font and weightphone & desktop
Change sizeSlider, 9–28pxphone & desktop
Change colorColourphone & desktop
Change line heightSlider, 0.8–2.4phone & desktop
Change letter spacingSlider, -8–12pxphone & desktop
Change alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Chart
PremiumNumbers
Your numbers as a bar, column, bullet, line, area, pie, donut or histogram chart, drawn from the values you enter.
8 designs:
Bar chart, Column chart, Bullet chart, Line chart, Area chart, Pie chart, Donut chart, Histogram.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 71
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
Scale & labels
Axis minimumNumberLeave blank to start at 0.
Axis maximumNumberLeave blank to fit the largest value.
GridlinesOn / off
Axis labelsOn / off
Value labelsOn / off
LegendOn / off
Legend positionTop · Bottom · Right
Chart size
Chart heightSlider, 160–640px
Bar thicknessSlider, 8–80px
Space between barsSlider, 0–48px
Column widthSlider, 10–100%Of each column’s slot; the rest is the space between columns.
Hole sizeSlider, 20–85%
Line thicknessSlider, 1–8px
Point markersOn / off
Area fill opacitySlider, 0–100%
Animation durationSlider, 0–4sphone & desktop0 turns the animation off.
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Chart data
ValuesA list of values (up to 30): Label, Value, Colour
Data pointsA list of points (up to 30): Label, Value, Comparison value
Series nameText
Show a comparison lineOn / off
Comparison series nameText
MeasuresA list of measures (up to 12): Label, Actual, Target, Poor up to, Satisfactory up to, Good up to (scale end)
Value format
Before each valueText
After each valueText
Decimal placesSlider, 0–3
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Chart colours
PaletteEarth · Ocean · Vivid · MonochromeUsed wherever a colour is left empty.
A different colour for each barOn / off
Series colourColour
Comparison colourColour
Actual bar colourColourphone & desktop
Target marker colourColourphone & desktop
Range band colourColourphone & desktop
Gridline colourColourphone & desktop
Corner radiusSlider, 0–20px
Chart style
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 10–96pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.9–2.4phone & desktop
Label letter spacingSlider, -3–8pxphone & desktop
Label alignmentDesign default · Left · Center · Rightphone & desktop
Value fontGoogle Font and weightphone & desktop
Value sizeSlider, 10–96pxphone & desktop
Value colorColourphone & desktop
Value line heightSlider, 0.9–2.4phone & desktop
Value letter spacingSlider, -3–8pxphone & desktop
Clock
FreeTime
A live clock for your store or any city: digital, a clock face, flip tiles, a single line, or several cities side by side.
5 designs:
Digital, Clock face, Flip tiles, Single line, World clocks.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 57
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
Clock
Show secondsOn / off
Show the dateOn / off
Show the time in numbers tooOn / off
Clock face sizeSlider, 80–480pxphone & desktop
GapSlider, 0–60pxphone & desktop
Tile paddingSlider, 0–48pxphone & desktop
Content
Time
Time zoneEach shopper's own time · UTC · Los Angeles (Pacific) · Denver (Mountain) · Phoenix · Chicago (Central) · New York (Eastern) · Halifax (Atlantic) · Anchorage · Honolulu · Toronto · Vancouver · Mexico City · Bogotá · Lima · Santiago · São Paulo · Buenos Aires · London · Dublin · Lisbon · Paris · Berlin · Madrid · Rome · Amsterdam · Stockholm · Warsaw · Athens · Istanbul · Moscow · Lagos · Cairo · Johannesburg · Nairobi · Dubai · Karachi · India (Kolkata) · Dhaka · Bangkok · Jakarta · Singapore · Hong Kong · Shanghai · Manila · Seoul · Tokyo · Perth · Brisbane · Sydney · Melbourne · AucklandEach shopper's own time, or the time in one place — your store's, say.
Place nameTextShown under the clock. Leave blank for none.
Hours24-hour (14:05) · 12-hour (2:05 PM)
Date languageThe store's language · English (US) · English (UK) · French · German · Spanish · Italian · Dutch · Portuguese (Brazil) · Swedish · Danish · Polish · Turkish · Arabic · Hindi · Japanese · Korean · Chinese (Simplified)
Cities
CitiesA list of cities (up to 8): Name, Time zone
Heading
KickerText
HeadingText
Intro textText, several lines
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–120pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
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, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–120pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -3–8pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Clock face
Face colorColourphone & desktop
Rim colorColourphone & desktop
Marks colorColourphone & desktop
Hands colorColourphone & desktop
Second hand colorColourphone & desktop
Tiles
Tile backgroundColourphone & desktop
Tile borderColourphone & desktop
Tile radiusSlider, 0–40pxphone & desktop
Time style
Time fontGoogle Font and weightphone & desktop
Time sizeSlider, 10–120pxphone & desktop
Time colorColourphone & desktop
Time line heightSlider, 0.8–2.4phone & desktop
Time letter spacingSlider, -3–8pxphone & desktop
Time alignmentDesign default · Left · Center · Rightphone & desktop
Place and date fontGoogle Font and weightphone & desktop
Place and date sizeSlider, 10–120pxphone & desktop
Place and date colorColourphone & desktop
Place and date line heightSlider, 0.8–2.4phone & desktop
Place and date letter spacingSlider, -3–8pxphone & desktop
Place and date alignmentDesign default · Left · Center · Rightphone & desktop
Comparison Chart
FreeComparison
Products, plans or specifications side by side, with ticks and crosses and one column picked out.
4 designs:
Table, Cards, Head to head, One feature at a time.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 69
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, 320–1600pxphone & desktop
Picked-out column
Column to pick outSlider, 0–5Counting what is compared, from the left. 0 picks none.
Layout
Padding inside a cellSlider, 6–28pxphone & desktop
What is comparedA table you fill in, cell by cellThe top row names what is being compared, and the first column names each feature. Copy cells from a spreadsheet and paste them into any cell.
Word between the twoTextHead to head compares the first two.
Note under itText, several lines
Ticks and crosses
Word that draws a tickTextA cell holding exactly this word shows a tick.
Word that draws a crossText
Picked-out column
Words on itText
Buttons
ButtonsA list of buttons (up to 5): Label, LinkOne for each thing compared, in the same order.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Chart style
Card backgroundColourphone & desktop
LinesColourphone & desktop
Picked-out colorColourphone & desktop
Tick colorColourphone & desktop
Cross colorColourphone & desktop
Corner radiusSlider, 0–32pxphone & desktop
Compared name style
Compared name fontGoogle Font and weightphone & desktop
Compared name sizeSlider, 9–40pxphone & desktop
Compared name colorColourphone & desktop
Compared name line heightSlider, 0.8–2.4phone & desktop
Compared name letter spacingSlider, -8–12pxphone & desktop
Feature style
Feature fontGoogle Font and weightphone & desktop
Feature sizeSlider, 9–28pxphone & desktop
Feature colorColourphone & desktop
Feature line heightSlider, 0.8–2.4phone & desktop
Feature letter spacingSlider, -8–12pxphone & desktop
Value style
Value fontGoogle Font and weightphone & desktop
Value sizeSlider, 9–28pxphone & desktop
Value colorColourphone & desktop
Value line heightSlider, 0.8–2.4phone & desktop
Value letter spacingSlider, -8–12pxphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 9–24pxphone & 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, 9–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, 9–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, 9–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
Current date
FreeTime
Today's date — or a date a set number of days ahead — as a line, a calendar page, a badge, a stacked date or a banner.
5 designs:
Single line, Calendar page, Badge, Stacked, Banner.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 43
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
Layout
Calendar widthSlider, 120–480pxphone & desktop
PaddingSlider, 0–60pxphone & desktop
Content
Date
Date formatTuesday, 29 September 2026 · 29 September 2026 · Tuesday, 29 September · 29 Sep 2026 · 29/09/2026The order follows the language: in US English, September 29, 2026.
LanguageThe store's language · English (US) · English (UK) · French · German · Spanish · Italian · Dutch · Portuguese (Brazil) · Swedish · Danish · Polish · Turkish · Arabic · Hindi · Japanese · Korean · Chinese (Simplified)
Time zoneEach shopper's own time · UTC · Los Angeles (Pacific) · Denver (Mountain) · Phoenix · Chicago (Central) · New York (Eastern) · Halifax (Atlantic) · Anchorage · Honolulu · Toronto · Vancouver · Mexico City · Bogotá · Lima · Santiago · São Paulo · Buenos Aires · London · Dublin · Lisbon · Paris · Berlin · Madrid · Rome · Amsterdam · Stockholm · Warsaw · Athens · Istanbul · Moscow · Lagos · Cairo · Johannesburg · Nairobi · Dubai · Karachi · India (Kolkata) · Dhaka · Bangkok · Jakarta · Singapore · Hong Kong · Shanghai · Manila · Seoul · Tokyo · Perth · Brisbane · Sydney · Melbourne · AucklandDecides when the date turns over at midnight.
Days from todaySlider, 0–600 shows today. Use it for "Order now, arrives by …".
Text before the dateText
Text after the dateText
CaptionText, several linesA line under the date. Leave blank for none.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Card
Card backgroundColourphone & desktop
Card borderColourphone & desktop
Card radiusSlider, 0–60pxphone & desktop
Accent colorColourphone & desktopThe calendar's month band, the badge dot and the stacked rule.
Text on accentColourphone & desktop
Date style
Date fontGoogle Font and weightphone & desktop
Date sizeSlider, 10–120pxphone & desktop
Date colorColourphone & desktop
Date line heightSlider, 0.8–2.4phone & desktop
Date letter spacingSlider, -3–8pxphone & desktop
Date alignmentDesign default · Left · Center · Rightphone & desktop
Day number fontGoogle Font and weightphone & desktop
Day number sizeSlider, 10–120pxphone & desktop
Day number colorColourphone & desktop
Day number line heightSlider, 0.8–2.4phone & desktop
Day number letter spacingSlider, -3–8pxphone & desktop
Day number alignmentDesign default · Left · Center · Rightphone & desktop
Text style
Text around the date fontGoogle Font and weightphone & desktop
Text around the date sizeSlider, 10–120pxphone & desktop
Text around the date colorColourphone & desktop
Text around the date line heightSlider, 0.8–2.4phone & desktop
Text around the date letter spacingSlider, -3–8pxphone & desktop
Text around the date alignmentDesign default · Left · Center · Rightphone & desktop
Caption fontGoogle Font and weightphone & desktop
Caption sizeSlider, 10–120pxphone & desktop
Caption colorColourphone & desktop
Caption line heightSlider, 0.8–2.4phone & desktop
Caption letter spacingSlider, -3–8pxphone & desktop
Caption alignmentDesign default · Left · Center · Rightphone & desktop
Data Table
FreeTabular
A table shoppers can sort by any column, search, and narrow down with a filter.
4 designs:
Lines, Striped, Boxed, Compact.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 76
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, 320–1600pxphone & desktop
What shoppers can do
Shoppers can sort by a columnOn / off
Shoppers can search itOn / off
Column offered as a filterSlider, 0–8A dropdown of everything that column holds. 0 for no filter.
Rows shown at firstSlider, 0–50The rest come with "Show more". 0 shows every row.
Layout
First column names each rowOn / off
Keep the first column in view when scrollingOn / off
Padding inside a cellSlider, 4–28pxphone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 9–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, 9–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
Heatmap
PremiumNumbers
A grid of numbers, each cell shaded by how high its number is.
4 designs:
Squares, Bands, Dots, Compact.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 66
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, 320–1600pxphone & desktop
Numbers
Print the number in each cellOn / off
Key
Show the keyOn / off
Decimals in the keySlider, 0–2
Layout
Height of a cellSlider, 14–96pxphone & desktop
Gap between cellsSlider, 0–16pxphone & desktop
Width of the row namesSlider, 30–200pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Numbers
NumbersA table you fill in, cell by cellThe top row names the columns and the first column names each row. Every other cell is a number. Leave a cell empty where there is nothing to show.
After each numberText
Note under itText, several lines
Scale
Lightest atNumberLeave blank to use the lowest number.
Darkest atNumberLeave blank to use the highest number.
Key
Word for the light endText
Word for the dark endText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heat style
Cell corner radiusSlider, 0–24pxphone & desktop
Lightest colorColourphone & desktop
Darkest colorColourphone & desktop
Number color on a dark cellColourphone & desktop
Cell with no numberColourphone & desktop
Column name style
Column name fontGoogle Font and weightphone & desktop
Column name sizeSlider, 9–24pxphone & desktop
Column name colorColourphone & desktop
Column name line heightSlider, 0.8–2.4phone & desktop
Column name letter spacingSlider, -8–12pxphone & desktop
Column name alignmentDesign default · Left · Center · Rightphone & desktop
Row name style
Row name fontGoogle Font and weightphone & desktop
Row name sizeSlider, 9–24pxphone & desktop
Row name colorColourphone & desktop
Row name line heightSlider, 0.8–2.4phone & desktop
Row name letter spacingSlider, -8–12pxphone & desktop
Number style
Number fontGoogle Font and weightphone & desktop
Number sizeSlider, 9–24pxphone & desktop
Number colorColourphone & desktop
Number line heightSlider, 0.8–2.4phone & desktop
Number letter spacingSlider, -8–12pxphone & desktop
Key and note style
Key and note fontGoogle Font and weightphone & desktop
Key and note sizeSlider, 9–24pxphone & desktop
Key and note colorColourphone & desktop
Key and note line heightSlider, 0.8–2.4phone & desktop
Key and note letter spacingSlider, -8–12pxphone & desktop
Key and note alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Horizontal timeline
FreeSequence
The same sequence read sideways, so a long history stays one screen tall.
4 designs:
Rail, Stepped, Ticks, Cards.
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
Entry widthSlider, 140–520pxphone & desktop
GapSlider, 8–90pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Entries
EntriesA list of entries (up to 40): Date or step, Title, Body
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Entry style
Date or step fontGoogle Font and weightphone & desktop
Date or step sizeSlider, 10–96pxphone & desktop
Date or step colorColourphone & desktop
Date or step line heightSlider, 0.9–2.4phone & desktop
Date or step letter spacingSlider, -3–8pxphone & desktop
Date or step alignmentDesign default · Left · Center · Rightphone & desktop
Title fontGoogle Font and weightphone & desktop
Title sizeSlider, 10–96pxphone & desktop
Title colorColourphone & desktop
Title line heightSlider, 0.9–2.4phone & desktop
Title letter spacingSlider, -3–8pxphone & desktop
Title alignmentDesign default · Left · Center · Rightphone & desktop
Body fontGoogle Font and weightphone & desktop
Body sizeSlider, 10–96pxphone & desktop
Body colorColourphone & desktop
Body line heightSlider, 0.9–2.4phone & desktop
Body letter spacingSlider, -3–8pxphone & desktop
Body alignmentDesign default · Left · Center · Rightphone & desktop
Style
Line colorColourphone & desktop
Dot colorColourphone & desktop
Scrollbar colorColourphone & desktop
Leaderboard
PremiumRanking
Products, people or results in ranked order, with their scores and whether each has moved up or down.
4 designs:
List, Podium, Bars, Cards.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 71
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, 320–1600pxphone & desktop
Scores
DecimalsSlider, 0–3
Movement
Show who moved up or downOn / off
Motion
Seconds for the bars to fillSlider, 0–3sphone & desktop0 shows it without moving.
Layout
Gap between entriesSlider, 0–24pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Ranking
EntriesA list of entries (up to 50): Name, A line under it (optional), Score, Picture (optional), Since last timeIn the order they rank: the first is number one.
Note under itText, several lines
Scores
Before each scoreText
After each scoreText
Movement
Words for moved upTextRead out by screen readers; shoppers see an arrow.
Words for moved downText
Words for stayed putText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Board style
Entry backgroundColourphone & desktop
Accent colorColourphone & desktop
First placeColourphone & desktop
Second placeColourphone & desktop
Third placeColourphone & desktop
Corner radiusSlider, 0–32pxphone & desktop
Place style
Place fontGoogle Font and weightphone & desktop
Place sizeSlider, 9–40pxphone & desktop
Place colorColourphone & desktop
Place line heightSlider, 0.8–2.4phone & desktop
Place letter spacingSlider, -8–12pxphone & desktop
Name style
Name fontGoogle Font and weightphone & desktop
Name sizeSlider, 9–40pxphone & desktop
Name colorColourphone & desktop
Name line heightSlider, 0.8–2.4phone & desktop
Name letter spacingSlider, -8–12pxphone & desktop
Name alignmentDesign default · Left · Center · Rightphone & desktop
Line under it style
Line under it fontGoogle Font and weightphone & desktop
Line under it sizeSlider, 9–28pxphone & desktop
Line under it colorColourphone & desktop
Line under it line heightSlider, 0.8–2.4phone & desktop
Line under it letter spacingSlider, -8–12pxphone & desktop
Line under it alignmentDesign default · Left · Center · Rightphone & desktop
Score style
Score fontGoogle Font and weightphone & desktop
Score sizeSlider, 9–48pxphone & desktop
Score colorColourphone & desktop
Score line heightSlider, 0.8–2.4phone & desktop
Score letter spacingSlider, -8–12pxphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 9–24pxphone & 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, 9–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, 9–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, 9–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
Map with pins
FreePlace
A map with markers, and the addresses listed beside it.
4 designs:
Split, Stacked, Wide, List first.
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
Map widthSlider, 20–100%phone & desktopOf the space the map has beside the list.
Map heightSlider, 160–900pxphone & desktop
Pin sizeSlider, 12–56pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Map
Google Maps embedEmbed codePaste the whole <iframe> from Google Maps > Share > Embed a map. Its size comes from the settings below.
Places
PlacesA list of places (up to 30): Name, Address, Hours, Directions link, Pin across, Pin downOptional — a map on its own, with no list beside it, is fine.
Directions link labelText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Style
Pin colorColourphone & desktop
Map corner radiusSlider, 0–32pxphone & desktop
Place style
Place name fontGoogle Font and weightphone & desktop
Place name sizeSlider, 10–96pxphone & desktop
Place name colorColourphone & desktop
Place name line heightSlider, 0.9–2.4phone & desktop
Place name letter spacingSlider, -3–8pxphone & desktop
Place name alignmentDesign default · Left · Center · Rightphone & desktop
Address fontGoogle Font and weightphone & desktop
Address sizeSlider, 10–96pxphone & desktop
Address colorColourphone & desktop
Address line heightSlider, 0.9–2.4phone & desktop
Address letter spacingSlider, -3–8pxphone & desktop
Address alignmentDesign default · Left · Center · Rightphone & desktop
Directions link fontGoogle Font and weightphone & desktop
Directions link sizeSlider, 10–96pxphone & desktop
Directions link colorColourphone & desktop
Directions link line heightSlider, 0.9–2.4phone & desktop
Directions link letter spacingSlider, -3–8pxphone & desktop
Directions link alignmentDesign default · Left · Center · Rightphone & desktop
Nutrition Facts
PremiumProduct data
A nutrition label: serving size, calories, each nutrient and its share of the day, ingredients and allergens.
4 designs:
Label, Table, Tiles, Bars.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 69
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, 320–1600pxphone & desktop
Layout
Width of the labelSlider, 240–640pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
The label
Title of the labelText
Servings lineText
Words for serving sizeText
Serving sizeText
Words above the caloriesText
Word for caloriesText
CaloriesText
Heading over the daily shareText
Heading over the amountsText
Heading over the second amountsText
FootnoteText, several lines
Nutrients
NutrientsA list of nutrients (up to 40): Name, Amount, Second amount, Share of the day, %, Line, Thick rule under it
Under the label
Word for ingredientsText
IngredientsText, several lines
Word for allergensText
AllergensText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Label style
Label backgroundColourphone & desktop
Rules and borderColourphone & desktop
Accent colorColourphone & desktopThe bars, and the calories tile.
Corner radiusSlider, 0–24pxphone & desktop
Label title style
Label title fontGoogle Font and weightphone & desktop
Label title sizeSlider, 9–72pxphone & desktop
Label title colorColourphone & desktop
Label title line heightSlider, 0.8–2.4phone & desktop
Label title letter spacingSlider, -8–12pxphone & desktop
Label title alignmentDesign default · Left · Center · Rightphone & desktop
Calories style
Calories fontGoogle Font and weightphone & desktop
Calories sizeSlider, 9–96pxphone & desktop
Calories colorColourphone & desktop
Calories line heightSlider, 0.8–2.4phone & desktop
Calories letter spacingSlider, -8–12pxphone & desktop
Nutrient style
Nutrient fontGoogle Font and weightphone & desktop
Nutrient sizeSlider, 9–28pxphone & desktop
Nutrient colorColourphone & desktop
Nutrient line heightSlider, 0.8–2.4phone & desktop
Nutrient letter spacingSlider, -8–12pxphone & desktop
Small print style
Small print fontGoogle Font and weightphone & desktop
Small print sizeSlider, 9–22pxphone & desktop
Small print colorColourphone & desktop
Small print line heightSlider, 0.8–2.4phone & desktop
Small print letter spacingSlider, -8–12pxphone & desktop
Small print alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Progress meters
FreeNumbers
Values shown as filled bars, rings or segments.
4 designs:
Bars, Thin, Segmented, Rings.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 43
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
Layout
Bar heightSlider, 3–48pxphone & desktop
Gap between metersSlider, 4–60pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Meters
MetersA list of meters (up to 20): Label, Percent, Value shown, Bar color
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Style
Bar corner radiusSlider, 0–999pxphone & desktop
Track colorColourphone & desktop
Meter style
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 10–96pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.9–2.4phone & desktop
Label letter spacingSlider, -3–8pxphone & desktop
Label alignmentDesign default · Left · Center · Rightphone & desktop
Value fontGoogle Font and weightphone & desktop
Value sizeSlider, 10–96pxphone & desktop
Value colorColourphone & desktop
Value line heightSlider, 0.9–2.4phone & desktop
Value letter spacingSlider, -3–8pxphone & desktop
Value alignmentDesign default · Left · Center · Rightphone & desktop
Radar Chart
PremiumNumbers
Several qualities scored round a centre, as a shape; a second shape can be laid over it to compare.
4 designs:
Filled, Outline, Round grid, Numbers beside.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 59
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, 320–1600pxphone & desktop
Chart data
Lay a second shape over itOn / off
Print each score beside its nameOn / off
DecimalsSlider, 0–2
Scale
RingsSlider, 1–8
Layout
Size of the chartSlider, 220–720pxphone & desktop
Thickness of the shape's edgeSlider, 1–6pxphone & desktop
Size of the pointsSlider, 0–12px
Content
Heading
KickerText
HeadingText
IntroText, several lines
Chart data
QualitiesA list of qualities (up to 10): Name, Score, Score it is compared withBetween three and ten. Fewer than three cannot make a shape.
Name of the scoresText
Name of the second scoresText
After each scoreText
Note under itText, several lines
Scale
The outside edge isNumberLeave blank to use the highest score.
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Chart style
How solid the shape isSlider, 0–80%phone & desktop
Shape colorColourphone & desktop
Second shape colorColourphone & desktop
Rings and spokesColourphone & desktop
Name style
Name fontGoogle Font and weightphone & desktop
Name sizeSlider, 9–28pxphone & desktop
Name colorColourphone & desktop
Name line heightSlider, 0.8–2.4phone & desktop
Name letter spacingSlider, -8–12pxphone & desktop
Score style
Score fontGoogle Font and weightphone & desktop
Score sizeSlider, 9–28pxphone & desktop
Score colorColourphone & desktop
Score line heightSlider, 0.8–2.4phone & desktop
Score letter spacingSlider, -8–12pxphone & desktop
Key and note style
Key and note fontGoogle Font and weightphone & desktop
Key and note sizeSlider, 9–24pxphone & desktop
Key and note colorColourphone & desktop
Key and note line heightSlider, 0.8–2.4phone & desktop
Key and note letter spacingSlider, -8–12pxphone & desktop
Key and note alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Roadmap
PremiumPlanning
What is done, in progress and planned, grouped into phases: as a board, a plan across time, a winding road, arrows or a list.
5 designs:
Board, Plan across time, Winding road, Phases as arrows, Status list.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 70
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
Progress
Show overall progressOn / off
Items
Show each item's statusOn / off
Show how many items a phase hasOn / off
Layout
Gap between itemsSlider, 0–48pxphone & desktop
Narrowest a phase may beSlider, 140–420pxphone & desktop
Road widthSlider, 8–36pxphone & desktop
Item paddingSlider, 4–40pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Items
ItemsA list of items (up to 30): Title, Description, Phase, Status, Tag (optional), Runs for (phases)Items with the same phase are grouped together, in the order the phases first appear.
Statuses
Name for "Done"Text
Name for "In progress"Text
Name for "Planned"Text
Progress
Text beside the progressText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Status colors
DoneColourphone & desktop
In progressColourphone & desktop
PlannedColourphone & desktop
Item style
Item backgroundColourphone & desktop
Item corner radiusSlider, 0–32pxphone & desktop
Phase backgroundColourphone & desktop
Lines and dividersColourphone & desktop
RoadColourphone & desktop
Road markingsColourphone & desktop
Phase style
Phase fontGoogle Font and weightphone & desktop
Phase sizeSlider, 10–40pxphone & desktop
Phase colorColourphone & desktop
Phase line heightSlider, 0.8–2.4phone & desktop
Phase letter spacingSlider, -8–12pxphone & desktop
Phase alignmentDesign default · Left · Center · Rightphone & desktop
Title style
Title fontGoogle Font and weightphone & desktop
Title sizeSlider, 10–40pxphone & desktop
Title colorColourphone & desktop
Title line heightSlider, 0.8–2.4phone & desktop
Title letter spacingSlider, -8–12pxphone & desktop
Title alignmentDesign default · Left · Center · Rightphone & desktop
Description style
Description fontGoogle Font and weightphone & desktop
Description sizeSlider, 10–28pxphone & desktop
Description colorColourphone & desktop
Description line heightSlider, 0.8–2.4phone & desktop
Description letter spacingSlider, -8–12pxphone & desktop
Description alignmentDesign default · Left · Center · Rightphone & desktop
Status and tag style
Status and tag fontGoogle Font and weightphone & desktop
Status and tag sizeSlider, 10–20pxphone & desktop
Status and tag colorColourphone & desktop
Status and tag line heightSlider, 0.8–2.4phone & desktop
Status and tag letter spacingSlider, -8–12pxphone & 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
Size Chart
FreeTabular
Sizes and their measurements, switchable between centimetres and inches, with a how-to-measure guide.
4 designs:
Plain, Striped, Boxed, With how to measure.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 71
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, 320–1600pxphone & desktop
Units
Let shoppers switch unitsOn / off
Layout
First column names each rowOn / off
Keep the first column in view when scrollingOn / off
Padding inside a cellSlider, 4–28pxphone & desktop
Content
Heading
KickerText
HeadingText
IntroText, several lines
Measurements
MeasurementsA table you fill in, cell by cellThe top row is the headings. Type every measurement in one unit; shoppers can switch to the other.
CaptionText
Note under itText, several lines
Units
The measurements are typed inCentimetres · Inches
Short name for centimetresText
Short name for inchesText
Name of the switchTextRead out by screen readers.
Columns that are not measurementsTextTheir numbers are left alone when the unit changes: the size itself, a shoe size. Count from the left, with commas between: 1, 2.
How to measure
HeadingText
PictureImage
StepsA list of steps (up to 8): What is measured, How
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Table style
Heading row backgroundColourphone & desktop
Cell backgroundColourphone & desktop
StripeColourphone & desktop
LinesColourphone & desktop
Accent colorColourphone & desktop
Corner radiusSlider, 0–32pxphone & desktop
Heading row style
Heading row fontGoogle Font and weightphone & desktop
Heading row sizeSlider, 9–28pxphone & desktop
Heading row colorColourphone & desktop
Heading row line heightSlider, 0.8–2.4phone & desktop
Heading row letter spacingSlider, -8–12pxphone & desktop
Heading row alignmentDesign default · Left · Center · Rightphone & desktop
Cell style
Cell fontGoogle Font and weightphone & desktop
Cell sizeSlider, 9–28pxphone & desktop
Cell colorColourphone & desktop
Cell line heightSlider, 0.8–2.4phone & desktop
Cell letter spacingSlider, -8–12pxphone & desktop
Cell alignmentDesign default · Left · Center · Rightphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 9–24pxphone & 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
Step name style
Step name fontGoogle Font and weightphone & desktop
Step name sizeSlider, 9–32pxphone & desktop
Step name colorColourphone & desktop
Step name line heightSlider, 0.8–2.4phone & desktop
Step name letter spacingSlider, -8–12pxphone & desktop
Step name alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Stat counters
FreeNumbers
Numbers that count up as they come into view.
4 designs:
Row, Boxed, Bordered, Stacked.
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
ColumnsSlider, 1–6phone & desktop
GapSlider, 8–72pxphone & desktop
Item paddingSlider, 0–60pxphone & desktop
Count durationSlider, 0–8s
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Counters
CountersA list of counters (up to 12): Number, Before the number, After the number, Label, Note
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Counter style
Number fontGoogle Font and weightphone & desktop
Number sizeSlider, 10–96pxphone & desktop
Number colorColourphone & desktop
Number line heightSlider, 0.9–2.4phone & desktop
Number letter spacingSlider, -3–8pxphone & desktop
Number alignmentDesign default · Left · Center · Rightphone & desktop
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 10–96pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.9–2.4phone & desktop
Label letter spacingSlider, -3–8pxphone & desktop
Label alignmentDesign default · Left · Center · Rightphone & desktop
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 10–96pxphone & desktop
Note colorColourphone & desktop
Note line heightSlider, 0.9–2.4phone & desktop
Note letter spacingSlider, -3–8pxphone & desktop
Note alignmentDesign default · Left · Center · Rightphone & desktop
Item backgroundColourphone & desktop
Item border colorColourphone & desktop
Corner radiusSlider, 0–32pxphone & desktop
Sustainability Stats
FreeNumbers
Carbon, water, waste and energy as figures: each with its unit, how far along its goal it is, and how it has moved.
4 designs:
Cards, Rings, Rows, One big figure.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 75
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, 320–1600pxphone & desktop
Motion
Seconds for the bars to fillSlider, 0–3sphone & desktop0 shows it without moving.
Layout
Narrowest a card may beSlider, 140–420pxphone & desktopAs many fit side by side as this allows.
Padding inside a cardSlider, 8–56pxphone & desktop
FiguresA list of figures (up to 12): Icon, Figure, Unit, What it measures, A line under it (optional), How far along its goal, %, How it has moved (optional), That movement isIn "One big figure", the first is the big one.
Words after the goal's percentageText
Where the figures come fromText, several lines
Button
Button labelText
Button linkLink
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Card style
Card backgroundColourphone & desktop
Accent colorColourphone & desktop
Unfilled part of a barColourphone & desktop
Good newsColourphone & desktop
Bad newsColourphone & desktop
Corner radiusSlider, 0–40pxphone & desktop
Figure style
Figure fontGoogle Font and weightphone & desktop
Figure sizeSlider, 9–140pxphone & desktop
Figure colorColourphone & desktop
Figure line heightSlider, 0.8–2.4phone & desktop
Figure letter spacingSlider, -8–12pxphone & desktop
Unit style
Unit fontGoogle Font and weightphone & desktop
Unit sizeSlider, 9–40pxphone & desktop
Unit colorColourphone & desktop
Unit line heightSlider, 0.8–2.4phone & desktop
Unit letter spacingSlider, -8–12pxphone & desktop
What it measures style
What it measures fontGoogle Font and weightphone & desktop
What it measures sizeSlider, 9–36pxphone & desktop
What it measures colorColourphone & desktop
What it measures line heightSlider, 0.8–2.4phone & desktop
What it measures letter spacingSlider, -8–12pxphone & desktop
What it measures alignmentDesign default · Left · Center · Rightphone & desktop
Line under it style
Line under it fontGoogle Font and weightphone & desktop
Line under it sizeSlider, 9–28pxphone & desktop
Line under it colorColourphone & desktop
Line under it line heightSlider, 0.8–2.4phone & desktop
Line under it letter spacingSlider, -8–12pxphone & desktop
Line under it alignmentDesign default · Left · Center · Rightphone & desktop
Small print style
Small print fontGoogle Font and weightphone & desktop
Small print sizeSlider, 9–24pxphone & desktop
Small print colorColourphone & desktop
Small print line heightSlider, 0.8–2.4phone & desktop
Small print letter spacingSlider, -8–12pxphone & desktop
Small print alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 9–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, 9–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, 9–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
Vertical timeline
FreeSequence
Milestones down a line, in order.
4 designs:
Line, Alternating, Compact, Boxed.
Pick one in the app, then fine-tune it with the settings below.
Settings you can change 51
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
Layout
Gap between entriesSlider, 8–90pxphone & desktop
Dot sizeSlider, 4–32pxphone & desktop
Image heightSlider, 0–420pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Entries
EntriesA list of entries (up to 40): Date or step, Title, Body, Image
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Entry style
Date or step fontGoogle Font and weightphone & desktop
Date or step sizeSlider, 10–96pxphone & desktop
Date or step colorColourphone & desktop
Date or step line heightSlider, 0.9–2.4phone & desktop
Date or step letter spacingSlider, -3–8pxphone & desktop
Date or step alignmentDesign default · Left · Center · Rightphone & desktop
Title fontGoogle Font and weightphone & desktop
Title sizeSlider, 10–96pxphone & desktop
Title colorColourphone & desktop
Title line heightSlider, 0.9–2.4phone & desktop
Title letter spacingSlider, -3–8pxphone & desktop
Title alignmentDesign default · Left · Center · Rightphone & desktop
Body fontGoogle Font and weightphone & desktop
Body sizeSlider, 10–96pxphone & desktop
Body colorColourphone & desktop
Body line heightSlider, 0.9–2.4phone & desktop
Body letter spacingSlider, -3–8pxphone & desktop
Body alignmentDesign default · Left · Center · Rightphone & desktop
Style
Line colorColourphone & desktop
Dot colorColourphone & desktop
Image corner radiusSlider, 0–32pxphone & 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 data shaped sections
How do I add a chart to a Shopify page?
Add the Chart section in Panely, pick one of its eight designs (bar, column, bullet, line, area, pie, donut or histogram), type your labels and values, and place it in your theme with the Panely app block. No image to export or re-upload when a number changes.
Can I show my store locations on a map?
Yes. Map with pins shows an embedded Google map beside a list of your addresses, in four layouts. Paste the embed code from Google Maps into the section.
Does the availability calendar take bookings?
No. It displays the slots you mark as available, limited, full or closed for the current month. It is a display for things like appointment days or pickup slots, not a booking system.
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.