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
FreeComparison
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
HeightSlider, 180–800pxphone & desktop
Handle start positionSlider, 0–100%
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Images
Before imageImage
Before labelText
After imageImage
After labelText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Style
Corner radiusSlider, 0–32pxphone & desktop
Handle colorColourphone & desktop
Labels fontGoogle Font and weightphone & desktop
Labels sizeSlider, 10–96pxphone & desktop
Labels colorColourphone & desktop
Labels line heightSlider, 0.9–2.4phone & desktop
Labels letter spacingSlider, -3–8pxphone & desktop
Label backgroundColourphone & desktop
Countdown Timer
FreeCountdown
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.
Count down toA date and time · A time every day · A set time from each shopper's first visit
Start dateDateLeave the start blank to start straight away.
Start timeTime
End dateDate
End timeTime
Every day atTimeCounts down to this time each day, then starts again for the next day — "order by 2pm for same-day dispatch".
HoursNumberEach shopper gets their own countdown, starting from their first visit on this device.
MinutesNumber
Time zoneEach shopper's own time · UTC · Los Angeles (Pacific) · Denver (Mountain) · Phoenix · Chicago (Central) · New York (Eastern) · Halifax (Atlantic) · Anchorage · Honolulu · Toronto · Vancouver · Mexico City · Bogotá · Lima · Santiago · São Paulo · Buenos Aires · London · Dublin · Lisbon · Paris · Berlin · Madrid · Rome · Amsterdam · Stockholm · Warsaw · Athens · Istanbul · Moscow · Lagos · Cairo · Johannesburg · Nairobi · Dubai · Karachi · India (Kolkata) · Dhaka · Bangkok · Jakarta · Singapore · Hong Kong · Shanghai · Manila · Seoul · Tokyo · Perth · Brisbane · Sydney · Melbourne · AucklandPick your store's time zone so the sale ends at the same moment for everyone.
Before it startsCount down to the start · Hide the section
Before-start lineText
When it endsShow a message · Stop at zero · Hide the section
Ended messageText
Heading
KickerText
HeadingText
Intro textText, several lines
Timer labels
Days labelText
Hours labelText
Minutes labelText
Seconds labelText
Image
ImageImage
Image descriptionText
Button
Button labelTextLeave blank for no button.
Button linkLink
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–120pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–120pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -3–8pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Number boxes
Number box backgroundColourphone & desktop
Number box borderColourphone & desktop
Number box radiusSlider, 0–60pxphone & desktop
Accent colorColourphone & desktopThe rings, the progress bar and the separators.
Track colorColourphone & desktop
Numbers
Number fontGoogle Font and weightphone & desktop
Number sizeSlider, 10–120pxphone & desktop
Number colorColourphone & desktop
Number line heightSlider, 0.8–2.4phone & desktop
Number letter spacingSlider, -3–8pxphone & desktop
Number alignmentDesign default · Left · Center · Rightphone & desktop
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 10–120pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.8–2.4phone & desktop
Label letter spacingSlider, -3–8pxphone & desktop
Label alignmentDesign default · Left · Center · Rightphone & desktop
Messages
Before-start line fontGoogle Font and weightphone & desktop
Before-start line sizeSlider, 10–120pxphone & desktop
Before-start line colorColourphone & desktop
Before-start line line heightSlider, 0.8–2.4phone & desktop
Before-start line letter spacingSlider, -3–8pxphone & desktop
Before-start line alignmentDesign default · Left · Center · Rightphone & desktop
Ended message fontGoogle Font and weightphone & desktop
Ended message sizeSlider, 10–120pxphone & desktop
Ended message colorColourphone & desktop
Ended message line heightSlider, 0.8–2.4phone & desktop
Ended message letter spacingSlider, -3–8pxphone & desktop
Ended message alignmentDesign default · Left · Center · Rightphone & desktop
Button style
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button text sizeSlider, 10–28pxphone & desktop
Button radiusSlider, 0–40pxphone & desktop
Button style alignmentDesign default · Left · Center · Rightphone & desktop
Accordion
FreeDisclosure
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
Open the first rowOn / off
Only one row open at a timeOn / off
Row paddingSlider, 6–48pxphone & desktop
Gap between rowsSlider, 0–24pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Rows
RowsA list of rows (up to 40): Heading, Body
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Row style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Body fontGoogle Font and weightphone & desktop
Body sizeSlider, 10–96pxphone & desktop
Body colorColourphone & desktop
Body line heightSlider, 0.9–2.4phone & desktop
Body letter spacingSlider, -3–8pxphone & desktop
Body alignmentDesign default · Left · Center · Rightphone & desktop
Style
Divider colorColourphone & desktop
Row backgroundColourphone & desktop
Corner radiusSlider, 0–24pxphone & desktop
Marker colorColourphone & desktop
Expandable read more
FreeDisclosure
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Body
Visible textText, several lines
Hidden textText, several lines
Expand labelText
Collapse labelText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Body style
Body fontGoogle Font and weightphone & desktop
Body sizeSlider, 10–96pxphone & desktop
Body colorColourphone & desktop
Body line heightSlider, 0.9–2.4phone & desktop
Body letter spacingSlider, -3–8pxphone & desktop
Body alignmentDesign default · Left · Center · Rightphone & desktop
Toggle fontGoogle Font and weightphone & desktop
Toggle sizeSlider, 10–96pxphone & desktop
Toggle colorColourphone & desktop
Toggle line heightSlider, 0.9–2.4phone & desktop
Toggle letter spacingSlider, -3–8pxphone & desktop
Toggle alignmentDesign default · Left · Center · Rightphone & desktop
Fade colorColourphone & desktop
Tabs
FreeDisclosure
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Layout
Panel paddingSlider, 0–72pxphone & desktop
Panel image heightSlider, 0–600pxphone & desktop
Content
Heading
KickerText
HeadingText
Intro textText, several lines
Tabs
TabsA list of tabs (up to 10): Tab label, Panel title, Panel body, Panel image
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Tab style
Tab label fontGoogle Font and weightphone & desktop
Tab label sizeSlider, 10–96pxphone & desktop
Tab label colorColourphone & desktop
Tab label line heightSlider, 0.9–2.4phone & desktop
Tab label letter spacingSlider, -3–8pxphone & desktop
Selected tab colorColourphone & desktop
Selected tab backgroundColourphone & desktop
Tab label alignmentDesign default · Left · Center · Rightphone & desktop
Panel style
Panel title fontGoogle Font and weightphone & desktop
Panel title sizeSlider, 10–96pxphone & desktop
Panel title colorColourphone & desktop
Panel title line heightSlider, 0.9–2.4phone & desktop
Panel title letter spacingSlider, -3–8pxphone & desktop
Panel title alignmentDesign default · Left · Center · Rightphone & desktop
Panel body fontGoogle Font and weightphone & desktop
Panel body sizeSlider, 10–96pxphone & desktop
Panel body colorColourphone & desktop
Panel body line heightSlider, 0.9–2.4phone & desktop
Panel body letter spacingSlider, -3–8pxphone & desktop
Panel body alignmentDesign default · Left · Center · Rightphone & desktop
Panel backgroundColourphone & desktop
Panel corner radiusSlider, 0–32pxphone & desktop
Multi Step Quiz
FreeGuided
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.
QuestionsA list of questions (up to 10): Question, Answers (one per line)
Result
Result titleText
Result bodyText, several lines
Button labelText
Button linkLink
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Heading
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.9–2.4phone & desktop
Kicker letter spacingSlider, -3–8pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–96pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.9–2.4phone & desktop
Heading letter spacingSlider, -3–8pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro text fontGoogle Font and weightphone & desktop
Intro text sizeSlider, 10–96pxphone & desktop
Intro text colorColourphone & desktop
Intro text line heightSlider, 0.9–2.4phone & desktop
Intro text letter spacingSlider, -3–8pxphone & desktop
Intro text alignmentDesign default · Left · Center · Rightphone & desktop
Step style
Question fontGoogle Font and weightphone & desktop
Question sizeSlider, 10–96pxphone & desktop
Question colorColourphone & desktop
Question line heightSlider, 0.9–2.4phone & desktop
Question letter spacingSlider, -3–8pxphone & desktop
Question alignmentDesign default · Left · Center · Rightphone & desktop
Answer fontGoogle Font and weightphone & desktop
Answer sizeSlider, 10–96pxphone & desktop
Answer colorColourphone & desktop
Answer line heightSlider, 0.9–2.4phone & desktop
Answer letter spacingSlider, -3–8pxphone & desktop
Answer backgroundColourphone & desktop
Selected answer backgroundColourphone & desktop
Answer corner radiusSlider, 0–32pxphone & desktop
Answer alignmentDesign default · Left · Center · Rightphone & desktop
Result
Button text sizeSlider, 11–28pxphone & desktop
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button corner radiusSlider, 0–40pxphone & desktop
Result alignmentDesign default · Left · Center · Rightphone & desktop
Mega Menu
PremiumNavigation
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Behaviour
Open panels onHover or click · Click onlyPhones always open on a tap.
Menu itemsLeft · Center · Right
Space between itemsSlider, 0–80pxphone & desktop
Menu bar height (padding)Slider, 4–48pxphone & desktop
Panel paddingSlider, 8–80pxphone & desktop
Space between columnsSlider, 8–96pxphone & desktop
Rail widthSlider, 160–420px
Picture heightSlider, 120–480pxphone & desktop
Content
Menu items
Menu itemsA 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 linkEach item opens a panel when a link below names its number. With no links, it is a plain link.
Panel links
Panel linksA 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 textTextLinks each panel to its menu item's own link. Leave blank for none.
Menu name (for screen readers)Text
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Menu bar
Menu bar borderColourphone & desktop
Menu item fontGoogle Font and weightphone & desktop
Menu item sizeSlider, 10–120pxphone & desktop
Menu item colorColourphone & desktop
Menu item line heightSlider, 0.8–2.4phone & desktop
Menu item letter spacingSlider, -3–8pxphone & desktop
Menu item hover colorColourphone & desktop
Panel
Panel backgroundColourphone & desktop
Panel borderColourphone & desktop
Panel radiusSlider, 0–32pxphone & desktop
Panel shadowSlider, 0–5phone & desktop
Picture radiusSlider, 0–40pxphone & desktop
Panel text
Column heading fontGoogle Font and weightphone & desktop
StepsA 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 linkThe 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
BackText
Start againText
Before the choices madeText
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Card style
Card backgroundColourphone & desktop
Card corner radiusSlider, 0–40pxphone & desktop
Question style
Question fontGoogle Font and weightphone & desktop
Question sizeSlider, 10–72pxphone & desktop
Question colorColourphone & desktop
Question line heightSlider, 0.8–2.4phone & desktop
Question letter spacingSlider, -8–12pxphone & desktop
Question alignmentDesign default · Left · Center · Rightphone & desktop
Text style
Text fontGoogle Font and weightphone & desktop
Text sizeSlider, 10–32pxphone & desktop
Text colorColourphone & desktop
Text line heightSlider, 0.8–2.4phone & desktop
Text letter spacingSlider, -8–12pxphone & desktop
Text alignmentDesign default · Left · Center · Rightphone & desktop
Choice style
Choice fontGoogle Font and weightphone & desktop
Choice sizeSlider, 10–32pxphone & desktop
Choice colorColourphone & desktop
Choice line heightSlider, 0.8–2.4phone & desktop
Choice letter spacingSlider, -8–12pxphone & desktop
Choice backgroundColourphone & desktop
Accent colorColourphone & desktop
Choice corner radiusSlider, 0–40pxphone & desktop
Choice alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Button
Button text sizeSlider, 11–28pxphone & desktop
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button corner radiusSlider, 0–40pxphone & desktop
Button alignmentDesign default · Left · Center · Rightphone & desktop
Cursor Reactive Background
PremiumPointer
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Minimum heightSlider, 0–100%phone & desktopA share of the screen height.
Caption letter spacingSlider, -8–12pxphone & desktop
Caption alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Interactive Spotlight
PremiumPointer
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 topSlider, 0–200pxphone & desktop
Padding bottomSlider, 0–200pxphone & desktop
Max widthSlider, 480–1600pxphone & desktop
Minimum heightSlider, 0–100%phone & desktopA share of the screen height.
That isEach year · Each month · Each week · Each day
What they pay now
LabelText
LowestNumber
HighestNumber
Moves in steps ofNumber
Starts atNumber
Your price
What each one costs with youNumberShoppers cannot change this one.
One-off cost to start (optional)NumberA machine, a kit, a joining fee. Taken off the long-run saving.
Long run, in yearsNumber
Result wording
Saved each yearText
Spending nowText
Spending with youText
Saved each monthText
Saved in the long runText
After a yearly amountText
Small printText, several lines
Button
Button labelText
Button linkLink
Numbers
Currency symbolText
Symbol goesBefore the number · After the number
Decimals in pricesNone · Two
Style
Section
Background colorColourphone & desktop
Background imageImagephone & desktop
Card style
Bar: spending nowColourphone & desktop
Card backgroundColourphone & desktop
Result backgroundColourphone & desktop
Corner radiusSlider, 0–40pxphone & desktop
Accent colorColourphone & desktop
Slider trackColourphone & desktop
Label style
Label fontGoogle Font and weightphone & desktop
Label sizeSlider, 10–32pxphone & desktop
Label colorColourphone & desktop
Label line heightSlider, 0.8–2.4phone & desktop
Label letter spacingSlider, -8–12pxphone & desktop
Value style
Value fontGoogle Font and weightphone & desktop
Value sizeSlider, 10–40pxphone & desktop
Value colorColourphone & desktop
Value line heightSlider, 0.8–2.4phone & desktop
Value letter spacingSlider, -8–12pxphone & desktop
Result style
Result fontGoogle Font and weightphone & desktop
Result sizeSlider, 20–140pxphone & desktop
Result colorColourphone & desktop
Result line heightSlider, 0.8–2.4phone & desktop
Result letter spacingSlider, -8–12pxphone & desktop
Result alignmentDesign default · Left · Center · Rightphone & desktop
Result detail style
Result detail fontGoogle Font and weightphone & desktop
Result detail sizeSlider, 10–32pxphone & desktop
Result detail colorColourphone & desktop
Result detail line heightSlider, 0.8–2.4phone & desktop
Result detail letter spacingSlider, -8–12pxphone & desktop
Note style
Note fontGoogle Font and weightphone & desktop
Note sizeSlider, 10–24pxphone & desktop
Note colorColourphone & desktop
Note line heightSlider, 0.8–2.4phone & desktop
Note letter spacingSlider, -8–12pxphone & desktop
Note alignmentDesign default · Left · Center · Rightphone & desktop
Kicker style
Kicker fontGoogle Font and weightphone & desktop
Kicker sizeSlider, 10–96pxphone & desktop
Kicker colorColourphone & desktop
Kicker line heightSlider, 0.8–2.4phone & desktop
Kicker letter spacingSlider, -8–12pxphone & desktop
Kicker alignmentDesign default · Left · Center · Rightphone & desktop
Heading style
Heading fontGoogle Font and weightphone & desktop
Heading sizeSlider, 10–120pxphone & desktop
Heading colorColourphone & desktop
Heading line heightSlider, 0.8–2.4phone & desktop
Heading letter spacingSlider, -8–12pxphone & desktop
Heading alignmentDesign default · Left · Center · Rightphone & desktop
Intro style
Intro fontGoogle Font and weightphone & desktop
Intro sizeSlider, 10–40pxphone & desktop
Intro colorColourphone & desktop
Intro line heightSlider, 0.8–2.4phone & desktop
Intro letter spacingSlider, -8–12pxphone & desktop
Intro alignmentDesign default · Left · Center · Rightphone & desktop
Button
Button text sizeSlider, 11–28pxphone & desktop
Button backgroundColourphone & desktop
Button text colorColourphone & desktop
Button corner radiusSlider, 0–40pxphone & desktop
Button alignmentDesign default · Left · Center · Rightphone & desktop
How to add a Panely section to your Shopify store
Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
Pick a section and press Add. Choose a design, and change the settings in the editor with a live preview beside them. You get a short section code.
Place it once. In the theme editor, add the Panely block where you want the section, and paste the code into its Section code field.
Edit any time. Change the section in Panely and save. Your store shows the change on its next page load, with nothing to paste again.
Each Add is its own copy with its own settings, so you can use the same section on as many pages as you like.
Panely must stay installed for its sections to show. If you uninstall, they disappear, and your theme is left
exactly as it was.
Questions about 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.