FAQ accordion, tabs, countdown timer and quiz sections for Shopify

Sections shoppers open, switch, drag and answer: an FAQ accordion, tabs, a countdown timer, a product quiz, a before/after slider, image hotspots and more. Most of them work without JavaScript.

Interactive sections let you put more on a page without making it longer. An FAQ accordion keeps shipping and returns answers one click away. Tabs hold specifications, care and sizing in one panel. Read more tucks long copy behind a fade. A toggle switch flips every price between monthly and yearly, or every measurement between centimetres and inches.

Others show things a flat image can’t: a before/after slider you drag, image hotspots that explain each part of a photo, flip cards and hover reveals. There’s also a multi-step quiz that ends on a result you choose, a countdown timer for sales and shipping cut-offs in eleven designs, and a mega menu. Accordions, tabs, toggles and reveals are built on plain HTML and CSS, so they keep working with JavaScript switched off and stay readable to search engines.

Free sections are in every plan, the free plan included. Premium sections need a paid plan.

Before / After Slider

Free Comparison

Two images and a handle you drag between them.

4 designs: Slider, Side by side, Fade, Stacked. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 40

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
  • Height Slider, 180–800px phone & desktop
  • Handle start position Slider, 0–100%

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Images
  • Before image Image
  • Before label Text
  • After image Image
  • After 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
  • Corner radius Slider, 0–32px phone & desktop
  • Handle color Colour phone & desktop
  • Labels font Google Font and weight phone & desktop
  • Labels size Slider, 10–96px phone & desktop
  • Labels color Colour phone & desktop
  • Labels line height Slider, 0.9–2.4 phone & desktop
  • Labels letter spacing Slider, -3–8px phone & desktop
  • Label background Colour phone & desktop

Countdown Timer

Free Countdown

A live countdown to a sale, a launch or a daily cut-off — start and stop at a date and time, in eleven designs.

11 designs: Boxes, Minimal, Flip clock, Rings, Cards, Outline, Bold banner, Announcement bar, Image beside, In a sentence, Progress bar. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 92

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
Timer
  • Show days On / off Off, the hours carry on past 24.
  • Show seconds On / off
  • Show labels On / off
  • Show separators On / off
  • Gap between numbers Slider, 0–60px phone & desktop
  • Number box width Slider, 40–200px phone & desktop
  • Number box padding Slider, 0–48px phone & desktop
  • Progress bar height Slider, 2–40px phone & desktop
Image
  • Image height Slider, 200–800px phone & desktop
Button style
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–64px phone & desktop

Content

Schedule
  • Count down to A date and time · A time every day · A set time from each shopper's first visit
  • Start date Date Leave the start blank to start straight away.
  • Start time Time
  • End date Date
  • End time Time
  • Every day at Time Counts down to this time each day, then starts again for the next day — "order by 2pm for same-day dispatch".
  • Hours Number Each shopper gets their own countdown, starting from their first visit on this device.
  • Minutes Number
  • 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 Pick your store's time zone so the sale ends at the same moment for everyone.
  • Before it starts Count down to the start · Hide the section
  • Before-start line Text
  • When it ends Show a message · Stop at zero · Hide the section
  • Ended message Text
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Timer labels
  • Days label Text
  • Hours label Text
  • Minutes label Text
  • Seconds label Text
Image
  • Image Image
  • Image description Text
Button
  • Button label Text Leave blank for no button.
  • Button link Link

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
Number boxes
  • Number box background Colour phone & desktop
  • Number box border Colour phone & desktop
  • Number box radius Slider, 0–60px phone & desktop
  • Accent color Colour phone & desktop The rings, the progress bar and the separators.
  • Track color Colour phone & desktop
Numbers
  • Number font Google Font and weight phone & desktop
  • Number size Slider, 10–120px phone & desktop
  • Number color Colour phone & desktop
  • Number line height Slider, 0.8–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–120px phone & desktop
  • Label color Colour phone & desktop
  • Label line height Slider, 0.8–2.4 phone & desktop
  • Label letter spacing Slider, -3–8px phone & desktop
  • Label alignment Design default · Left · Center · Right phone & desktop
Messages
  • Before-start line font Google Font and weight phone & desktop
  • Before-start line size Slider, 10–120px phone & desktop
  • Before-start line color Colour phone & desktop
  • Before-start line line height Slider, 0.8–2.4 phone & desktop
  • Before-start line letter spacing Slider, -3–8px phone & desktop
  • Before-start line alignment Design default · Left · Center · Right phone & desktop
  • Ended message font Google Font and weight phone & desktop
  • Ended message size Slider, 10–120px phone & desktop
  • Ended message color Colour phone & desktop
  • Ended message line height Slider, 0.8–2.4 phone & desktop
  • Ended message letter spacing Slider, -3–8px phone & desktop
  • Ended message alignment Design default · Left · Center · Right phone & desktop
Button style
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button text size Slider, 10–28px phone & desktop
  • Button radius Slider, 0–40px phone & desktop
  • Button style alignment Design default · Left · Center · Right phone & desktop

Accordion

Free Disclosure

Rows that open and close. Add as many as you need — questions, policies, specifications.

4 designs: Plain, Boxed, Bordered, Separated. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 47

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Open the first row On / off
  • Only one row open at a time On / off
  • Row padding Slider, 6–48px phone & desktop
  • Gap between rows Slider, 0–24px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Rows
  • Rows A list of rows (up to 40): Heading, 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
Row style
  • 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
  • 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
  • Divider color Colour phone & desktop
  • Row background Colour phone & desktop
  • Corner radius Slider, 0–24px phone & desktop
  • Marker color Colour phone & desktop

Expandable read more

Free Disclosure

Long copy that starts collapsed behind a fade, and opens on a click.

4 designs: Fade, Plain, Boxed, Inline. 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

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Body
  • Visible text Text, several lines
  • Hidden text Text, several lines
  • Expand label Text
  • Collapse 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
Body style
  • 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
  • Toggle font Google Font and weight phone & desktop
  • Toggle size Slider, 10–96px phone & desktop
  • Toggle color Colour phone & desktop
  • Toggle line height Slider, 0.9–2.4 phone & desktop
  • Toggle letter spacing Slider, -3–8px phone & desktop
  • Toggle alignment Design default · Left · Center · Right phone & desktop
  • Fade color Colour phone & desktop

Tabs

Free Disclosure

One panel at a time, switched by a row of labels.

4 designs: Underline, Pills, Boxed, Vertical. 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
  • Panel padding Slider, 0–72px phone & desktop
  • Panel image height Slider, 0–600px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Tabs
  • Tabs A list of tabs (up to 10): Tab label, Panel title, Panel body, Panel 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
Tab style
  • Tab label font Google Font and weight phone & desktop
  • Tab label size Slider, 10–96px phone & desktop
  • Tab label color Colour phone & desktop
  • Tab label line height Slider, 0.9–2.4 phone & desktop
  • Tab label letter spacing Slider, -3–8px phone & desktop
  • Selected tab color Colour phone & desktop
  • Selected tab background Colour phone & desktop
  • Tab label alignment Design default · Left · Center · Right phone & desktop
Panel style
  • Panel title font Google Font and weight phone & desktop
  • Panel title size Slider, 10–96px phone & desktop
  • Panel title color Colour phone & desktop
  • Panel title line height Slider, 0.9–2.4 phone & desktop
  • Panel title letter spacing Slider, -3–8px phone & desktop
  • Panel title alignment Design default · Left · Center · Right phone & desktop
  • Panel body font Google Font and weight phone & desktop
  • Panel body size Slider, 10–96px phone & desktop
  • Panel body color Colour phone & desktop
  • Panel body line height Slider, 0.9–2.4 phone & desktop
  • Panel body letter spacing Slider, -3–8px phone & desktop
  • Panel body alignment Design default · Left · Center · Right phone & desktop
  • Panel background Colour phone & desktop
  • Panel corner radius Slider, 0–32px phone & desktop

Multi Step Quiz

Free Guided

Questions answered one at a time, ending on a result you set.

4 designs: Cards, List, Buttons, Minimal. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 54

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap between steps Slider, 4–60px phone & desktop
Result
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Questions
  • Questions A list of questions (up to 10): Question, Answers (one per line)
Result
  • Result title Text
  • Result body Text, several lines
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Step style
  • Question font Google Font and weight phone & desktop
  • Question size Slider, 10–96px phone & desktop
  • Question color Colour phone & desktop
  • Question line height Slider, 0.9–2.4 phone & desktop
  • Question letter spacing Slider, -3–8px phone & desktop
  • Question alignment Design default · Left · Center · Right phone & desktop
  • Answer font Google Font and weight phone & desktop
  • Answer size Slider, 10–96px phone & desktop
  • Answer color Colour phone & desktop
  • Answer line height Slider, 0.9–2.4 phone & desktop
  • Answer letter spacing Slider, -3–8px phone & desktop
  • Answer background Colour phone & desktop
  • Selected answer background Colour phone & desktop
  • Answer corner radius Slider, 0–32px phone & desktop
  • Answer alignment Design default · Left · Center · Right phone & desktop
Result
  • 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
  • Result alignment Design default · Left · Center · Right phone & desktop

Mega Menu

Premium Navigation

A menu bar whose items open wide panels of link columns, with a featured picture — full width, beside a picture, compact or in a side rail.

4 designs: Full-width columns, Picture first, Compact dropdown, Side rail. 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
Behaviour
  • Open panels on Hover or click · Click only Phones always open on a tap.
  • Menu items Left · Center · Right
  • Space between items Slider, 0–80px phone & desktop
  • Menu bar height (padding) Slider, 4–48px phone & desktop
  • Panel padding Slider, 8–80px phone & desktop
  • Space between columns Slider, 8–96px phone & desktop
  • Rail width Slider, 160–420px
  • Picture height Slider, 120–480px phone & desktop

Content

Menu items
  • Menu items A list of menu items (up to 8): Label, Link, Column 1 heading, Column 2 heading, Column 3 heading, Column 4 heading, Featured picture, Featured title, Featured link Each item opens a panel when a link below names its number. With no links, it is a plain link.
Panel links
  • Panel links A list of links (up to 80): Label, Link, Menu item number, Column, Badge (optional) Pick which menu item and which column each link sits in.
  • View-all link text Text Links each panel to its menu item's own link. Leave blank for none.
  • Menu name (for screen readers) Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Menu bar
  • Menu bar border Colour phone & desktop
  • Menu item font Google Font and weight phone & desktop
  • Menu item size Slider, 10–120px phone & desktop
  • Menu item color Colour phone & desktop
  • Menu item line height Slider, 0.8–2.4 phone & desktop
  • Menu item letter spacing Slider, -3–8px phone & desktop
  • Menu item hover color Colour phone & desktop
Panel
  • Panel background Colour phone & desktop
  • Panel border Colour phone & desktop
  • Panel radius Slider, 0–32px phone & desktop
  • Panel shadow Slider, 0–5 phone & desktop
  • Picture radius Slider, 0–40px phone & desktop
Panel text
  • Column heading font Google Font and weight phone & desktop
  • Column heading size Slider, 10–120px phone & desktop
  • Column heading color Colour phone & desktop
  • Column heading line height Slider, 0.8–2.4 phone & desktop
  • Column heading letter spacing Slider, -3–8px phone & desktop
  • Column heading alignment Design default · Left · Center · Right phone & desktop
  • Link font Google Font and weight phone & desktop
  • Link size Slider, 10–120px phone & desktop
  • Link color Colour phone & desktop
  • Link line height Slider, 0.8–2.4 phone & desktop
  • Link letter spacing Slider, -3–8px phone & desktop
  • Link hover color Colour phone & desktop
  • Link alignment Design default · Left · Center · Right phone & desktop
  • Featured title font Google Font and weight phone & desktop
  • Featured title size Slider, 10–120px phone & desktop
  • Featured title color Colour phone & desktop
  • Featured title line height Slider, 0.8–2.4 phone & desktop
  • Featured title letter spacing Slider, -3–8px phone & desktop
  • Featured title alignment Design default · Left · Center · Right phone & desktop
  • Badge background Colour phone & desktop
  • Badge text color Colour phone & desktop

Flip Cards

Free Reveal

Cards with a back face that turns into view.

4 designs: Flip y, Flip x, Slide, Fade. 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
  • Columns Slider, 1–5 phone & desktop
  • Gap Slider, 4–56px phone & desktop
  • Card height Slider, 160–620px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Cards
  • Cards A list of cards (up to 20): Front image, Front title, Back title, Back body, Link

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
Card style
  • Front title font Google Font and weight phone & desktop
  • Front title size Slider, 10–96px phone & desktop
  • Front title color Colour phone & desktop
  • Front title line height Slider, 0.9–2.4 phone & desktop
  • Front title letter spacing Slider, -3–8px phone & desktop
  • Front title alignment Design default · Left · Center · Right phone & desktop
  • Back title font Google Font and weight phone & desktop
  • Back title size Slider, 10–96px phone & desktop
  • Back title color Colour phone & desktop
  • Back title line height Slider, 0.9–2.4 phone & desktop
  • Back title letter spacing Slider, -3–8px phone & desktop
  • Back title alignment Design default · Left · Center · Right phone & desktop
  • Back body font Google Font and weight phone & desktop
  • Back body size Slider, 10–96px phone & desktop
  • Back body color Colour phone & desktop
  • Back body line height Slider, 0.9–2.4 phone & desktop
  • Back body letter spacing Slider, -3–8px phone & desktop
  • Back body alignment Design default · Left · Center · Right phone & desktop
  • Back background Colour phone & desktop
  • Corner radius Slider, 0–36px phone & desktop

Hover Reveal

Free Reveal

Image tiles that give up their caption when you point at them.

4 designs: Rise, Zoom, Curtain, Corner. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 45

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–5 phone & desktop
  • Gap Slider, 0–48px phone & desktop
  • Tile height Slider, 160–700px phone & desktop
Tile style
  • Overlay darkness Slider, 0–1 phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Tiles
  • Tiles A list of tiles (up to 24): Image, Title, Revealed text, Link

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
Tile style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–96px phone & desktop
  • Title color Colour phone & desktop
  • Title line height Slider, 0.9–2.4 phone & desktop
  • Title letter spacing Slider, -3–8px phone & desktop
  • Title alignment Design default · Left · Center · Right phone & desktop
  • Revealed text font Google Font and weight phone & desktop
  • Revealed text size Slider, 10–96px phone & desktop
  • Revealed text color Colour phone & desktop
  • Revealed text line height Slider, 0.9–2.4 phone & desktop
  • Revealed text letter spacing Slider, -3–8px phone & desktop
  • Revealed text alignment Design default · Left · Center · Right phone & desktop
  • Overlay color Colour phone & desktop
  • Corner radius Slider, 0–32px phone & desktop

Image Hotspots

Free Reveal

Pins on an image that reveal a note. Place each one exactly where you want it.

4 designs: Dots, Numbered, Plus, Tags. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 46

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
  • Image height Slider, 200–900px phone & desktop
  • Pin size Slider, 14–60px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Image
  • Image Image
Pins
  • Pins A list of pins (up to 20): Position across, Position down, Title, Note, Link

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

Toggle Switch

Free Switch

A two-way switch that swaps every value on screen — monthly and yearly, cm and inches, with and without.

4 designs: Switch, Pills, Tabs, Inline. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 58

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
  • Row padding Slider, 4–44px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Switch
  • First option label Text
  • Second option label Text
  • Note beside the second option Text
Rows
  • Rows A list of rows (up to 20): Label, Value for the first option, Value for the second option, 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
Row style
  • Row label font Google Font and weight phone & desktop
  • Row label size Slider, 10–96px phone & desktop
  • Row label color Colour phone & desktop
  • Row label line height Slider, 0.9–2.4 phone & desktop
  • Row label letter spacing Slider, -3–8px phone & desktop
  • Row 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
  • 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
  • Row divider Colour phone & desktop
Switch style
  • Switch label font Google Font and weight phone & desktop
  • Switch label size Slider, 10–96px phone & desktop
  • Switch label color Colour phone & desktop
  • Switch label line height Slider, 0.9–2.4 phone & desktop
  • Switch label letter spacing Slider, -3–8px phone & desktop
  • Switch label alignment Design default · Left · Center · Right phone & desktop
  • Switch track color Colour phone & desktop
  • Selected color Colour phone & desktop

Choose Your Path

Premium Guided

A question whose answers each lead somewhere different: another question, or the result you set.

4 designs: Cards, List, Picture beside, Minimal. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 63

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
  • Show the choices made so far On / off
  • Gap between choices Slider, 0–40px phone & desktop
  • Padding inside the card Slider, 8–72px 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
Steps
  • Steps A list of steps (up to 24): Name of this step, Question or result, Text, Picture (optional), Choice 1, Choice 1 goes to (step name), Choice 2, Choice 2 goes to (step name), Choice 3, Choice 3 goes to (step name), Button label, Button link The first step is where everyone starts. A choice leads to the step whose name it gives. A step with no choices is an ending: give it a button.
Wording
  • Back Text
  • Start again Text
  • Before the choices made Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Card corner radius Slider, 0–40px phone & desktop
Question style
  • Question font Google Font and weight phone & desktop
  • Question size Slider, 10–72px phone & desktop
  • Question color Colour phone & desktop
  • Question line height Slider, 0.8–2.4 phone & desktop
  • Question letter spacing Slider, -8–12px phone & desktop
  • Question alignment Design default · Left · Center · Right phone & desktop
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 10–32px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • Text alignment Design default · Left · Center · Right phone & desktop
Choice style
  • Choice font Google Font and weight phone & desktop
  • Choice size Slider, 10–32px phone & desktop
  • Choice color Colour phone & desktop
  • Choice line height Slider, 0.8–2.4 phone & desktop
  • Choice letter spacing Slider, -8–12px phone & desktop
  • Choice background Colour phone & desktop
  • Accent color Colour phone & desktop
  • Choice corner radius Slider, 0–40px phone & desktop
  • Choice alignment Design default · Left · Center · Right 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
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

Cursor Reactive Background

Premium Pointer

A heading over a background of light that follows the cursor around.

4 designs: Glow, Dot grid, Drifting color, Turning gradient. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 42

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
  • Minimum height Slider, 0–100% phone & desktop A share of the screen height.
Light
  • Size of the light Slider, 20–100% phone & desktop
  • Brightness Slider, 0–100% phone & desktop
  • Drift by itself when nothing is pointing On / off
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
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Light
  • First color Colour phone & desktop
  • Second color Colour phone & desktop
  • Third color Colour 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–160px 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
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

Image Distortion Explorer

Premium Pointer

A picture that answers the cursor: a magnifying glass, split colors, sliding strips or ripples.

4 designs: Magnifying glass, Color split, Sliding strips, Ripple. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 39

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
  • Shape of the picture Wide · Standard · Square · Tall
  • How strongly it reacts Slider, 0–100
  • Size of the glass Slider, 80–360px phone & desktop
  • Magnification Slider, 120–400% phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Picture
  • Picture Image
  • Caption Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Picture style
  • Picture corner radius Slider, 0–40px phone & desktop
Caption style
  • Caption font Google Font and weight phone & desktop
  • Caption size Slider, 10–28px phone & desktop
  • Caption color Colour phone & desktop
  • Caption line height Slider, 0.8–2.4 phone & desktop
  • Caption letter spacing Slider, -8–12px phone & desktop
  • Caption alignment Design default · Left · Center · Right 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

Interactive Spotlight

Premium Pointer

A section in the dark, lit only where the cursor points.

4 designs: Torch in the dark, Picture under the light, Color under the light, A warm glow. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 42

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
  • Minimum height Slider, 0–100% phone & desktop A share of the screen height.
Light
  • Size of the light Slider, 80–700px phone & desktop
  • Soft edge Slider, 0–100% phone & desktop
  • How dark the rest is Slider, 0–100% phone & desktop
  • Drift by itself when nothing is pointing On / off
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
Picture
  • Picture behind the words Image
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Light
  • Color of the light Colour 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–160px 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
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

Liquid Distortion

Premium Pointer

A heading or a picture that ripples as if seen through water, and more so under the cursor.

4 designs: Ripple, Slow waves, Melt, Frosted glass. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 42

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
Motion
  • What ripples The words · The picture · Both
  • How much, at rest Slider, 0–60
  • How much, under the cursor Slider, 0–120
  • How fast it flows Slider, 0–100 0 holds it still.
Layout
  • Alignment Center · Left
Button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • The words that ripple Text Short reads best: one or two words.
  • Intro Text, several lines
Picture
  • Picture (optional) Image
Button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Picture style
  • Picture corner radius Slider, 0–40px 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–320px 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
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

Magnetic Cards

Premium Pointer

Cards that lean, lift and glow toward the cursor as it comes near.

4 designs: Tilt, Magnetic pull, Glowing edge, Lift. 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
  • Cards per row Slider, 1–4 phone & desktop
  • Gap between cards Slider, 0–60px phone & desktop
  • Padding inside a card Slider, 8–64px phone & desktop
  • How strongly they react Slider, 0–100 phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Cards
  • Cards A list of cards (up to 12): Small label, Title, Text, Link text (optional), Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Card corner radius Slider, 0–40px phone & desktop
  • Accent color Colour phone & desktop
Small label style
  • Small label font Google Font and weight phone & desktop
  • Small label size Slider, 10–24px phone & desktop
  • Small label color Colour phone & desktop
  • Small label line height Slider, 0.8–2.4 phone & desktop
  • Small label letter spacing Slider, -8–12px phone & desktop
  • Small label alignment Design default · Left · Center · Right phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 10–48px 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
Text style
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 10–28px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • Text alignment Design default · Left · Center · Right 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

Mouse Parallax Scene

Premium Pointer

Pictures and shapes at different depths that shift as the cursor moves, like looking through a window.

4 designs: Scene, Full-size layers, Framed scene, Tilting scene. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 41

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
  • Height Slider, 30–100% phone & desktop A share of the screen height.
Motion
  • How far things move Slider, 0–100 phone & desktop
  • How far the words move Slider, 0–60 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
Button
  • Button label Text
  • Button link Link
Layers
  • Layers A list of layers (up to 12): Picture, Shape (when there is no picture), Shape color, Across, Down, Size, Depth

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Scene style
  • Frame Colour phone & desktop
  • Frame corner radius Slider, 0–60px 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–160px 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
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

Physics Based Objects

Premium Play

Tags and balls that fall, bounce and pile up, and can be picked up and thrown.

4 designs: Tags, Balls, Tags and balls, Floating. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 37

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Height of the box Slider, 240–800px phone & desktop
  • Gravity Slider, 0–100
  • Bounciness Slider, 0–90

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Objects
  • Objects A list of objects (up to 30): Words, Color, Size, Link (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Box style
  • Box background Colour phone & desktop
  • Box corner radius Slider, 0–48px phone & desktop
Object style
  • Object font Google Font and weight phone & desktop
  • Object size Slider, 10–40px phone & desktop
  • Object color Colour phone & desktop
  • Object line height Slider, 0.8–2.4 phone & desktop
  • Object 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

Pricing Calculator

Premium Calculators

Shoppers pick how many they need and tick the extras, and the price adds itself up, volume discount included.

4 designs: Side by side, Stacked, One card, Result first. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 91

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 inputs Slider, 8–60px phone & desktop
  • Padding inside the cards Slider, 12–72px 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
How many
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
  • Price of each one Number
  • Word for one Text
  • Fixed starting price (optional) Number A set-up fee or a base plan, charged once whatever the number. Leave at 0 for none.
  • Name of the starting price Text
Volume discounts
  • Volume discounts A list of discounts (up to 8): From this many, Percent off each one The highest one a shopper reaches applies.
Extras
  • Extras A list of extras (up to 12): Name, Note (optional), Price, Charged, Ticked to begin with
  • Above the extras Text
Result wording
  • Total Text
  • The items Text
  • The discount Text
  • The extras Text
  • Price of each, all in Text
  • Word after a percentage Text
  • Small print Text, several lines
Button
  • Button label Text
  • Button link Link
Numbers
  • Currency symbol Text
  • Symbol goes Before the number · After the number
  • Decimals in prices None · Two

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Result background Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
  • Accent color Colour phone & desktop
  • Slider track Colour phone & desktop
Label style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–32px 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
Value style
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 10–40px 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
Result style
  • Result font Google Font and weight phone & desktop
  • Result size Slider, 20–140px phone & desktop
  • Result color Colour phone & desktop
  • Result line height Slider, 0.8–2.4 phone & desktop
  • Result letter spacing Slider, -8–12px phone & desktop
  • Result alignment Design default · Left · Center · Right phone & desktop
Result detail style
  • Result detail font Google Font and weight phone & desktop
  • Result detail size Slider, 10–32px phone & desktop
  • Result detail color Colour phone & desktop
  • Result detail line height Slider, 0.8–2.4 phone & desktop
  • Result detail letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–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, 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
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

Puzzle

Premium Play

A small puzzle to solve. Solving it reveals what you put behind it: a message, a code, a link.

4 designs: Sliding tiles, Swap the tiles, Find the pairs, Unscramble the word. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 74

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
Puzzle
  • Tiles across Slider, 3–4
Layout
  • Size of the board Slider, 200–560px phone & desktop
  • Gap between tiles Slider, 0–16px 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
Puzzle
  • Picture on the tiles Image A square picture works best. Leave empty for numbered tiles.
  • Things to pair up A list of pairs (up to 10): Word or emoji
  • The word to spell Text Up to twelve letters.
Behind the puzzle
  • Heading Text
  • Text Text, several lines
  • Code (optional) Text
Button
  • Button label Text
  • Button link Link
Wording
  • Word for moves Text
  • Skip the puzzle Text Leave empty to offer no way round it.
  • Play again Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Tile style
  • Tile background Colour phone & desktop
  • Tile corner radius Slider, 0–28px phone & desktop
  • Accent color Colour phone & desktop
  • Tile font Google Font and weight phone & desktop
  • Tile size Slider, 10–72px phone & desktop
  • Tile color Colour phone & desktop
  • Tile line height Slider, 0.8–2.4 phone & desktop
  • Tile letter spacing Slider, -8–12px phone & desktop
Behind the puzzle: style
  • Background Colour phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–60px 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
  • Text font Google Font and weight phone & desktop
  • Text size Slider, 10–32px phone & desktop
  • Text color Colour phone & desktop
  • Text line height Slider, 0.8–2.4 phone & desktop
  • Text letter spacing Slider, -8–12px phone & desktop
  • Text alignment Design default · Left · Center · Right phone & desktop
  • Code font Google Font and weight phone & desktop
  • Code size Slider, 10–48px phone & desktop
  • Code color Colour phone & desktop
  • Code line height Slider, 0.8–2.4 phone & desktop
  • Code letter spacing Slider, -8–12px phone & desktop
  • Code alignment Design default · Left · Center · Right 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
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

ROI Calculator

Premium Calculators

Shoppers set what it costs and what it brings in, and see the return, the profit and how soon it pays for itself.

4 designs: Side by side, Stacked, One card, Result first. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 94

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 inputs Slider, 8–60px phone & desktop
  • Padding inside the cards Slider, 12–72px 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
What it costs
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
What it brings in
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
How long
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
  • Word for months Text
Result wording
  • Return Text
  • Profit Text
  • Total brought in Text
  • Payback Text
  • When it never pays back Text
  • Small print Text, several lines
Button
  • Button label Text
  • Button link Link
Numbers
  • Currency symbol Text
  • Symbol goes Before the number · After the number
  • Decimals in prices None · Two

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Result background Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
  • Accent color Colour phone & desktop
  • Slider track Colour phone & desktop
Label style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–32px 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
Value style
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 10–40px 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
Result style
  • Result font Google Font and weight phone & desktop
  • Result size Slider, 20–140px phone & desktop
  • Result color Colour phone & desktop
  • Result line height Slider, 0.8–2.4 phone & desktop
  • Result letter spacing Slider, -8–12px phone & desktop
  • Result alignment Design default · Left · Center · Right phone & desktop
Result detail style
  • Result detail font Google Font and weight phone & desktop
  • Result detail size Slider, 10–32px phone & desktop
  • Result detail color Colour phone & desktop
  • Result detail line height Slider, 0.8–2.4 phone & desktop
  • Result detail letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–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, 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
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

Savings Calculator

Premium Calculators

Shoppers enter what they use and what they pay now, and see what they would save with you, as numbers and as two bars.

4 designs: Side by side, Stacked, One card, Result first. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 95

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
  • Show the two bars On / off
  • Gap between inputs Slider, 8–60px phone & desktop
  • Padding inside the cards Slider, 12–72px 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
How much they use
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
  • That is Each year · Each month · Each week · Each day
What they pay now
  • Label Text
  • Lowest Number
  • Highest Number
  • Moves in steps of Number
  • Starts at Number
Your price
  • What each one costs with you Number Shoppers cannot change this one.
  • One-off cost to start (optional) Number A machine, a kit, a joining fee. Taken off the long-run saving.
  • Long run, in years Number
Result wording
  • Saved each year Text
  • Spending now Text
  • Spending with you Text
  • Saved each month Text
  • Saved in the long run Text
  • After a yearly amount Text
  • Small print Text, several lines
Button
  • Button label Text
  • Button link Link
Numbers
  • Currency symbol Text
  • Symbol goes Before the number · After the number
  • Decimals in prices None · Two

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Bar: spending now Colour phone & desktop
  • Card background Colour phone & desktop
  • Result background Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
  • Accent color Colour phone & desktop
  • Slider track Colour phone & desktop
Label style
  • Label font Google Font and weight phone & desktop
  • Label size Slider, 10–32px 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
Value style
  • Value font Google Font and weight phone & desktop
  • Value size Slider, 10–40px 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
Result style
  • Result font Google Font and weight phone & desktop
  • Result size Slider, 20–140px phone & desktop
  • Result color Colour phone & desktop
  • Result line height Slider, 0.8–2.4 phone & desktop
  • Result letter spacing Slider, -8–12px phone & desktop
  • Result alignment Design default · Left · Center · Right phone & desktop
Result detail style
  • Result detail font Google Font and weight phone & desktop
  • Result detail size Slider, 10–32px phone & desktop
  • Result detail color Colour phone & desktop
  • Result detail line height Slider, 0.8–2.4 phone & desktop
  • Result detail letter spacing Slider, -8–12px phone & desktop
Note style
  • Note font Google Font and weight phone & desktop
  • Note size Slider, 10–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, 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
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

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 interactive sections

How do I add an FAQ section to my Shopify store?

Add the Accordion section in Panely, type each question and answer (add as many rows as you need), pick one of four designs and place it with the Panely app block, on your FAQ page, a product page or anywhere else. The answers are in the page’s HTML, so search engines can read them.

Can the countdown timer restart for each visitor?

Yes. Besides counting to a fixed date and time, or to the same time every day (a shipping cut-off, for example), evergreen mode counts a set number of hours from each shopper’s first visit.

Does the product quiz recommend products?

The quiz asks your questions one at a time and ends on the result screen you set up, with your own text and a button to any page, such as a collection. It doesn’t score answers against your catalogue automatically.

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.