Start a project

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.

Install Panely free → See the demos

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.

Before / after slider Countdown timer Accordion Expandable read more Tabs Multi-step quiz Mega menu Lightbox gallery Flip cards Hover reveal Image hotspots Toggle switch

Before / after slider

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

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

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

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

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

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

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

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

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

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

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

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.

Install Panely free →
More Panely sections
Data-shaped Chart, Progress meters, Stat counters… Forms & capture Sticky bar, Inline form, Multi step form… Grids Filterable grid, Bento grid, Mosaic collage… Motion & carousel Draggable Card Stack, Advance Slideshow, Infinite Marquee… Overlay & split layouts Image with text overlay, Offset cards, Text over video… Product structures Bundle Builder, Quick Add Rows, Single Product… Typographic treatments Oversized Statement, Checklist, Icon And Text…