Chart, timeline and map sections for Shopify

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

Free Time

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Cell height Slider, 32–140px phone & desktop
  • Gap Slider, 0–24px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Slots
  • Slots A list of slots (up to 60): Date, State, Note, Link Pick a date for each slot. The calendar always shows the current month, and any later month a slot falls in.

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
Calendar style
  • Month label font Google Font and weight phone & desktop
  • Month label size Slider, 10–96px phone & desktop
  • Month label color Colour phone & desktop
  • Month label line height Slider, 0.9–2.4 phone & desktop
  • Month label letter spacing Slider, -3–8px phone & desktop
  • Month label alignment Design default · Left · Center · Right phone & desktop
  • Weekday font Google Font and weight phone & desktop
  • Weekday size Slider, 10–96px phone & desktop
  • Weekday color Colour phone & desktop
  • Weekday line height Slider, 0.9–2.4 phone & desktop
  • Weekday letter spacing Slider, -3–8px phone & desktop
  • Weekday alignment Design default · Left · Center · Right phone & desktop
  • Day number font Google Font and weight phone & desktop
  • Day number size Slider, 10–96px phone & desktop
  • Day number color Colour phone & desktop
  • Day number line height Slider, 0.9–2.4 phone & desktop
  • Day number letter spacing Slider, -3–8px phone & desktop
  • Day number alignment Design default · Left · Center · Right phone & desktop
  • Available colour Colour phone & desktop
  • Limited colour Colour phone & desktop
  • Full colour Colour phone & desktop
  • Closed colour Colour phone & desktop
  • Cell corner radius Slider, 0–24px phone & desktop

Bubble Chart

Free Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Axes
  • Its decimals Slider, 0–3
  • Its decimals Slider, 0–3
Layout
  • Height of the chart Slider, 200–720px phone & desktop
  • Smallest circle Slider, 6–60px phone & desktop
  • Largest circle Slider, 20–200px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Chart data
  • Circles A list of circles (up to 30): Name, Across, Up, Size, Colour A circle needs a number across and a number up. Size is optional.
  • Note under it Text, several lines
Axes
  • What runs across Text
  • Before its numbers Text
  • After its numbers Text
  • What runs up Text
  • Before its numbers Text
  • After its numbers Text
  • What the size shows Text
Scale
  • Across starts at Number
  • Across ends at Number
  • Up starts at Number
  • Up ends at Number Leave these blank to fit the circles.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Chart style
  • How solid a circle is Slider, 20–100% phone & desktop
  • First color Colour phone & desktop
  • Second color Colour phone & desktop
  • Third color Colour phone & desktop
  • Fourth color Colour phone & desktop
  • Axes and grid lines Colour phone & desktop
Name style
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 9–24px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.8–2.4 phone & desktop
  • Name letter spacing Slider, -8–12px phone & desktop
Axis style
  • Axis font Google Font and weight phone & desktop
  • Axis size Slider, 9–22px phone & desktop
  • Axis color Colour phone & desktop
  • Axis line height Slider, 0.8–2.4 phone & desktop
  • Axis letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Changelog

Free Sequence

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Gap between entries Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Entries
  • Entries A list of entries (up to 40): Version, Date, Label, Label color, Title, Changes, one per line, Link words (optional), Link Newest first.
  • Words on the newest entry Text Leave empty for none.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Log style
  • Card background Colour phone & desktop
  • Lines Colour phone & desktop
  • Accent color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Version style
  • Version font Google Font and weight phone & desktop
  • Version size Slider, 9–40px phone & desktop
  • Version color Colour phone & desktop
  • Version line height Slider, 0.8–2.4 phone & desktop
  • Version letter spacing Slider, -8–12px phone & desktop
Date style
  • Date font Google Font and weight phone & desktop
  • Date size Slider, 9–28px phone & desktop
  • Date color Colour phone & desktop
  • Date line height Slider, 0.8–2.4 phone & desktop
  • Date letter spacing Slider, -8–12px phone & desktop
Label style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 9–20px phone & desktop
  • Label color Colour phone & desktop
  • Label line height Slider, 0.8–2.4 phone & desktop
  • Label letter spacing Slider, -8–12px phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–44px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Change style
  • Change font Google Font and weight phone & desktop
  • Change size Slider, 9–28px phone & desktop
  • Change color Colour phone & desktop
  • Change line height Slider, 0.8–2.4 phone & desktop
  • Change letter spacing Slider, -8–12px phone & desktop
  • Change alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Chart

Premium Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Scale & labels
  • Axis minimum Number Leave blank to start at 0.
  • Axis maximum Number Leave blank to fit the largest value.
  • Gridlines On / off
  • Axis labels On / off
  • Value labels On / off
  • Legend On / off
  • Legend position Top · Bottom · Right
Chart size
  • Chart height Slider, 160–640px
  • Bar thickness Slider, 8–80px
  • Space between bars Slider, 0–48px
  • Column width Slider, 10–100% Of each column’s slot; the rest is the space between columns.
  • Hole size Slider, 20–85%
  • Line thickness Slider, 1–8px
  • Point markers On / off
  • Area fill opacity Slider, 0–100%
  • Animation duration Slider, 0–4s phone & desktop 0 turns the animation off.

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Chart data
  • Values A list of values (up to 30): Label, Value, Colour
  • Data points A list of points (up to 30): Label, Value, Comparison value
  • Series name Text
  • Show a comparison line On / off
  • Comparison series name Text
  • Measures A list of measures (up to 12): Label, Actual, Target, Poor up to, Satisfactory up to, Good up to (scale end)
Value format
  • Before each value Text
  • After each value Text
  • Decimal places Slider, 0–3

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
Chart colours
  • Palette Earth · Ocean · Vivid · Monochrome Used wherever a colour is left empty.
  • A different colour for each bar On / off
  • Series colour Colour
  • Comparison colour Colour
  • Actual bar colour Colour phone & desktop
  • Target marker colour Colour phone & desktop
  • Range band colour Colour phone & desktop
  • Gridline colour Colour phone & desktop
  • Corner radius Slider, 0–20px
Chart style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–96px phone & desktop
  • Label color Colour phone & desktop
  • Label line height Slider, 0.9–2.4 phone & desktop
  • Label letter spacing Slider, -3–8px phone & desktop
  • Label alignment Design default · Left · Center · Right phone & desktop
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 10–96px phone & desktop
  • Value color Colour phone & desktop
  • Value line height Slider, 0.9–2.4 phone & desktop
  • Value letter spacing Slider, -3–8px phone & desktop

Clock

Free Time

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Clock
  • Show seconds On / off
  • Show the date On / off
  • Show the time in numbers too On / off
  • Clock face size Slider, 80–480px phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Tile padding Slider, 0–48px phone & desktop

Content

Time
  • Time zone Each 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 · Auckland Each shopper's own time, or the time in one place — your store's, say.
  • Place name Text Shown under the clock. Leave blank for none.
  • Hours 24-hour (14:05) · 12-hour (2:05 PM)
  • Date language The 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
  • Cities A list of cities (up to 8): Name, Time zone
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines

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–120px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–120px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -3–8px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Clock face
  • Face color Colour phone & desktop
  • Rim color Colour phone & desktop
  • Marks color Colour phone & desktop
  • Hands color Colour phone & desktop
  • Second hand color Colour phone & desktop
Tiles
  • Tile background Colour phone & desktop
  • Tile border Colour phone & desktop
  • Tile radius Slider, 0–40px phone & desktop
Time style
  • Time font Google Font and weight phone & desktop
  • Time size Slider, 10–120px phone & desktop
  • Time color Colour phone & desktop
  • Time line height Slider, 0.8–2.4 phone & desktop
  • Time letter spacing Slider, -3–8px phone & desktop
  • Time alignment Design default · Left · Center · Right phone & desktop
  • Place and date font Google Font and weight phone & desktop
  • Place and date size Slider, 10–120px phone & desktop
  • Place and date color Colour phone & desktop
  • Place and date line height Slider, 0.8–2.4 phone & desktop
  • Place and date letter spacing Slider, -3–8px phone & desktop
  • Place and date alignment Design default · Left · Center · Right phone & desktop

Comparison Chart

Free Comparison

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Picked-out column
  • Column to pick out Slider, 0–5 Counting what is compared, from the left. 0 picks none.
Layout
  • Padding inside a cell Slider, 6–28px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Comparison
  • What is compared A table you fill in, cell by cell The 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 two Text Head to head compares the first two.
  • Note under it Text, several lines
Ticks and crosses
  • Word that draws a tick Text A cell holding exactly this word shows a tick.
  • Word that draws a cross Text
Picked-out column
  • Words on it Text
Buttons
  • Buttons A list of buttons (up to 5): Label, Link One for each thing compared, in the same order.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Chart style
  • Card background Colour phone & desktop
  • Lines Colour phone & desktop
  • Picked-out color Colour phone & desktop
  • Tick color Colour phone & desktop
  • Cross color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Compared name style
  • Compared name font Google Font and weight phone & desktop
  • Compared name size Slider, 9–40px phone & desktop
  • Compared name color Colour phone & desktop
  • Compared name line height Slider, 0.8–2.4 phone & desktop
  • Compared name letter spacing Slider, -8–12px phone & desktop
Feature style
  • Feature font Google Font and weight phone & desktop
  • Feature size Slider, 9–28px phone & desktop
  • Feature color Colour phone & desktop
  • Feature line height Slider, 0.8–2.4 phone & desktop
  • Feature letter spacing Slider, -8–12px phone & desktop
Value style
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 9–28px phone & desktop
  • Value color Colour phone & desktop
  • Value line height Slider, 0.8–2.4 phone & desktop
  • Value letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Current date

Free Time

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Calendar width Slider, 120–480px phone & desktop
  • Padding Slider, 0–60px phone & desktop

Content

Date
  • Date format Tuesday, 29 September 2026 · 29 September 2026 · Tuesday, 29 September · 29 Sep 2026 · 29/09/2026 The order follows the language: in US English, September 29, 2026.
  • Language The 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 zone Each 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 · Auckland Decides when the date turns over at midnight.
  • Days from today Slider, 0–60 0 shows today. Use it for "Order now, arrives by …".
  • Text before the date Text
  • Text after the date Text
  • Caption Text, several lines A line under the date. Leave blank for none.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card
  • Card background Colour phone & desktop
  • Card border Colour phone & desktop
  • Card radius Slider, 0–60px phone & desktop
  • Accent color Colour phone & desktop The calendar's month band, the badge dot and the stacked rule.
  • Text on accent Colour phone & desktop
Date style
  • Date font Google Font and weight phone & desktop
  • Date size Slider, 10–120px phone & desktop
  • Date color Colour phone & desktop
  • Date line height Slider, 0.8–2.4 phone & desktop
  • Date letter spacing Slider, -3–8px phone & desktop
  • Date alignment Design default · Left · Center · Right phone & desktop
  • Day number font Google Font and weight phone & desktop
  • Day number size Slider, 10–120px phone & desktop
  • Day number color Colour phone & desktop
  • Day number line height Slider, 0.8–2.4 phone & desktop
  • Day number letter spacing Slider, -3–8px phone & desktop
  • Day number alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text around the date font Google Font and weight phone & desktop
  • Text around the date size Slider, 10–120px phone & desktop
  • Text around the date color Colour phone & desktop
  • Text around the date line height Slider, 0.8–2.4 phone & desktop
  • Text around the date letter spacing Slider, -3–8px phone & desktop
  • Text around the date alignment Design default · Left · Center · Right phone & desktop
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 10–120px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.8–2.4 phone & desktop
  • Caption letter spacing Slider, -3–8px phone & desktop
  • Caption alignment Design default · Left · Center · Right phone & desktop

Data Table

Free Tabular

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
What shoppers can do
  • Shoppers can sort by a column On / off
  • Shoppers can search it On / off
  • Column offered as a filter Slider, 0–8 A dropdown of everything that column holds. 0 for no filter.
  • Rows shown at first Slider, 0–50 The rest come with "Show more". 0 shows every row.
Layout
  • First column names each row On / off
  • Keep the first column in view when scrolling On / off
  • Padding inside a cell Slider, 4–28px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Table
  • Table A table you fill in, cell by cell The top row is the headings. Copy cells from a spreadsheet and paste them into any cell.
  • Caption Text
  • Note under it Text, several lines
What shoppers can do
  • Words in the search box Text
  • Word for no filter Text
  • Button for the rest Text
  • Word between the two counts Text As in "8 of 12".
  • When nothing matches Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Table style
  • Heading row background Colour phone & desktop
  • Cell background Colour phone & desktop
  • Stripe Colour phone & desktop
  • Lines Colour phone & desktop
  • Accent color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Heading row style
  • Heading row font Google Font and weight phone & desktop
  • Heading row size Slider, 9–28px phone & desktop
  • Heading row color Colour phone & desktop
  • Heading row line height Slider, 0.8–2.4 phone & desktop
  • Heading row letter spacing Slider, -8–12px phone & desktop
  • Heading row alignment Design default · Left · Center · Right phone & desktop
Cell style
  • Cell font Google Font and weight phone & desktop
  • Cell size Slider, 9–28px phone & desktop
  • Cell color Colour phone & desktop
  • Cell line height Slider, 0.8–2.4 phone & desktop
  • Cell letter spacing Slider, -8–12px phone & desktop
  • Cell alignment Design default · Left · Center · Right phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Search box style
  • Search box background Colour phone & desktop
  • Search box border Colour phone & desktop
  • Search box text Colour phone & desktop
  • Search box corner radius Slider, 0–32px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Heatmap

Premium Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Numbers
  • Print the number in each cell On / off
Key
  • Show the key On / off
  • Decimals in the key Slider, 0–2
Layout
  • Height of a cell Slider, 14–96px phone & desktop
  • Gap between cells Slider, 0–16px phone & desktop
  • Width of the row names Slider, 30–200px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Numbers
  • Numbers A table you fill in, cell by cell The 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 number Text
  • Note under it Text, several lines
Scale
  • Lightest at Number Leave blank to use the lowest number.
  • Darkest at Number Leave blank to use the highest number.
Key
  • Word for the light end Text
  • Word for the dark end Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heat style
  • Cell corner radius Slider, 0–24px phone & desktop
  • Lightest color Colour phone & desktop
  • Darkest color Colour phone & desktop
  • Number color on a dark cell Colour phone & desktop
  • Cell with no number Colour phone & desktop
Column name style
  • Column name font Google Font and weight phone & desktop
  • Column name size Slider, 9–24px phone & desktop
  • Column name color Colour phone & desktop
  • Column name line height Slider, 0.8–2.4 phone & desktop
  • Column name letter spacing Slider, -8–12px phone & desktop
  • Column name alignment Design default · Left · Center · Right phone & desktop
Row name style
  • Row name font Google Font and weight phone & desktop
  • Row name size Slider, 9–24px phone & desktop
  • Row name color Colour phone & desktop
  • Row name line height Slider, 0.8–2.4 phone & desktop
  • Row name letter spacing Slider, -8–12px phone & desktop
Number style
  • Number font Google Font and weight phone & desktop
  • Number size Slider, 9–24px phone & desktop
  • Number color Colour phone & desktop
  • Number line height Slider, 0.8–2.4 phone & desktop
  • Number letter spacing Slider, -8–12px phone & desktop
Key and note style
  • Key and note font Google Font and weight phone & desktop
  • Key and note size Slider, 9–24px phone & desktop
  • Key and note color Colour phone & desktop
  • Key and note line height Slider, 0.8–2.4 phone & desktop
  • Key and note letter spacing Slider, -8–12px phone & desktop
  • Key and note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Horizontal timeline

Free Sequence

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Entry width Slider, 140–520px phone & desktop
  • Gap Slider, 8–90px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Entries
  • Entries A list of entries (up to 40): Date or step, 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
Entry style
  • Date or step font Google Font and weight phone & desktop
  • Date or step size Slider, 10–96px phone & desktop
  • Date or step color Colour phone & desktop
  • Date or step line height Slider, 0.9–2.4 phone & desktop
  • Date or step letter spacing Slider, -3–8px phone & desktop
  • Date or step alignment Design default · Left · Center · Right phone & desktop
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–96px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.9–2.4 phone & desktop
  • Title letter spacing Slider, -3–8px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
  • Body font Google Font and weight phone & desktop
  • Body size Slider, 10–96px phone & desktop
  • Body color Colour phone & desktop
  • Body line height Slider, 0.9–2.4 phone & desktop
  • Body letter spacing Slider, -3–8px phone & desktop
  • Body alignment Design default · Left · Center · Right phone & desktop
Style
  • Line color Colour phone & desktop
  • Dot color Colour phone & desktop
  • Scrollbar color Colour phone & desktop

Leaderboard

Premium Ranking

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Scores
  • Decimals Slider, 0–3
Movement
  • Show who moved up or down On / off
Motion
  • Seconds for the bars to fill Slider, 0–3s phone & desktop 0 shows it without moving.
Layout
  • Gap between entries Slider, 0–24px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Ranking
  • Entries A list of entries (up to 50): Name, A line under it (optional), Score, Picture (optional), Since last time In the order they rank: the first is number one.
  • Note under it Text, several lines
Scores
  • Before each score Text
  • After each score Text
Movement
  • Words for moved up Text Read out by screen readers; shoppers see an arrow.
  • Words for moved down Text
  • Words for stayed put Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Board style
  • Entry background Colour phone & desktop
  • Accent color Colour phone & desktop
  • First place Colour phone & desktop
  • Second place Colour phone & desktop
  • Third place Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Place style
  • Place font Google Font and weight phone & desktop
  • Place size Slider, 9–40px phone & desktop
  • Place color Colour phone & desktop
  • Place line height Slider, 0.8–2.4 phone & desktop
  • Place letter spacing Slider, -8–12px phone & desktop
Name style
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 9–40px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.8–2.4 phone & desktop
  • Name letter spacing Slider, -8–12px phone & desktop
  • Name alignment Design default · Left · Center · Right phone & desktop
Line under it style
  • Line under it font Google Font and weight phone & desktop
  • Line under it size Slider, 9–28px phone & desktop
  • Line under it color Colour phone & desktop
  • Line under it line height Slider, 0.8–2.4 phone & desktop
  • Line under it letter spacing Slider, -8–12px phone & desktop
  • Line under it alignment Design default · Left · Center · Right phone & desktop
Score style
  • Score font Google Font and weight phone & desktop
  • Score size Slider, 9–48px phone & desktop
  • Score color Colour phone & desktop
  • Score line height Slider, 0.8–2.4 phone & desktop
  • Score letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Map with pins

Free Place

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Map width Slider, 20–100% phone & desktop Of the space the map has beside the list.
  • Map height Slider, 160–900px phone & desktop
  • Pin size Slider, 12–56px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Map
  • Google Maps embed Embed code Paste the whole <iframe> from Google Maps > Share > Embed a map. Its size comes from the settings below.
Places
  • Places A list of places (up to 30): Name, Address, Hours, Directions link, Pin across, Pin down Optional — a map on its own, with no list beside it, is fine.
  • Directions link label Text

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
Style
  • Pin color Colour phone & desktop
  • Map corner radius Slider, 0–32px phone & desktop
Place style
  • Place name font Google Font and weight phone & desktop
  • Place name size Slider, 10–96px phone & desktop
  • Place name color Colour phone & desktop
  • Place name line height Slider, 0.9–2.4 phone & desktop
  • Place name letter spacing Slider, -3–8px phone & desktop
  • Place name alignment Design default · Left · Center · Right phone & desktop
  • Address font Google Font and weight phone & desktop
  • Address size Slider, 10–96px phone & desktop
  • Address color Colour phone & desktop
  • Address line height Slider, 0.9–2.4 phone & desktop
  • Address letter spacing Slider, -3–8px phone & desktop
  • Address alignment Design default · Left · Center · Right phone & desktop
  • Directions link font Google Font and weight phone & desktop
  • Directions link size Slider, 10–96px phone & desktop
  • Directions link color Colour phone & desktop
  • Directions link line height Slider, 0.9–2.4 phone & desktop
  • Directions link letter spacing Slider, -3–8px phone & desktop
  • Directions link alignment Design default · Left · Center · Right phone & desktop

Nutrition Facts

Premium Product 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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Width of the label Slider, 240–640px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
The label
  • Title of the label Text
  • Servings line Text
  • Words for serving size Text
  • Serving size Text
  • Words above the calories Text
  • Word for calories Text
  • Calories Text
  • Heading over the daily share Text
  • Heading over the amounts Text
  • Heading over the second amounts Text
  • Footnote Text, several lines
Nutrients
  • Nutrients A list of nutrients (up to 40): Name, Amount, Second amount, Share of the day, %, Line, Thick rule under it
Under the label
  • Word for ingredients Text
  • Ingredients Text, several lines
  • Word for allergens Text
  • Allergens Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Label style
  • Label background Colour phone & desktop
  • Rules and border Colour phone & desktop
  • Accent color Colour phone & desktop The bars, and the calories tile.
  • Corner radius Slider, 0–24px phone & desktop
Label title style
  • Label title font Google Font and weight phone & desktop
  • Label title size Slider, 9–72px phone & desktop
  • Label title color Colour phone & desktop
  • Label title line height Slider, 0.8–2.4 phone & desktop
  • Label title letter spacing Slider, -8–12px phone & desktop
  • Label title alignment Design default · Left · Center · Right phone & desktop
Calories style
  • Calories font Google Font and weight phone & desktop
  • Calories size Slider, 9–96px phone & desktop
  • Calories color Colour phone & desktop
  • Calories line height Slider, 0.8–2.4 phone & desktop
  • Calories letter spacing Slider, -8–12px phone & desktop
Nutrient style
  • Nutrient font Google Font and weight phone & desktop
  • Nutrient size Slider, 9–28px phone & desktop
  • Nutrient color Colour phone & desktop
  • Nutrient line height Slider, 0.8–2.4 phone & desktop
  • Nutrient letter spacing Slider, -8–12px phone & desktop
Small print style
  • Small print font Google Font and weight phone & desktop
  • Small print size Slider, 9–22px phone & desktop
  • Small print color Colour phone & desktop
  • Small print line height Slider, 0.8–2.4 phone & desktop
  • Small print letter spacing Slider, -8–12px phone & desktop
  • Small print alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Progress meters

Free Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Bar height Slider, 3–48px phone & desktop
  • Gap between meters Slider, 4–60px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Meters
  • Meters A list of meters (up to 20): Label, Percent, Value shown, Bar color

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
Style
  • Bar corner radius Slider, 0–999px phone & desktop
  • Track color Colour phone & desktop
Meter style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–96px phone & desktop
  • Label color Colour phone & desktop
  • Label line height Slider, 0.9–2.4 phone & desktop
  • Label letter spacing Slider, -3–8px phone & desktop
  • Label alignment Design default · Left · Center · Right phone & desktop
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 10–96px phone & desktop
  • Value color Colour phone & desktop
  • Value line height Slider, 0.9–2.4 phone & desktop
  • Value letter spacing Slider, -3–8px phone & desktop
  • Value alignment Design default · Left · Center · Right phone & desktop

Radar Chart

Premium Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Chart data
  • Lay a second shape over it On / off
  • Print each score beside its name On / off
  • Decimals Slider, 0–2
Scale
  • Rings Slider, 1–8
Layout
  • Size of the chart Slider, 220–720px phone & desktop
  • Thickness of the shape's edge Slider, 1–6px phone & desktop
  • Size of the points Slider, 0–12px

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Chart data
  • Qualities A list of qualities (up to 10): Name, Score, Score it is compared with Between three and ten. Fewer than three cannot make a shape.
  • Name of the scores Text
  • Name of the second scores Text
  • After each score Text
  • Note under it Text, several lines
Scale
  • The outside edge is Number Leave blank to use the highest score.

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Chart style
  • How solid the shape is Slider, 0–80% phone & desktop
  • Shape color Colour phone & desktop
  • Second shape color Colour phone & desktop
  • Rings and spokes Colour phone & desktop
Name style
  • Name font Google Font and weight phone & desktop
  • Name size Slider, 9–28px phone & desktop
  • Name color Colour phone & desktop
  • Name line height Slider, 0.8–2.4 phone & desktop
  • Name letter spacing Slider, -8–12px phone & desktop
Score style
  • Score font Google Font and weight phone & desktop
  • Score size Slider, 9–28px phone & desktop
  • Score color Colour phone & desktop
  • Score line height Slider, 0.8–2.4 phone & desktop
  • Score letter spacing Slider, -8–12px phone & desktop
Key and note style
  • Key and note font Google Font and weight phone & desktop
  • Key and note size Slider, 9–24px phone & desktop
  • Key and note color Colour phone & desktop
  • Key and note line height Slider, 0.8–2.4 phone & desktop
  • Key and note letter spacing Slider, -8–12px phone & desktop
  • Key and note alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Roadmap

Premium Planning

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Progress
  • Show overall progress On / off
Items
  • Show each item's status On / off
  • Show how many items a phase has On / off
Layout
  • Gap between items Slider, 0–48px phone & desktop
  • Narrowest a phase may be Slider, 140–420px phone & desktop
  • Road width Slider, 8–36px phone & desktop
  • Item padding Slider, 4–40px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Items
  • Items A 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 progress Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Status colors
  • Done Colour phone & desktop
  • In progress Colour phone & desktop
  • Planned Colour phone & desktop
Item style
  • Item background Colour phone & desktop
  • Item corner radius Slider, 0–32px phone & desktop
  • Phase background Colour phone & desktop
  • Lines and dividers Colour phone & desktop
  • Road Colour phone & desktop
  • Road markings Colour phone & desktop
Phase style
  • Phase font Google Font and weight phone & desktop
  • Phase size Slider, 10–40px phone & desktop
  • Phase color Colour phone & desktop
  • Phase line height Slider, 0.8–2.4 phone & desktop
  • Phase letter spacing Slider, -8–12px phone & desktop
  • Phase alignment Design default · Left · Center · Right phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–40px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.8–2.4 phone & desktop
  • Title letter spacing Slider, -8–12px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
Description style
  • Description font Google Font and weight phone & desktop
  • Description size Slider, 10–28px phone & desktop
  • Description color Colour phone & desktop
  • Description line height Slider, 0.8–2.4 phone & desktop
  • Description letter spacing Slider, -8–12px phone & desktop
  • Description alignment Design default · Left · Center · Right phone & desktop
Status and tag style
  • Status and tag font Google Font and weight phone & desktop
  • Status and tag size Slider, 10–20px phone & desktop
  • Status and tag color Colour phone & desktop
  • Status and tag line height Slider, 0.8–2.4 phone & desktop
  • Status and tag letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 10–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Size Chart

Free Tabular

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Units
  • Let shoppers switch units On / off
Layout
  • First column names each row On / off
  • Keep the first column in view when scrolling On / off
  • Padding inside a cell Slider, 4–28px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Measurements
  • Measurements A table you fill in, cell by cell The top row is the headings. Type every measurement in one unit; shoppers can switch to the other.
  • Caption Text
  • Note under it Text, several lines
Units
  • The measurements are typed in Centimetres · Inches
  • Short name for centimetres Text
  • Short name for inches Text
  • Name of the switch Text Read out by screen readers.
  • Columns that are not measurements Text Their 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
  • Heading Text
  • Picture Image
  • Steps A list of steps (up to 8): What is measured, How

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Table style
  • Heading row background Colour phone & desktop
  • Cell background Colour phone & desktop
  • Stripe Colour phone & desktop
  • Lines Colour phone & desktop
  • Accent color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop
Heading row style
  • Heading row font Google Font and weight phone & desktop
  • Heading row size Slider, 9–28px phone & desktop
  • Heading row color Colour phone & desktop
  • Heading row line height Slider, 0.8–2.4 phone & desktop
  • Heading row letter spacing Slider, -8–12px phone & desktop
  • Heading row alignment Design default · Left · Center · Right phone & desktop
Cell style
  • Cell font Google Font and weight phone & desktop
  • Cell size Slider, 9–28px phone & desktop
  • Cell color Colour phone & desktop
  • Cell line height Slider, 0.8–2.4 phone & desktop
  • Cell letter spacing Slider, -8–12px phone & desktop
  • Cell alignment Design default · Left · Center · Right phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 9–24px phone & desktop
  • Note color Colour phone & desktop
  • Note line height Slider, 0.8–2.4 phone & desktop
  • Note letter spacing Slider, -8–12px phone & desktop
  • Note alignment Design default · Left · Center · Right phone & desktop
Step name style
  • Step name font Google Font and weight phone & desktop
  • Step name size Slider, 9–32px phone & desktop
  • Step name color Colour phone & desktop
  • Step name line height Slider, 0.8–2.4 phone & desktop
  • Step name letter spacing Slider, -8–12px phone & desktop
  • Step name alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Stat counters

Free Numbers

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 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, 8–72px phone & desktop
  • Item padding Slider, 0–60px phone & desktop
  • Count duration Slider, 0–8s

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Counters
  • Counters A list of counters (up to 12): Number, Before the number, After the number, Label, Note

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
Counter 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
  • Number alignment Design default · Left · Center · Right phone & desktop
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–96px phone & desktop
  • Label color Colour phone & desktop
  • Label line height Slider, 0.9–2.4 phone & desktop
  • Label letter spacing Slider, -3–8px phone & desktop
  • Label 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
  • Item background Colour phone & desktop
  • Item border color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop

Sustainability Stats

Free Numbers

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Motion
  • Seconds for the bars to fill Slider, 0–3s phone & desktop 0 shows it without moving.
Layout
  • Narrowest a card may be Slider, 140–420px phone & desktop As many fit side by side as this allows.
  • Padding inside a card Slider, 8–56px phone & desktop
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Figures
  • Figures A 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 is In "One big figure", the first is the big one.
  • Words after the goal's percentage Text
  • Where the figures come from Text, several lines
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Accent color Colour phone & desktop
  • Unfilled part of a bar Colour phone & desktop
  • Good news Colour phone & desktop
  • Bad news Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
Figure style
  • Figure font Google Font and weight phone & desktop
  • Figure size Slider, 9–140px phone & desktop
  • Figure color Colour phone & desktop
  • Figure line height Slider, 0.8–2.4 phone & desktop
  • Figure letter spacing Slider, -8–12px phone & desktop
Unit style
  • Unit font Google Font and weight phone & desktop
  • Unit size Slider, 9–40px phone & desktop
  • Unit color Colour phone & desktop
  • Unit line height Slider, 0.8–2.4 phone & desktop
  • Unit letter spacing Slider, -8–12px phone & desktop
What it measures style
  • What it measures font Google Font and weight phone & desktop
  • What it measures size Slider, 9–36px phone & desktop
  • What it measures color Colour phone & desktop
  • What it measures line height Slider, 0.8–2.4 phone & desktop
  • What it measures letter spacing Slider, -8–12px phone & desktop
  • What it measures alignment Design default · Left · Center · Right phone & desktop
Line under it style
  • Line under it font Google Font and weight phone & desktop
  • Line under it size Slider, 9–28px phone & desktop
  • Line under it color Colour phone & desktop
  • Line under it line height Slider, 0.8–2.4 phone & desktop
  • Line under it letter spacing Slider, -8–12px phone & desktop
  • Line under it alignment Design default · Left · Center · Right phone & desktop
Small print style
  • Small print font Google Font and weight phone & desktop
  • Small print size Slider, 9–24px phone & desktop
  • Small print color Colour phone & desktop
  • Small print line height Slider, 0.8–2.4 phone & desktop
  • Small print letter spacing Slider, -8–12px phone & desktop
  • Small print alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Vertical timeline

Free Sequence

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 top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap between entries Slider, 8–90px phone & desktop
  • Dot size Slider, 4–32px phone & desktop
  • Image height Slider, 0–420px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Entries
  • Entries A list of entries (up to 40): Date or step, Title, Body, Image

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
Entry style
  • Date or step font Google Font and weight phone & desktop
  • Date or step size Slider, 10–96px phone & desktop
  • Date or step color Colour phone & desktop
  • Date or step line height Slider, 0.9–2.4 phone & desktop
  • Date or step letter spacing Slider, -3–8px phone & desktop
  • Date or step alignment Design default · Left · Center · Right phone & desktop
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–96px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.9–2.4 phone & desktop
  • Title letter spacing Slider, -3–8px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
  • Body font Google Font and weight phone & desktop
  • Body size Slider, 10–96px phone & desktop
  • Body color Colour phone & desktop
  • Body line height Slider, 0.9–2.4 phone & desktop
  • Body letter spacing Slider, -3–8px phone & desktop
  • Body alignment Design default · Left · Center · Right phone & desktop
Style
  • Line color Colour phone & desktop
  • Dot color Colour phone & desktop
  • Image corner radius Slider, 0–32px 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 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.