Start a project

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.

Install Panely free → See the demos

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.

Chart Progress meters Stat counters Map with pins Horizontal timeline Vertical timeline Availability calendar Clock Current date

Chart

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

Progress meters

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

Stat counters

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

Map with pins

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

Horizontal timeline

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

Vertical timeline

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

Availability calendar

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

Clock

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

Current date

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

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.

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