FloatVid User Guide

What is FloatVid?

FloatVid is a powerful Shopify app that adds engaging floating video bubbles to your store. These eye-catching video widgets appear in the corner of your pages and can dramatically increase customer engagement and conversions.

Key Benefits for Store Owners

• Boost Conversions - Eye-catching video content captures attention and drives action

• Increase Engagement - Interactive video elements keep customers on your site longer boostiong SEO

• Professional Appearance - Modern, responsive design works perfectly on all devices

• Easy Setup - No coding required

• Multiple Functions - Four different video types for various marketing goals

Four Powerful Video Types

1. Redirect Videos - Drive traffic to specific pages or external links

2. Form Videos - Capture email signups and newsletter subscriptions

3. Custom Product Videos - Showcase specific products with purchase options

4. Product Page Videos - Enhance existing product pages with video content

Installation Steps

Step 1: Install FloatVid

1. Install the app from the Shopify App Store

2. Accept permissions when prompted

3. You'll be redirected to your Shopify admin automatically

Step 2: Enable FloatVid Globally

Before adding individual video blocks, you must enable FloatVid globally:

1. While on Shopify dashboard go to: Online Store → Themes

2. Click "Customize" on your active theme

3. Look for "App embeds" in the left sidebar 

4. Find "Enable FloatVid" in the list

5. Toggle it ON to activate the app

6. Click "Save" to confirm

Important: This step is required for FloatVid to work properly on your store.

Step 3: Add Video Sections

Now you can add FloatVid sections to any page:

1. Navigate to the page where you want to add a video (homepage, product page, etc.)

2. Click "Add section" in the theme customizer

3. Look for "Apps" category in the section picker

4. Choose your FloatVid block type:

   • FloatVid - Redirect

   • FloatVid - Form

   • FloatVid - Custom

   • FloatVid - Product

Block-by-Block Setup

FloatVid - Redirect Block

Perfect for: Driving traffic to sales pages, promotional content, or external links

Setup Steps:

1. Add the block to your desired page

2. Configure Video Settings:

   • Video URL: Direct link to your MP4 video file (I recommend hosting the video in Shopify itself)

   • Thumbnail Image: Static image shown before video loads

   • Redirect URL: Where customers go when they click the video

3. Position & Appearance:

   • Distance from Bottom: How far from bottom of screen (default: 80px)

   • Position on Left Side: Check to position on left instead of right

   • Re-show Button Color: Color of button that appears after closing

Best Practices:

• Use short videos (15-30 seconds) for best performance

• Include a clear call-to-action in your video

• Test the redirect URL to ensure it works correctly

• I recommend compressing the video file, HandBrake is a good open source video compressing software, and it's free, a good target size is less than 3MB.

FloatVid - Form Block

Perfect for: Newsletter signups, email capture, lead generation

Setup Steps:

1. Add the block to your page

2. Configure Video Settings:

   • Video URL: Your promotional/signup video

   • Form Image: Optional image to display alongside form

3. Customize Form Content:

   • Form Title: Main headline (e.g., "Join Our Newsletter")

   • Form Description: Compelling description of benefits

   • Email Placeholder: Text shown in email field

   • Submit Button Text: Call-to-action text

4. Style the Form:

   • Form Title Font & Size: Typography for headline

   • Form Text Font & Size: Typography for description

   • Colors: Title, text, background, button colors

   • Customer Tag: Tag added to contact submissions. Can be use to trigger flows.

Form Integration:

• Form submissions go directly to your Shopify customer list

• View submissions in: Shopify Dashboard → Customers

• Customers are automatically tagged with your chosen tag

FloatVid - Custom Block

Perfect for: Showcasing specific products with purchase options

Setup Steps:

1. Add the block to your page

2. Select Product:

   • Product to Show: Choose from your store's products

3. Configure Video:

   • Video URL: Product demonstration or promotional video

4. Customize Typography:

   • Headline Font & Size: Product title styling

   • Body Text Font & Size: Description text styling

   • Button Text Size: Purchase button styling

   • Price Text Size: Price display styling

5. Style Colors:

   • Modal Background: Background color of popup

   • Text Colors: Headline, description, and price colors

   • Button Colors: Background, text, border, and success colors

6. Button Settings:

   • Button Shadow: Enable/disable drop shadow

   • Border Radius: Button corner roundness

Features:

• Displays product images in scrollable gallery

• Shows current price and compare-at price

• Includes Add to Cart and Buy Now buttons

Mobile-responsive design with image zoom 

FloatVid - Product Block

Perfect for: Enhancing existing product pages with video content

Setup Steps:

1. Add the block to product pages only

2. Configure Video:

   • Video URL: Product-specific video content

3. Customize Typography:

   • Headline Font: For product titles

   • Body Text Font: For descriptions

   • Button Fonts: Separate fonts for different button types

   • Add to Cart Font: Specific styling for add to cart buttons

   • Buy Now Font: Specific styling for buy now buttons

   • Price Font: Price display styling

4. Adjust Text Sizes:

   • Individual size controls for headlines, text, buttons, and prices

5. Set Colors:

   • Modal Background: Popup background color

Special Features:

• Automatically displays current product information

• Inherits product images, pricing, and styling

• Maintains existing product functionality

Advanced Tips

Video Optimization

File Format & Size:

• Use MP4 format for best compatibility

• Keep file size under 2MB for fast loading

• Optimize compression while maintaining quality

• Host videos on reliable CDN (like Shopify)

Video Content Tips:

• 15-30 seconds ideal for attention span

• Start with hook in first 3 seconds

• Clear call-to-action at the end

• High contrast visuals work better in small format

Mobile Considerations

Responsive Design:

• FloatVid automatically adapts to mobile screens

• Video bubbles resize appropriately for smaller devices

• Touch-friendly controls for mobile users

• Test on actual devices not just browser resize

• Consider mobile data usage with video file sizes

Best Practices

Positioning:

• Avoid covering important content like navigation or checkout buttons

• Consider different screen sizes when setting distance from bottom

• Test with sticky headers/footers that might interfere

User Experience:

• Match video content to page context for relevance

• A/B test different positions and content

• Monitor analytics to measure effectiveness

Content Strategy:

• Product demos work well for Custom and Product blocks

• Behind-the-scenes content for brand building

• Customer testimonials for social proof

• Limited-time offers for urgency with Redirect blocks

Troubleshooting

Common Issues & Solutions

Video Not Playing

Problem: Video bubble appears but video doesn't play Solutions:

• Check video URL is direct link to MP4 file

• Verify video file isn't corrupted

• Test video URL in browser directly

• Ensure video hosting allows embedding

App Not Appearing

Problem: Can't find FloatVid in Add Section menu Solutions:

• Confirm you've enabled "Enable FloatVid" in App embeds

• Check you're looking in the "Apps" category of sections

• Verify app is properly installed and permissions granted

• Try refreshing theme customizer

• You may be trying to add more than one video in the same page

Positioning Issues

Problem: Video appears in wrong location or covers important content Solutions:

• Adjust "Distance from Bottom" setting

• Toggle "Position on Left Side" option

• Check for conflicts with sticky elements

• Test on different screen sizes

Mobile Display Problems

Problem: Video doesn't display correctly on mobile Solutions:

• Clear mobile browser cache

• Test on actual device, not just browser resize

• Check video file size isn't too large for mobile

• Verify mobile data settings allow video

Form Submissions Not Working

Problem: Newsletter form doesn't capture emails Solutions:

• Check customer tag is set correctly

• Verify form fields are properly configured

• Test with different email addresses

• Check Shopify contact settings

Performance Issues

Problem: Site loading slowly after adding FloatVid Solutions:

• Optimize video file sizes

• Check video hosting service speed

• Consider using thumbnail images

FloatVid User Manual v1.0 - Created by AGX Apps