The Swipeable Bubble Feed adds a floating video bubble that shoppers can tap to swipe through videos on any page.
Create the Widget
Go to the Website tab.
Click Create widget.
Select Swipeable Bubble Feed.
Design Settings
After creating your Swipeable Bubble Feed, go to the Design tab to customize how it looks and behaves.
1. Layout
Controls the bubble’s appearance and placement.
Shape: Circle or Rectangle
Size: S, M, or L
Position: Left or Right
Bottom margin: Space from the bottom of the page
Side margin: Space from the side edge
Keep settings on mobile: Applies the same settings on mobile
2) Appearance
Show border: Adds/removes a border
Theme color: Sets the primary widget color
3) Call-to-Action Text
Enable to show text next to the bubble to encourage clicks.
4) Video Overlay
Header text: Optional text displayed on the video
Header position: Top, Center, or Bottom
5) Behavior
Show notification badge: Shows a badge on the bubble
Hide close button: Removes the close (X)
Delay (seconds): Wait time before showing the bubble
Stop preview loop: Stops the preview from looping
6) Slide Animation
Enable/disable animation and choose where it slides from: Bottom or Side.
Display Rules
Control where and to whom the widget appears.
Device Targeting
Choose: All, Mobile, or Desktop
Page Targeting
Add rules to show the widget only on specific pages.
Triggers
Exit intent only: Shows when users attempt to leave
Delay before showing: Shows after a set delay
Audience Targeting
Target Visitors or Users, then add show/hide rules and restrictions.
Video Feed Settings
Customize how videos behave inside the feed:
Make videos shoppable
Auto play
View feed in fullscreen
Auto scroll to next video
Auto-display video description
Display creator handle
Open link to creator's profile
Always start on mute
Enable video captions
Disable multi-product view
Hide wishlist
Player position (Left or Right)
Product & Shopping Settings
Sale Products
Only show sale products
Multi-Product Page
Show title
Show divider
Customize CTA text
Product Card
Feed Product Card settings
Mini CTA
In-Feed PDP
Description
Checkout & Shopping Bag
Sales Badge
Customize badge text
Text color
Background color
Border
Shipping
Enable or disable shipping information display.
Stock Display
Customize In stock color
Customize Out of stock color
Option to show out-of-stock on small product view
Recommended Products
Customize section title
Toggle product name
Toggle price
Available CSS Selectors
You can target specific parts of the Swipeable Bubble Feed using the predefined class names:
.tolstoy-bubble-content-container
Main bubble content container..tolstoy-bubble-preview-container
Wrapper for the preview and close button area..tolstoy-bubble-preview
Video preview area..tolstoy-bubble-video
The video element itself..tolstoy-bubble-header
Header text overlay on the video..tolstoy-bubble-text-container
Bubble text popup container..tolstoy-bubble-text
Inner bubble text styling..tolstoy-bubble-close-container
Close button wrapper..tolstoy-bubble-close-button
Close (X) button styling..tolstoy-bubble-notification-badge
Notification badge indicator.
When to Use Custom CSS
Use this section if you want to:
Adjust padding, margins, or spacing beyond the default settings
Override font sizes or styles
Add custom hover effects
Fully align the widget with your brand guidelines
Media (Project Sources)
The Media section controls which videos appear inside your Swipeable Bubble Feed and how they are organized.
Include Playlists
You can control which videos are displayed by adding playlists.
Click + Add playlist to include specific playlists in your widget.
You can also include Product tagged videos, which automatically pull videos tagged to products.
Only videos included here will appear in the feed.
Video Order
Choose how videos are displayed inside the feed:
Random order – Videos appear in a shuffled sequence.
Newest to oldest – Displays the most recently added videos first.
Oldest to newest – Displays videos starting from the earliest added.
Content Automation
This section allows you to automatically generate or include content based on rules.
New products
When enabled, Tolstoy will automatically generate lookbook videos for newly added products.Click Manage all automations to configure additional automation rules.
Settings - This is where you control how your gallery or videos behave.
Tracking
Google Analytics: Enter your Google Analytics ID (e.g., G-XXXXXXXXXX) to track video engagement and conversion data directly in your analytics dashboard.
Facebook Pixel: Input your Facebook Pixel ID to measure the effectiveness of your video content for social media advertising and retargeting.
Media Settings
Display Mode
Product Page Mode: Shows videos specifically tagged to the current product being viewed.
General Page Mode: Shows videos pulled from your selected playlists regardless of the specific product page
Video Recency: Filter which videos are shown based on when they were created, with options ranging from Last 7 days to All time.
Exclude Playlists: Videos from these playlists will not appear in the widget
Step on How to Publish your Spotlight
Click the Publish button
2. Copy the Publish ID
3. Click the Add Block button
4. Your Shopify theme will open with a Carousel block added. Paste the Publish IDinside it. Save your changes.
5. Click Done
‼️Important: Turn on the Tolstoy app in App Embeds so your images and videos show.
That's it. 🍻