Floating Widget
Complete guide to creating and configuring the ReelPlus Floating Widget — a persistent video button that appears across your Shopify store
Floating Widget
The Floating Widget places a persistent, always-visible button on your storefront that customers can click to open a shoppable video experience. Unlike other widget types that occupy a section of your page layout, the floating widget hovers above your content and follows the customer as they scroll.
What Is a Floating Widget?
A floating widget is a small, interactive button that stays fixed in a corner of the browser window regardless of scrolling. When clicked, it opens a video modal — a full-screen or partial-screen video player with product cards, add-to-cart functionality, and navigation between multiple videos.
This approach provides a non-intrusive way to offer video content on every page of your store without modifying your existing layout.
Best Use Cases
| Use Case | Why It Works |
|---|---|
| Sitewide engagement | Available on every page, catching customers wherever they browse |
| Always-visible CTA | Persistent presence reminds customers that video content is available |
| Stores with limited layout space | No section or block required; floats above existing content |
| Product demos on demand | Customers can access product videos from any page, including checkout-adjacent pages |
| Mobile engagement | A thumb-friendly button makes it easy for mobile customers to discover video content |
| Promotional campaigns | Highlight a sale, launch, or event with an attention-grabbing floating button |
How It Differs from Other Widgets
The floating widget is not added as a Theme Section or Block. It is added as an App Embed in the Shopify Theme Editor. This is an important distinction because App Embeds apply globally across your entire store rather than on a specific page.
| Feature | Sections/Blocks (Carousel, Story, Product Page) | App Embed (Floating) |
|---|---|---|
| Where it appears | Specific page and position | Every page (global) |
| How to add | "Add Section" or "Add Block" | "App Embeds" toggle |
| Takes layout space | Yes | No (floats above content) |
| Position control | Determined by section order | Fixed position (corner of screen) |
| Can be page-specific | Yes, by placement | Yes, via show/hide rules |
Creating a Floating 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 Floating as the widget type.
Name Your Widget
Give your widget a descriptive name (e.g., "Floating Video Button" or "Sitewide Video CTA").
Assign Videos
Select one or more videos from your library. If you assign multiple videos, the customer will be able to navigate between them inside the modal that opens on click.
Configure Settings
Customize the button appearance, position, and behavior using the options below.
Enable in Theme Editor
Unlike other widgets, you must enable the floating widget as an App Embed:
- Open the Shopify Theme Editor (Online Store > Themes > Customize)
- Click the App Embeds icon in the left sidebar
- Find ReelPlus Floating Widget and toggle it on
- Click Save
Configuration Options
Position on Screen
Choose where the floating button appears:
| Position | Description | Recommended For |
|---|---|---|
| Bottom-Right | Most common position; avoids conflicting with chat widgets on the left | Default choice for most stores |
| Bottom-Left | Good alternative if you have another floating element on the right | Stores with right-side chat widgets |
| Top-Right | Less common; visible but less accessible on mobile | Specific design requirements |
| Top-Left | Least conventional position | Unique layouts |
Bottom-Right is the recommended default. It is the most expected position for floating action buttons and keeps the button within easy thumb reach on mobile devices.
Button Style and Text
| Setting | Description |
|---|---|
| Button Shape | Circle (icon only) or Pill (icon + text) |
| Button Color | Background color of the floating button |
| Icon | Play icon, video camera icon, or custom icon |
| Button Text | Text displayed next to the icon (pill shape only), e.g., "Watch Videos" |
| Text Color | Color of the button text |
| Button Size | Small, Medium, or Large |
| Shadow | Drop shadow intensity (none, subtle, prominent) |
| Thumbnail Preview | Optionally show a small video thumbnail as the button background |
Click Behavior
When a customer clicks the floating button:
| Behavior | Description |
|---|---|
| Open Video Modal | Opens a full-screen or partial-screen video player (default and recommended) |
| Open First Video | Starts playing the first assigned video immediately |
| Open Video Playlist | Opens a browsable list of all assigned videos |
The video modal includes:
- Full video playback with play/pause controls
- Product card overlays for tagged products
- Add-to-cart functionality
- Navigation between multiple videos (if assigned)
- Close button to return to the store
Show/Hide Rules
Control when and where the floating button appears:
| Rule | Description |
|---|---|
| Show on All Pages | Button appears everywhere on your store |
| Hide on Specific Pages | Exclude specific page types (e.g., hide on cart page, checkout) |
| Show Only on Specific Pages | Limit to homepage, product pages, or collection pages |
| Scroll Trigger | Button appears only after the customer scrolls a certain percentage of the page |
| Delay Trigger | Button appears after a set number of seconds on the page |
| Exit Intent | Button becomes more prominent (animation, size change) when the customer is about to leave |
Using a scroll or delay trigger can reduce the initial visual noise on your page and reveal the floating button at a more natural moment in the browsing experience.
Animation Options
| Animation | Description |
|---|---|
| Pulse | Gentle pulsing effect to draw attention |
| Bounce | Subtle bounce animation on first appearance |
| Fade In | Button fades in smoothly |
| Slide In | Button slides in from the edge of the screen |
| None | Button appears with no animation |
You can also configure:
| Setting | Description |
|---|---|
| Animation on Load | Play animation when the button first appears |
| Animation on Idle | Repeat animation periodically to re-attract attention |
| Idle Interval | How often the idle animation repeats (e.g., every 10 seconds) |
Device Targeting
The floating widget can be configured independently for desktop and mobile:
| Setting | Description |
|---|---|
| Show on Desktop | Toggle visibility on desktop browsers |
| Show on Mobile | Toggle visibility on mobile browsers |
| Desktop Position | Can differ from mobile position |
| Mobile Position | Optimize for thumb accessibility |
| Mobile Button Size | Often set larger than desktop for easier tapping |
On mobile devices, make sure the floating button does not overlap with other fixed elements like cookie banners, chat widgets, or Shopify's native footer navigation. Test on a real device to verify placement.
Avoiding Conflicts with Other Floating Elements
Many stores have multiple floating elements (chat widgets, cookie consent banners, back-to-top buttons). To avoid overlap:
- Check existing floating elements — note their positions before placing the ReelPlus button
- Use opposite corners — if your chat widget is bottom-right, place the video button bottom-left (or vice versa)
- Adjust vertical offset — increase the bottom margin to stack above another floating element
- Test on mobile — screen space is limited; conflicts are more likely on small screens
- Use show/hide rules — hide the floating button on pages where conflicts are unavoidable
Performance Considerations
The floating widget is designed to be lightweight:
- Minimal initial load — only the button and a small script are loaded initially
- Lazy modal loading — the full video player and assets are only loaded when the customer clicks the button
- No layout impact — since it floats above content, there is no layout shift or reflow
- Cached assets — after the first click, subsequent opens are instant
The floating widget has the smallest performance footprint of all widget types because it defers nearly all asset loading until the customer interacts with it.
Design Best Practices
- Match your brand colors — the button should feel like a natural part of your store, not an intrusive third-party element
- Use clear iconography — a play button icon immediately communicates "video content"
- Keep text short — if using a pill-shaped button, limit text to 2-3 words ("Watch Now", "See Videos")
- Subtle animation — a gentle pulse or bounce is effective; avoid overly aggressive animations that annoy customers
- Right-size the button — large enough to be noticeable and tappable, small enough not to obstruct content
- Consistent with store aesthetic — if your store is minimal, use a minimal button style; if bold and colorful, match that energy
Troubleshooting
| Issue | Solution |
|---|---|
| Floating button not showing | Verify the App Embed is toggled on in Theme Editor > App Embeds |
| Button overlaps with chat widget | Adjust position or vertical offset; use opposite corner |
| Button appears on cart/checkout page | Configure show/hide rules to exclude those pages |
| Modal not opening on click | Ensure videos are assigned to the widget and fully processed |
| Button too small on mobile | Increase button size in mobile-specific settings |
| Animation is distracting | Switch to "Fade In" or "None" for a subtler effect |
| Button shows on desktop but not mobile | Check device targeting settings; ensure mobile toggle is on |
Next Steps
- Enable the floating widget in your Theme Editor's App Embeds section
- Explore the Carousel Widget for an in-page video experience
- Combine floating with Story Widget for maximum engagement
- Track clicks and conversions to measure floating widget effectiveness