Slideshow, marquee and carousel sections for Shopify

Sections that move: a full-width slideshow, a seamless logo marquee, a ticker strip, cards you flick through and a gallery that travels sideways as the page scrolls.

Movement draws the eye, which is why it works best in small doses. An infinite marquee is the classic place to show press logos, stockists or a line of short promises without taking up a whole section. The ticker strip runs short updates past in a single line.

For bigger moments, the slideshow runs full-width slides with fade, slide, Ken Burns or card transitions, and you set how long each one holds. The card stack lets shoppers drag or flick through cards. The scroll-triggered gallery pins in place and moves sideways as the page scrolls down. Automatic motion stops for shoppers whose device asks for reduced motion.

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

Draggable Card Stack

Free Carousel

Cards you push through by dragging or flicking sideways.

4 designs: Stack, Fan, Deck, Rail. 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
  • Card width Slider, 200–700px phone & desktop
  • Gap Slider, 4–64px phone & desktop
  • Card padding Slider, 8–64px phone & desktop
  • Image height Slider, 0–520px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Cards
  • Cards A list of cards (up to 20): Image, Title, Body, Meta

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

Circular Text Marquee

Free Looping

Words set round a circle, turning without end, with a picture or a word in the middle.

4 designs: Badge, Two rings, opposite ways, Seal, filled in, Outlined letters. 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, 320–1600px phone & desktop
Motion
  • Seconds for one turn Slider, 4–120s phone & desktop
  • Stop while it is pointed at On / off And while a shopper has focus in it.
  • It turns Clockwise · Anticlockwise
Layout
  • Size Slider, 100–560px phone & desktop
  • Where it sits In the middle · To the left · To the right

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
The ring
  • Words round the ring Text
  • Between each time it is said Text
  • Times it is said Slider, 1–8 Enough to go all the way round. The letters are spread to meet at the join.
  • Words round the inner ring Text
The middle
  • Picture in the middle Image
  • Words in the middle Text
  • Link for the whole badge (optional) Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Ring style
  • Size of the ring's letters Slider, 8–30
  • Weight of the ring's letters Slider, 300–900 phone & desktop
  • Ring's letters Colour phone & desktop
  • Seal Colour phone & desktop
Words in the middle style
  • Words in the middle font Google Font and weight phone & desktop
  • Words in the middle size Slider, 9–64px phone & desktop
  • Words in the middle color Colour phone & desktop
  • Words in the middle line height Slider, 0.8–2.4 phone & desktop
  • Words in the middle letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

3D Cube Slider

Premium Carousel

Slides turn like the faces of a cube: one swings away as the next swings in.

4 designs: Cube, turning sideways, Cube, tumbling, Six-sided, Flip over. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 59

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

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Shape of a slide Wide (16:9) · Landscape (4:3) · Square · Portrait (4:5)
Moving through them
  • After the last comes the first On / off
  • Move on by itself every Slider, 0–12s 0 leaves it to the shopper. It waits while they point at it or have focus in it, and never runs for someone who has asked for less motion.
  • Seconds a move takes Slider, 0–2s phone & desktop
  • Show the arrows On / off
  • Show the dots 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
Slides
  • Slides A list of slides (up to 16): Picture, Title, A few words (optional), Link words (optional), Link
Moving through them
  • Name of the back arrow Text Read out by screen readers.
  • Name of the forward arrow Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Slide style
  • Darken the picture Slider, 0–90% phone & desktop
  • Slide with no picture Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–80px 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
A few words style
  • A few words font Google Font and weight phone & desktop
  • A few words size Slider, 9–32px phone & desktop
  • A few words color Colour phone & desktop
  • A few words line height Slider, 0.8–2.4 phone & desktop
  • A few words letter spacing Slider, -8–12px phone & desktop
  • A few words alignment Design default · Left · Center · Right phone & desktop
Controls
  • Arrows Colour phone & desktop
  • Arrows' chevron Colour phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Diagonal Marquee

Free Looping

A band of words crosses the section on a slant, running without end.

4 designs: One band, Two, crossing, Three, alternate ways, Outlined letters. 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, 320–1600px phone & desktop
Motion
  • Seconds for one pass Slider, 4–120s phone & desktop
  • Stop while it is pointed at On / off And while a shopper has focus in it.
Layout
  • Slant Slider, -20–20° phone & desktop Below nought it rises to the right; above, it falls.
  • Thickness of a band Slider, 4–48px phone & desktop
  • Gap between phrases Slider, 8–96px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Words
  • Words A list of phrases (up to 20): Phrase
  • Between the phrases Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Band style
  • Band Colour phone & desktop
  • Second band Colour phone & desktop
  • Second band's words Colour phone & desktop
Words style
  • Words font Google Font and weight phone & desktop
  • Words size Slider, 9–120px phone & desktop
  • Words color Colour phone & desktop
  • Words line height Slider, 0.8–2.4 phone & desktop
  • Words letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Gravity Cards

Free Motion

Cards that drop into place one after another, bounce, and settle.

4 designs: Drop, Loose pile, Hanging, Tumble. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 53

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
Motion
  • Seconds to land Slider, 0–2.5s phone & desktop 0 shows the cards without dropping them.
  • Delay between cards Slider, 0–500ms 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

Liquid Slider

Free Carousel

Slides that change like liquid: the next one spreads over the last as a blob, a tide or a drip.

4 designs: Ink, spreading from the middle, Tide, from the side, Drip, from above, Picture in a blob. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 60

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

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Height Slider, 260–800px phone & desktop
Moving through them
  • After the last comes the first On / off
  • Move on by itself every Slider, 0–12s 0 leaves it to the shopper. It waits while they point at it or have focus in it, and never runs for someone who has asked for less motion.
  • Seconds a move takes Slider, 0–2s phone & desktop
  • Show the arrows On / off
  • Show the dots 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
Slides
  • Slides A list of slides (up to 16): Picture, Title, A few words (optional), Link words (optional), Link
Moving through them
  • Name of the back arrow Text Read out by screen readers.
  • Name of the forward arrow Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Slide style
  • Darken the picture Slider, 0–90% phone & desktop
  • Slide with no picture Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
  • Blob behind a missing picture Colour phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–80px 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
A few words style
  • A few words font Google Font and weight phone & desktop
  • A few words size Slider, 9–32px phone & desktop
  • A few words color Colour phone & desktop
  • A few words line height Slider, 0.8–2.4 phone & desktop
  • A few words letter spacing Slider, -8–12px phone & desktop
  • A few words alignment Design default · Left · Center · Right phone & desktop
Controls
  • Arrows Colour phone & desktop
  • Arrows' chevron Colour phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Infinite Marquee

Free Looping

A row that scrolls forever without a seam. Use it for logos, images or short lines of text.

4 designs: Logos, Text, Images, Mixed. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 32

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
  • Seconds per loop Slider, 5–120s phone & desktop
  • Direction Right to left · Left to right
  • Gap between items Slider, 8–160px phone & desktop
  • Image height Slider, 12–140px phone & desktop
  • Pause on hover On / off
Item style
  • Item opacity Slider, 0.1–1 phone & desktop

Content

Heading
  • Heading Text
  • Intro text Text, several lines
Items
  • Items A list of items (up to 40): Text, Image, Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • 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
Item style
  • Item text font Google Font and weight phone & desktop
  • Item text size Slider, 10–96px phone & desktop
  • Item text color Colour phone & desktop
  • Item text line height Slider, 0.9–2.4 phone & desktop
  • Item text letter spacing Slider, -3–8px phone & desktop
  • Fade edge color Colour phone & desktop

Scroll Controlled Story

Premium Scroll

The page holds still while scrolling turns the chapters: each with its own picture, heading and text.

4 designs: Picture beside, Full picture, Stacking cards, With a progress rail. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 53

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
  • Scrolling per chapter Slider, 40–200% phone & desktop A share of the screen height. More is slower.
  • Space for a fixed header Slider, 0–200px phone & desktop
  • Show the progress dots On / off
  • Show the chapter number On / off
  • Darken the picture Slider, 0–90% phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Chapters
  • Chapters A list of chapters (up to 10): Small label, Heading, Text, Picture

Style

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

Advance Slideshow

Free Carousel

Full-width slides that change on their own. Set how long each one holds.

4 designs: Fade, Slide, Kenburns, Cards. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 31

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

Layout

Section
  • Max width Slider, 480–1800px phone & desktop
Layout
  • Height Slider, 220–900px phone & desktop
  • Slides per view Slider, 1–4 phone & desktop Phones always show one at a time.
Controls
  • Controls None · Arrows · Dots · Arrows and dots
  • Play automatically On / off Pauses while a shopper hovers or uses the controls. Off for shoppers who ask for reduced motion.
  • Seconds per slide Slider, 2–20s
Style
  • Overlay darkness Slider, 0–0.9 phone & desktop
Slide button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Slides
  • Slides A list of slides (up to 10): Image, Heading, Body, Link, Link label

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Controls
  • Controls color Colour phone & desktop
Style
  • Overlay color Colour phone & desktop
Slide 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
Slide 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
  • Slide button alignment Design default · Left · Center · Right phone & desktop

Swipe Deck

Free Carousel

A pile of cards: swipe one right for yes or left for no, and see what you said yes to at the end.

4 designs: Pile, Fanned, Prints, One at a time. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 61

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

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Width of a card Slider, 220–520px phone & desktop
  • Height of a card Slider, 280–720px phone & desktop
  • Padding round the words Slider, 0–40px 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
Cards
  • Cards A list of cards (up to 20): Picture, Title, A few words (optional), Link words (optional), Link
Buttons
  • Word for yes Text
  • Word for no Text
  • Name of the button that brings one back Text
At the end
  • Heading Text
  • Text Text, several lines
  • If nothing was liked Text
  • Button to start over Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Yes Colour phone & desktop
  • No Colour phone & desktop
  • Link color Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
Title style
  • Title font Google Font and weight phone & desktop
  • Title size Slider, 9–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
A few words style
  • A few words font Google Font and weight phone & desktop
  • A few words size Slider, 9–28px phone & desktop
  • A few words color Colour phone & desktop
  • A few words line height Slider, 0.8–2.4 phone & desktop
  • A few words letter spacing Slider, -8–12px phone & desktop
  • A few words alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop
Button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Button alignment Design default · Left · Center · Right phone & desktop

Ticker Strip

Free Looping

A single line of short updates running past. Type them in, or feed it from the Panely app.

4 designs: Ticker, Static, Stacked, Badge. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 23

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–60px phone & desktop
  • Padding bottom Slider, 0–60px phone & desktop
  • Max width Slider, 480–1800px phone & desktop
Feed
  • Use a cached feed instead of the entries above On / off
Layout
  • Seconds per loop Slider, 5–90s phone & desktop
  • Gap between entries Slider, 8–140px phone & desktop
  • Pause on hover On / off

Content

Entries
  • Entries A list of entries (up to 30): Text, Marker, Link
Feed
  • Feed key Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Entry style
  • Entry font Google Font and weight phone & desktop
  • Entry size Slider, 10–96px phone & desktop
  • Entry color Colour phone & desktop
  • Entry line height Slider, 0.9–2.4 phone & desktop
  • Entry letter spacing Slider, -3–8px phone & desktop
  • Marker font Google Font and weight phone & desktop
  • Marker size Slider, 10–96px phone & desktop
  • Marker color Colour phone & desktop
  • Marker line height Slider, 0.9–2.4 phone & desktop
  • Marker letter spacing Slider, -3–8px phone & desktop
  • Marker background Colour phone & desktop
  • Separator color Colour phone & desktop

Vertical Marquee

Free Looping

Columns of cards run up or down without end, behind a window.

4 designs: Cards, Plain, Quotes, Big words. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 49

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

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 320–1600px phone & desktop
Layout
  • Columns Slider, 1–4 The items are dealt out across them in turn. A phone shows the first two.
  • Height of the window Slider, 240–900px phone & desktop
  • Gap Slider, 0–60px phone & desktop
  • Padding inside a card Slider, 0–56px phone & desktop
Motion
  • Seconds for one pass Slider, 4–120s phone & desktop
  • Stop while it is pointed at On / off And while a shopper has focus in it.
  • They run Up and down, in turn · Up · Down

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
Items
  • Items A list of items (up to 40): Words, Who said it (optional), Picture (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Card style
  • Card background Colour phone & desktop
  • Accent color Colour phone & desktop
  • Corner radius Slider, 0–40px phone & desktop
Words style
  • Words font Google Font and weight phone & desktop
  • Words size Slider, 9–96px phone & desktop
  • Words color Colour phone & desktop
  • Words line height Slider, 0.8–2.4 phone & desktop
  • Words letter spacing Slider, -8–12px phone & desktop
  • Words alignment Design default · Left · Center · Right phone & desktop
Who said it style
  • Who said it font Google Font and weight phone & desktop
  • Who said it size Slider, 9–28px phone & desktop
  • Who said it color Colour phone & desktop
  • Who said it line height Slider, 0.8–2.4 phone & desktop
  • Who said it letter spacing Slider, -8–12px phone & desktop
  • Who said it alignment Design default · Left · Center · Right phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

Wave Marquee

Free Looping

Words or pictures run past on a wave, each rising and falling as it goes.

4 designs: Wave, Wave, leaning with the slope, Two waves, opposite ways, Big words. 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, 320–1600px phone & desktop
Motion
  • Seconds for one pass Slider, 4–120s phone & desktop
  • Stop while it is pointed at On / off And while a shopper has focus in it.
Layout
  • Waves along the strip Slider, 1–6 phone & desktop How many crests there are in one pass of the things.
  • Height of the wave Slider, 0–120px phone & desktop
  • Room for each thing Slider, 80–420px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro Text, several lines
On the wave
  • Things on the wave A list of things (up to 24): Words, Picture (optional)

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Wave style
  • Behind each thing Colour phone & desktop
  • Corner radius Slider, 0–999px phone & desktop
Words style
  • Words font Google Font and weight phone & desktop
  • Words size Slider, 9–120px phone & desktop
  • Words color Colour phone & desktop
  • Words line height Slider, 0.8–2.4 phone & desktop
  • Words letter spacing Slider, -8–12px phone & desktop
Kicker style
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 9–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.8–2.4 phone & desktop
  • Kicker letter spacing Slider, -8–12px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
Heading style
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 9–120px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.8–2.4 phone & desktop
  • Heading letter spacing Slider, -8–12px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
Intro style
  • Intro font Google Font and weight phone & desktop
  • Intro size Slider, 9–40px phone & desktop
  • Intro color Colour phone & desktop
  • Intro line height Slider, 0.8–2.4 phone & desktop
  • Intro letter spacing Slider, -8–12px phone & desktop
  • Intro alignment Design default · Left · Center · Right phone & desktop

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 motion & carousel sections

How do I add a scrolling logo bar to Shopify?

Add the Infinite Marquee section in Panely, choose the Logos design and add your logo images, each with an optional link. It loops without a visible seam, in whichever direction you choose.

Can I control slideshow timing?

Yes. Set how many seconds each slide holds, choose the transition, and add arrows, dots or both so shoppers can move between slides themselves.

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.