Story Widget

Complete guide to creating and configuring the ReelPlus Story Widget — Instagram-style shoppable video stories for your Shopify store

The Story Widget brings the familiar Instagram Stories experience to your Shopify store. Circular video thumbnails invite customers to tap and watch full-screen, sequential video content with shoppable product overlays.

A story widget displays a row of circular (or rounded) thumbnails at the top of a page. When a customer taps a thumbnail, a full-screen video player opens and auto-progresses through the remaining stories in sequence. Each story can feature tagged products that customers can browse and add to cart without leaving the experience.

This format is immediately recognizable to social media users and has some of the highest engagement rates among all widget types.

Best Use Cases

Use Case	Why It Works
Homepage — top of page	Mirrors the familiar social media position; customers instinctively engage
New arrivals showcase	Highlight recent products with short, exciting video introductions
Behind-the-scenes content	Build brand connection with founder stories, production process, or team content
Quick tips and tutorials	Deliver bite-sized educational content (how to use, how to style)
Customer testimonials	Feature UGC (user-generated content) in a native-feeling format
Flash sales and promotions	Create urgency with time-limited story content

Navigate to Widgets

In the ReelPlus dashboard, go to the Widgets section from the main navigation.

Click Create Widget and select Story as the widget type.

Give your widget a descriptive name (e.g., "Homepage Stories" or "New Arrivals Stories"). This name is for your reference only.

Assign Videos

Select videos from your library. For stories, short videos (15-60 seconds) work best. You can:

Choose individual videos
Reorder the story sequence via drag and drop
Remove or replace videos at any time

Configure Settings

Customize the story appearance and behavior using the options described below.

Save and Add to Theme

Save your widget, then use the Theme Editor to place it on your storefront.

Configuration Options

Story Thumbnail Style

The thumbnail style defines how story circles appear on the page before customers tap them:

Style	Description	Best For
Circular	Classic round thumbnails with an optional colored ring border	Social media feel, homepage placement
Rounded Rectangle	Softly rounded rectangular thumbnails	A more editorial, premium look

Additional thumbnail settings:

Setting	Description
Thumbnail Size	Control the diameter/size of story thumbnails
Ring Color	Color of the border ring around unseen stories
Seen State	Muted ring or grayed out thumbnail for stories already viewed
Label	Optional text label below each thumbnail (e.g., video title or custom text)
Spacing	Gap between individual story thumbnails

Auto-Progression

Setting	Description	Recommended
Auto-Progress	Automatically advance to the next story when the current one finishes	On
Loop All Stories	After the last story, loop back to the first	Off (creates a natural endpoint)

When auto-progression is enabled, customers get a hands-free viewing experience. They can still manually swipe to skip forward or backward at any time.

Duration Per Story

Setting	Description
Duration Mode	Video length (play the full video) or Fixed duration (cut after X seconds)
Fixed Duration	If using fixed duration, set the number of seconds (e.g., 15s, 30s)
Progress Bar	Show a progress bar at the top indicating time remaining in the current story

For the best engagement, keep individual stories under 30 seconds. Customers are more likely to watch multiple short stories than a single long one.

Setting	Description
Swipe Gestures	Enable left/right swipe to navigate between stories
Tap Navigation	Tap left side to go back, right side to go forward
Close Gesture	Swipe down to close the story viewer

All navigation gestures are enabled by default and follow the conventions established by popular social media apps, making the experience intuitive.

Product Overlay

Setting	Description
Show Product Card	Display tagged product information during story playback
Card Style	Minimal (name + price), Standard (image + name + price), or Detailed (includes description)
Add to Cart	Show an add-to-cart button on the product card
Card Position	Bottom of screen (default) or floating
Swipe Up to Shop	Enable "swipe up" gesture to view full product details

Full-Screen Experience

The story viewer opens in full-screen mode by default. Additional options include:

Setting	Description
Background	Blurred video backdrop or solid color behind the story
Close Button	Position and style of the close/exit button
Share Button	Optionally allow customers to share the story link
Mute Toggle	Show a mute/unmute button for audio control

Story vs. Carousel: When to Use Which

Criteria	Story	Carousel
Content format	Short, sequential, one-at-a-time	Browse and select, all visible
Viewer engagement	Higher engagement, more immersive	More browsing, less commitment
Video length	Best for 15-60 second videos	Works with any length
Mobile experience	Exceptional (designed for mobile)	Good (optimized but not mobile-first)
Desktop experience	Good (centered full-screen viewer)	Excellent (takes advantage of screen width)
Number of videos	Best with 3-8 stories	Works well with 4-20+ videos
Customer intent	Discovery and engagement	Browsing and comparison
Page position	Top of page (above the fold)	Anywhere on the page

Many successful stores use both — stories at the top of the homepage for engagement, and a carousel further down for product discovery.

Mobile-First Design

The Story Widget is built with a mobile-first philosophy:

Mobile Experience

Full-screen portrait video playback optimized for vertical screens
Tap and swipe gestures match social media conventions
Progress bars at the top show story advancement
Product cards are sized and positioned for thumb-friendly interaction
Lightweight loading to minimize data usage on cellular connections

Desktop Experience

Stories open in a centered modal with blurred or dark background
Keyboard navigation supported (left/right arrows, Escape to close)
Mouse click on left/right edges for navigation
Larger product cards take advantage of screen space

Tablet Experience

Adapts between mobile and desktop layouts based on orientation
Touch gestures fully supported
Balanced thumbnail sizes

Designing Effective Stories

Content Tips

Hook in the first 3 seconds — customers decide to keep watching almost immediately
Keep it short — 15-30 seconds per story is the sweet spot
One product per story — focus attention on a single item
Use vertical video — 9:16 aspect ratio fills the screen and looks professional
Add captions — many customers watch without sound initially
Create a narrative arc — sequence your stories to tell a progression (e.g., problem, solution, result)

Visual Tips

Use high-contrast thumbnails — they need to stand out on any background
Show faces when possible — thumbnails with faces get more taps
Keep text minimal on thumbnails — the image should do the work
Use consistent branding — same color ring, similar thumbnail style across stories

Troubleshooting

Issue	Solution
Story thumbnails look blurry	Upload higher resolution videos; check thumbnail source settings
Stories not auto-progressing	Verify auto-progression is enabled in widget settings
Product card not showing	Ensure products are tagged to the video in the ReelPlus dashboard
Stories look wrong on desktop	Check desktop-specific settings; consider using a centered layout
Ring color not matching brand	Update the ring color in thumbnail style settings
Too much space between stories	Adjust the spacing setting in thumbnail configuration
Customer cannot close story	Verify close button is enabled; check for CSS conflicts with theme

Next Steps

Create your first widget to start building stories
Add stories to your theme using the Theme Editor
Explore the Carousel Widget for a complementary browsing experience
Track engagement to measure story performance