Start a project

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.

Install Panely free → See the demos

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.

Draggable Card Stack Advance Slideshow Infinite Marquee Ticker Strip Scroll-triggered gallery

Draggable Card Stack

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

Advance Slideshow

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

Infinite Marquee

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

Ticker Strip

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

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.

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… Interactive Before / after slider, Countdown timer, Accordion… 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…