Quickly Add Video Popups to BigCommerce Website

A visitor lands on your BigCommerce product page, skims the description, and leaves without ever scrolling down to your demo video. A video popup puts that video right in front of them instead of hoping they find it.

BigCommerce doesn’t have a native video popup feature, but connecting a tool like WiserNotify adds one in a few minutes, no coding required. If you’re comparing platforms or want the general approach first, see our full guide on how to add a video popup to any website.

This guide covers exactly how to connect WiserNotify to your BigCommerce store and build a video popup widget, plus the best practices that keep it helpful instead of annoying.

How to Add a Video Popup to BigCommerce

Watch the full walkthrough below, or follow the written steps underneath.

Step 1: Get an API Key from BigCommerce

1. Log in to BigCommerce and go to Advanced Settings.

2. Click API Accounts.

3. Click Create API Account.

4. Select V2/V3 API token as the token type, enter a name (like “Connect to WiserNotify”), and copy the store hash shown in the API path.

Step 2: Connect the API Key in WiserNotify

1. Sign up for WiserNotify. Create a free account at wisernotify.com, or log in if you already have one, then go to WiserNotify > BigCommerce Integration and click Integrate.

2. Select the OAuth scopes for the integration, then click Save.

3. Open BigCommerce’s API credentials screen and copy the Client ID and Access Token shown there.

4. Back in the WiserNotify integration popup, paste the store hash, Client ID, and Access Token into their fields, enter a connection name, and click Create.

This automatically installs the WiserNotify pixel on your BigCommerce store and starts pulling in real-time order and customer data, no manual code to paste anywhere.

See the full BigCommerce integration guide for more detail on this step.

If you’d rather start with something simpler, adding live sales notifications to BigCommerce uses the same connection.

Step 3: Create the Video Popup Widget

1. In WiserNotify, go to the Widgets section, select Video popup from the widget options, and click Add. WiserNotify’s video popup widget guide covers every option in this editor in more depth.

2. Customize the design. Add your video, edit the popup text (dynamic placeholders like {Name} or {Product} are supported), set up a clickable CTA button with its own link and styling, and choose the position, animation, and color style for both mobile and desktop.

3. Set the timing and configure display settings. Under Timing Control, set an initial delay before the popup appears and how long it stays visible. Choose which pages it should appear on, add any advanced targeting you need, then click Save and Publish.

4. Test it on your live store. Visit your BigCommerce store in a private or incognito window to confirm the popup appears the way you configured it.

Best Practices for Creating an Engaging Video Popup

To ensure your video popup delivers the best results, follow these best practices:

1. Keep Videos Short and Focused

Why: Shoppers have short attention spans, and long videos can deter engagement.

• Create videos under 60 seconds, focusing on one clear message or CTA.
• Use high-quality resolution (HD or 4K) for a polished look.

2. Trigger Popups Strategically

Why: Poorly timed popups can disrupt the user experience.

• Set the popup to appear after a delay (5-10 seconds) or once the user scrolls halfway down the page.
• Use exit-intent popups to re-engage visitors who are about to leave.

3. Design for Mobile Responsiveness

Why: Many customers browse and shop on mobile devices.

• Use responsive designs that adapt seamlessly to various screen sizes.
• Test the popup on multiple devices to ensure usability.

4. Limit Popup Frequency

Why: Overusing popups can frustrate customers and lead to higher bounce rates.

• Restrict video popups to one per session or display them only on high-priority pages like product or checkout pages.

5. Provide Easy Dismiss Options

Why: Visitors want control over their browsing experience.

• Include a clear, visible close button.
• Allow users to dismiss the popup by clicking outside its frame.

6. Align with Store Branding

Why: Consistency in design builds trust and enhances user experience.

• Match the popup’s colors, fonts, and style with your store’s branding.
• Avoid overly flashy animations that may distract customers.

7. Test and Optimize Performance

Why: Continuous improvement ensures better engagement and results.

• Use BigCommerce analytics or third-party tools to track popup engagement rates.
• Conduct A/B testing to refine triggers, content, and design.

8. Add Value to the Customer

Why: Customers are more likely to interact with content that benefits them.

• Use popups to showcase tutorials, product demos, or limited-time offers.
• Ensure the video addresses a customer need or highlights a solution.

Common Mistakes to Avoid

• Autoplaying with sound on load: a video that blasts audio the moment someone lands on the page is one of the fastest ways to make them leave. Keep it muted by default.
• Firing the popup instantly: showing it before a visitor has seen any content feels like an ambush. Give them a few seconds first.
• No mobile testing: a popup that looks fine on desktop can easily cover the whole screen or break on a phone. Always check both.
• Skipping the close button: a popup a visitor can’t easily dismiss creates frustration that outweighs whatever the video was trying to sell.
• Using a huge, uncompressed video file: this slows the whole page down, not just the popup. Host it externally on YouTube or Vimeo instead of uploading it directly.

How to Measure Video Popup Performance

Once the popup is live, a few numbers tell you whether it’s helping or just adding noise.

• Views and impressions: how many visitors the popup reached, available in your WiserNotify dashboard.
• Click-through rate on the CTA: the share of viewers who clicked through, a sign the video and offer are relevant.
• Conversion rate on pages with the popup: compare against pages without it to see if it’s genuinely moving purchases.
• Dismiss rate: how often visitors close it right away, a signal the timing or frequency needs adjusting.
• Page load time: check this before and after adding the popup to confirm it isn’t slowing down your store.

Test one variable at a time, timing, video length, or CTA wording, so you know exactly what moved the number.

Conclusion

Adding a video popup to your BigCommerce store is a smart way to engage customers, convey key messages, and drive conversions.

Connecting WiserNotify to your store takes a few minutes, and once it’s set up, you can build and manage the popup entirely from the dashboard without touching code.

Follow the best practices above, keep it short, well-timed, and easy to dismiss, and your video popup will add to the shopping experience instead of getting in the way.

Related Posts:

• Add Video Popup to Webflow
• Add Video Popup to Duda
• Add Video Popup to Weebly