Summary

READ IT

In today's fast-paced online world, capturing customer attention is crucial. Static images can only do so much. Videosbring products to life, showcase features, and engage viewers in a way that text simply can't. But what if you want viewers to have control? Shoppable videos with playback controls allow users to pause, rewind, and focus on specific details, enhancing the product experience.

While Shopify itself doesn't offer built-in functionality for shoppable content, fret not! This guide will explore two effective methods to achieve this goal and highlight some actionable steps for each.

Method 1: Adding Youtube Video to Shopify Product Page

Popular platforms like YouTube and Vimeo offer a treasure trove of features, including video hosting and embed codes. Here's how to use them to add shoppable videos to your Shopify store:

Step 1: Upload Your Video

  • Head to your chosen platform and create an account if you don't have one already.
Image from youtube showing how to upload videos to YouTube.
  • Once logged in, navigate to the upload section and select your video file.
Image of YouTube Platform
  • During upload, optimize your video title, description, and tags for better discoverability (especially relevant for YouTube).
Image of adding descriptions to Youtube videos

Step 2: Generate the Embed Code

  • Once uploaded, locate the "Share" or "Embed" option for your video.
Image showing how to find embed code

You'll be presented with an embed code snippet. This code embeds the video player with playback controls directly onto your Shopify page.

Adding Videos to Your Product Pages

Step 3: Integrate the Embed Code into Shopify

Login to your Shopify admin panel and navigate to "Themes" from the left-hand menu.

Image showing how to add video code to shopify theme
  • Select "Actions" beside your active theme and choose "Edit code."
Image showing how to customize shopify theme
  • In the code editor, locate the product template file where you want to display the video (usually "custom HTML" or "embed code").
Image showing shopify Custom HTML.
  • Find the appropriate section within the template (often the product description area) and paste the embed code you obtained in step 2.
Image showing shopify template
  • Save your changes.

Step 4: Preview and Test

  • Navigate back to your Shopify storefront to preview the product page.
  • The embedded video player should now appear, allowing viewers to control playback.
Image showing insertion of embed code.

Pros of Using Video Hosting Platforms:

  • Free or Freemium Plans: Both YouTube and Vimeo have free plans with limitations (storage, video length) that might be sufficient for small stores.
  • Easy Integration: The embed code method is a straightforward approach for those comfortable with basic code editing.
  • Analytics (Limited): YouTube provides you with basic video analytics to track views, engagement, and audience demographics.

Cons of Using Video Hosting Platforms:

  • Limited Customization: The player design and functionality are dictated by the platform, allowing for minimal customization options.
  • Branding Issues: Free plans often display platform ads alongside your video, potentially distracting viewers.
  • Video Hosting Restrictions: Platforms may have restrictions on video content or impose limitations on features with free plans.

Method 2: Utilize Shopify Apps for Inserting Videos into Your Store

The Shopify App Store offers a plethora of apps specifically designed for video embedding, providing greater control and advanced features compared to the basic embed code method. Here's a breakdown of the process:

Step 1: Explore Shopify Apps

  • Head to the Shopify App Store and search for terms like "shoppable video", "product video" or "video embed."
Image showing Vidjet app on shopify.
  • Numerous apps cater to video embedding, each with its unique features and pricing. Consider factors like:
    • Customization Availability: Does the app allow customizing the video player's look and feel to match your brand?
    • Advanced features: Does it provide functionalities like heatmaps to analyze viewer engagement or A/B testing for different video placements?
    • Pricing: Compare app pricing models (free trials, monthly subscriptions) to find one that suits your budget.
Image showing reviews and features segment.

Step 2: Install and Configure the App

  • Once you've chosen a suitable app, follow the on-screen instructions to install it on your Shopify store.
  • Each app will have its own configuration process, but generally, you'll be able to upload your video directly to the app or connect it to your existing video hosting platform.
  • The app will provide specific instructions on how to embed the video with playback controls onto your product pages or other store sections.
Image showing how to set up Vidjet

Step 3 : Check Core Web Vitals to prevent videos from slowing down you web page loading time

  • Use tools like Google PageSpeed Insights or Lighthouse to audit your product pages after embedding videos.
  • Look for recommendations on optimising your video elements specifically. This might involve:
    • Using video hosting platforms with Content Delivery Networks (CDNs) for faster video delivery.
    • Enabling lazy loading for videos, which delays loading them until they are about to enter the viewport.
    • Replacing large video files with smaller ones using compression techniques.

Pros of Using Shopify Apps:

  • Enhanced Customization: Many apps allow for extensive customization options for the video player's design and functionality.
  • Advanced Features: Unlock features like heatmaps, A/B testing, and detailed video analytics for better insights into audience behavior.
  • Seamless Integration: Apps often integrate seamlessly with your Shopify theme, simplifying the embedding process.

Choosing the Right Method:

The best method for adding shoppable videos to your Shopify store depends on your specific needs and budget.

  • For a simple and free solution: Utilize embed codes from video hosting platforms like YouTube or Vimeo. This is a good option for stores starting out or those with limited video needs.
  • For greater control and advanced features: Invest in a Shopify app for video embedding. This option is ideal for stores prioritizing video content, wanting in-depth analytics, and seeking an aesthetically-pleasing, customized video player.

Additional Tips:

  • Video Optimization: Regardless of the method chosen, ensure your videos are optimized for fast loading times. Use tools to compress file sizes without sacrificing quality.
  • Mobile Responsiveness: Always test your video playback on mobile devices. Choose an embed code or app that ensures a smooth user experience across all platforms.
  • Call to Action: Include a clear call to action (CTA) alongside your video, encouraging viewers to take the desired action (buy now, learn more, etc.).

‍