Carousel Widget
Complete guide to creating and configuring the ReelPlus Carousel Widget — a horizontal scrolling video carousel for your Shopify store
Carousel Widget
The Carousel Widget displays your shoppable videos in a horizontal, scrollable strip that customers can browse by swiping or clicking navigation arrows. It is the most versatile widget type and works well on nearly any page of your store.
What Is a Carousel Widget?
A carousel widget presents multiple video thumbnails side by side in a single row. Customers can scroll through the videos and click any thumbnail to open a full-screen video player with product cards, add-to-cart buttons, and other interactive elements.
The carousel format is familiar to online shoppers and is effective at displaying a large number of videos without taking up excessive vertical space on the page.
Best Use Cases
| Use Case | Why It Works |
|---|---|
| Homepage hero section | Immediately captures attention with dynamic video content above the fold |
| Collection pages | Showcase products from a collection with video demonstrations |
| Landing pages | Support marketing campaigns with engaging video content |
| Below product recommendations | Cross-sell related products through video |
| Blog and content pages | Embed video carousels within editorial content |
Creating a Carousel Widget
Navigate to Widgets
In the ReelPlus dashboard, go to the Widgets section from the main navigation.
Create a New Widget
Click Create Widget and select Carousel as the widget type.
Name Your Widget
Give your widget a descriptive name (e.g., "Homepage Video Carousel" or "Summer Collection Videos"). This name is for your internal reference and is not shown to customers.
Assign Videos
Select videos from your library to include in the carousel. You can:
- Click to select individual videos
- Drag and drop to reorder the sequence
- Remove videos you no longer want included
Configure Settings
Adjust the carousel behavior and appearance using the configuration options described below.
Save and Add to Theme
Save your widget, then follow the Theme Editor guide to place it on your storefront.
Configuration Options
Autoplay Settings
| Setting | Description | Recommended |
|---|---|---|
| Enable Autoplay | Videos play automatically when the carousel is visible | On for homepages, off for product pages |
| Autoplay Delay | Time between automatic slide transitions (in seconds) | 3-5 seconds |
| Pause on Hover | Autoplay pauses when customer hovers over the carousel | On |
Autoplay applies to carousel scrolling, not video playback. Videos within the full-screen modal play when the customer clicks a thumbnail.
Navigation Arrows
| Setting | Description | Recommended |
|---|---|---|
| Show Arrows | Display left/right navigation arrows | On for desktop |
| Arrow Style | Choose between minimal, outlined, or filled arrows | Depends on your theme style |
| Arrow Position | Inside or outside the carousel container | Inside for full-width layouts |
| Hide on Mobile | Optionally hide arrows on mobile (customers swipe instead) | On |
Slide Count
Control how many video thumbnails are visible at once:
| Device | Default | Range |
|---|---|---|
| Desktop | 4 slides | 2 - 6 |
| Tablet | 3 slides | 1 - 4 |
| Mobile | 2 slides | 1 - 3 |
Showing too many slides on mobile makes thumbnails very small and hard to tap. We recommend 1-2 slides on mobile for the best touch experience.
Loop Behavior
| Setting | Description |
|---|---|
| Loop | When enabled, the carousel loops back to the first slide after reaching the last one |
| Rewind | Instead of looping seamlessly, the carousel rewinds to the beginning |
For carousels with many videos, loop provides the smoothest experience. For carousels with few videos (3-4), rewind can feel more natural.
Video Thumbnail Display
| Setting | Description |
|---|---|
| Thumbnail Source | Use auto-generated thumbnail or custom uploaded image |
| Aspect Ratio | Portrait (9:16), Square (1:1), or Landscape (16:9) |
| Border Radius | Control corner rounding (0px for sharp, up to 20px for rounded) |
| Hover Effect | Scale up, brightness change, or no effect on hover |
Badge Display
Badges are small labels that appear on video thumbnails to highlight key information:
| Badge Type | What It Shows | Example |
|---|---|---|
| Discount Badge | Active discount percentage or amount | "20% OFF" |
| Views Badge | Number of times the video has been viewed | "1.2K views" |
| Custom Badge | Your own text label | "New", "Best Seller", "Limited" |
You can enable multiple badges simultaneously. Badges are positioned at configurable corners of the thumbnail.
Product Card Overlay
When a customer opens a video from the carousel, a product card can appear within the video player:
| Setting | Description |
|---|---|
| Show Product Card | Toggle product information overlay on/off |
| Card Position | Bottom, side panel, or floating |
| Display Info | Product title, price, compare-at price, star rating |
| Add to Cart Button | Show an add-to-cart button directly in the video player |
| Card Timing | When the card appears (immediately, after X seconds, at tagged timestamp) |
Customization with ReelBuilder
For advanced visual customization, open the widget in ReelBuilder — the visual design editor built into ReelPlus.
With ReelBuilder, you can customize:
- Heading text and style above the carousel
- Thumbnail overlay elements (play icon, badges, gradient)
- Color scheme to match your store's brand
- Spacing and padding for pixel-perfect alignment
- Template selection to choose from pre-designed layouts
- Navigation style including dots, scrollbar, or fraction indicators
ReelBuilder provides a live preview so you can see exactly how your carousel will look before publishing.
Responsive Behavior
The carousel widget is fully responsive and adapts to all screen sizes:
Desktop (1024px and above)
- Full navigation arrows visible
- Multiple thumbnails per row (configurable)
- Hover effects active
- Larger thumbnail sizes for maximum visual impact
Tablet (768px - 1023px)
- Reduced slide count
- Touch swipe enabled alongside arrows
- Slightly smaller thumbnails
Mobile (below 768px)
- Minimal slide count (1-2 recommended)
- Navigation arrows hidden (swipe-only by default)
- Optimized thumbnail sizes for fast loading
- Full-screen modal opens in portrait orientation
Performance Tips
To ensure your carousel loads quickly and does not impact page speed:
- Optimize video thumbnails — ReelPlus automatically generates optimized thumbnails, but custom thumbnails should be under 200KB
- Limit visible slides — fewer visible slides means fewer images loaded initially
- Use lazy loading — ReelPlus loads off-screen thumbnails as the customer scrolls (enabled by default)
- Keep video count reasonable — 6-12 videos per carousel is the sweet spot. More than 20 can impact scroll performance
- Enable compression — make sure your videos are using the compressed version (configured in video settings)
ReelPlus uses intelligent asset loading. Carousel JavaScript and CSS are only loaded on pages where a carousel widget is present, so there is zero impact on pages without widgets.
Examples of Effective Carousel Setups
Homepage Feature Carousel
- Position: Top of homepage, below hero banner
- Videos: 6-8 curated product showcase videos
- Autoplay: On, 4 second delay
- Slides visible: 4 (desktop), 2 (mobile)
- Badges: Discount badge enabled
- Product cards: Enabled with add-to-cart button
Collection Page Carousel
- Position: Top of collection page, above product grid
- Videos: All videos tagged with products from that collection
- Autoplay: Off (customers browse intentionally)
- Slides visible: 3 (desktop), 1 (mobile)
- Badges: Views count enabled
- Product cards: Enabled with product title and price
Minimal Blog Carousel
- Position: Embedded within a blog post or content page
- Videos: 3-4 tutorial or how-to videos
- Autoplay: Off
- Slides visible: 3 (desktop), 1 (mobile)
- Badges: Off
- Product cards: Optional, minimalist display
Troubleshooting
| Issue | Solution |
|---|---|
| Carousel not scrolling | Check that you have more videos than the visible slide count |
| Thumbnails look stretched | Verify your aspect ratio setting matches your video format |
| Arrows not showing | Arrows may be hidden on mobile by default; check desktop view |
| Videos not playing on click | Ensure videos are fully processed in the ReelPlus dashboard |
| Carousel loads slowly | Reduce visible slides and total video count; check image optimization |
| Layout breaks on mobile | Reduce mobile slide count to 1; check section padding settings |
Next Steps
- Customize your carousel with ReelBuilder for advanced design options
- Add the carousel to your theme using the Theme Editor
- Track performance to see how your carousel drives engagement