Slideshow: Pagination

Show a full-width image or video slideshow with named, clickable slide labels and progress lines along the bottom.

Pro feature. This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. Learn about plans and License keys

---

The Slideshow: Pagination section is a slideshow where each slide has its own label (for example "1. New arrivals", "2. Best sellers") shown along the bottom of the slideshow. Shoppers can click a label to jump to that slide, and a line under the active label fills up to show progress. Each slide can use an image or a video and has its own text and button.

1. Our guide to set up a Slideshow: Pagination section:

Steps:

• In the theme editor, click Add section.

• Locate Slideshow: Pagination.

• Click Save.

2. Section settings

• Layout: Full width / Compact. Compact keeps the slideshow within the page width.

• Auto-rotate slides: Moves to the next slide automatically while the slideshow is on screen.

• Change slides every: Time between slides, 3–9 seconds. Shown when Auto-rotate slides is on.

• Pagination

  • Number the labels: Adds a number in front of each label (1., 2., 3.…).

  • Label alignment: Text alignment of each label above its line: Left / Center.

  • Pagination color: Color of the labels, lines and mobile arrows.

• Media

  • Desktop slide height: Adapt to first image / Small / Medium / Large / Custom.

  • Desktop custom height: Slide height on desktop, 250–850px. Shown when Desktop slide height is set to Custom.

  • Mobile slide height: 350px / 450px / 550px / 650px / 750px.

• Corner radius

  • Media: Rounds the corners of the slideshow, 0–40px.

• Accessibility

  • Slideshow description: Describes the slideshow for screen readers.

3. Slide block settings

Each Slide block is one slide and one label in the pagination. You can add up to 4 slides.

• Pagination label: The label shown for this slide in the pagination row.

• Media

  • Media type: Image / Video.

  • Image: The slide image. Shown when Media type is Image.

  • Mobile image: Optional image used on mobile. If empty, the main image is used.

  • Image focal point: Which part of the image stays visible when it's cropped: Center / Top / Bottom / Left / Right.

  • Video: The slide video, played muted and on loop. Shown when Media type is Video.

  • Mobile video: Optional video used on mobile. If empty, the main video is used.

  • Media link: Makes the whole slide clickable. Only used when the slide has no button label.

  • Media overlay opacity: Darkens the image or video so text stays readable, 0–100%.

• Content

  • Caption: Small text shown above the heading.

  • Heading: The slide's main title.

  • Heading size: 15–80px.

  • Description: Text shown below the heading.

  • Content position: Where the text sits on desktop: Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right.

  • Content alignment: Text alignment on desktop: Left / Center / Right.

• Button

  • Button label: Text on the button. Leave empty to hide the button.

  • Button link: Where the button goes.

  • Use outline button style: Shows an outline button instead of a solid one.

• Colors

  • Heading: Color of the heading.

  • Text: Color of the caption and description.

  • Button label: Text color of the solid button.

  • Button background: Background color of the solid button.

• Mobile

  • Mobile content position: Top / Middle / Bottom.

  • Mobile content alignment: Left / Center / Right.

4. Tips

• Keep pagination labels short (one to three words) so they fit side by side on desktop.

• On mobile, only the active slide's label is shown, with previous and next arrows beside it.

• Use landscape images at least 2000px wide for full-width slides, and add a portrait Mobile image for better cropping on phones.

• Videos only play while the slideshow is on screen. Keep them short and compressed for faster loading.