Is your Shopify store fighting to keep visitors from clicking the dreaded back button? In today’s competitive e-commerce landscape, you have mere seconds to capture a customer’s attention. A high bounce rate doesn’t just mean lost sales—it can also hurt your search engine rankings.
What if you could instantly wow your visitors, showcase your brand’s personality, and guide them deeper into your store? The answer lies in a 3D intro video.
In this guide, we’ll show you exactly how to add an engaging 3D intro video to your Shopify store using a free, easy-to-install code snippet. Let’s transform your visitor experience and give your SEO a powerful boost.
Why a 3D Intro Video is a Game-Changer for Your Shopify Store
Before we dive into the “how,” let’s talk about the “why.” Adding a professional 3D intro video offers a multitude of benefits:
1. Dramatically Reduce Bounce Rate
A bounce occurs when a visitor leaves your site without interacting with any other pages. A captivating intro video immediately engages users, giving them a compelling reason to stay and see what happens next. This signals to Google that your site is valuable and interesting.
2. Boost User Engagement & Dwell Time
Dwell time (how long a user spends on your site) is a critical SEO factor. An engaging video keeps users on your page longer, which search engines interpret as a positive signal of content quality and relevance.
3. Enhance Brand Perception & Trust
A high-quality 3D video makes your brand look professional, innovative, and trustworthy. It’s a powerful tool to communicate your brand story and value proposition in a memorable way within seconds.
4. Increase Conversions and Sales
By guiding users with a clear and attractive introduction, you can effectively funnel their attention toward your best products or current promotions, leading to higher click-through rates and ultimately, more sales.
5. Improve Core Web Vitals (When Done Correctly)
While video can impact load speed, using modern techniques (like a compressed video hosted externally) ensures you maintain a good Largest Contentful Paint (LCP) score. The engagement benefits often far outweigh the minimal load impact when optimized properly.
Important SEO Considerations Before You Start
To ensure your 3D intro video helps rather than hurts your SEO, keep these tips in mind:
- Don’t Autoplay Sound: For a better user experience, always have the video muted by default. Auto-playing sound is a major annoyance for users.
- Keep it Short: Your intro video should be no longer than 5-10 seconds. The goal is to intrigue, not to delay the shopping experience.
- Optimize for Mobile: Ensure the video player is responsive and looks great on all devices. Mobile usability is a direct ranking factor.
- Host Externally: For the best performance, upload your video to a platform like Vimeo or YouTube and embed it. This saves your Shopify store’s bandwidth and loading speed.
How to Add Your 3D Intro Video to Shopify: Step-by-Step
Prerequisite: Have your 3D intro video ready. It should be compressed and hosted on YouTube or Vimeo.
Step 1: Get Your Video Embed Code
- Upload your video to YouTube or Vimeo.
- Click the Share button and then select Embed.
- Copy the provided embed code (iframe code).
Step 2: Add the Free Code Snippet to Your Theme
⚠️ Important: Always duplicate your theme before editing the code. Go to Online Store > Themes > Actions > Duplicate.
{% comment %}
<!-- Premium Video Intro Section - Designed by Foysal Ahmed -->
{% endcomment %}
{%- assign section_id_clean = section.id | replace: '-', '_' -%}
<div id="premium-video-intro-{{ section.id }}" class="premium-video-intro-section"
data-session-type="{{ section.settings.session_type }}"
data-auto-close-delay="{{ section.settings.auto_close_delay }}"
data-audio-enabled="{{ section.settings.enable_audio }}"
style="--overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
--text-size: {{ section.settings.text_size }}px;
--logo-size: {{ section.settings.logo_size }}px;
--progress-color: {{ section.settings.progress_color }};
--progress-bg: {{ section.settings.progress_bg_color }};
--cta-bg-color: {{ section.settings.cta_bg_color }};
--cta-text-color: {{ section.settings.cta_text_color }};">
<div class="premium-video-container">
{% if section.settings.desktop_video != blank or section.settings.mobile_video != blank %}
{% if section.settings.desktop_video != blank %}
<video class="premium-desktop-video premium-video-element"
autoplay playsinline preload="auto" {% if section.settings.loop_video %}loop{% endif %}>
<source src="{{ section.settings.desktop_video }}" type="video/mp4">
</video>
{% endif %}
{% if section.settings.mobile_video != blank %}
<video class="premium-mobile-video premium-video-element"
autoplay playsinline preload="auto" {% if section.settings.loop_video %}loop{% endif %}>
<source src="{{ section.settings.mobile_video }}" type="video/mp4">
</video>
{% endif %}
<div class="premium-video-overlay"></div>
<div class="premium-content-overlay premium-position-{{ section.settings.content_position }}">
{% if section.settings.overlay_logo != blank %}
<div class="premium-logo-content">
<img src="{{ section.settings.overlay_logo | image_url: width: 800 }}"
alt="{{ section.settings.overlay_logo.alt | default: 'Brand Logo' }}"
width="{{ section.settings.logo_size }}"
height="auto"
loading="eager">
</div>
{% endif %}
{% if section.settings.overlay_text != blank %}
<div class="premium-text-content">
{{ section.settings.overlay_text }}
</div>
{% endif %}
{% if section.settings.show_countdown %}
<div class="premium-countdown">
<span class="premium-countdown-text">Starting in </span>
<span class="premium-countdown-timer" data-countdown="{{ section.settings.countdown_duration }}">{{ section.settings.countdown_duration }}</span>
</div>
{% endif %}
{% if section.settings.cta_text != blank %}
<div class="premium-cta-container">
<a href="{{ section.settings.cta_link }}" class="premium-cta-button">
{{ section.settings.cta_text }}
</a>
</div>
{% endif %}
</div>
<div class="premium-controls-container">
<div class="premium-progress-bar">
<div class="premium-progress-fill"></div>
</div>
<div class="premium-controls-bottom">
<button type="button" class="premium-audio-toggle" aria-label="Toggle audio">
<svg class="premium-audio-icon premium-audio-on" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/>
</svg>
<svg class="premium-audio-icon premium-audio-off" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
</svg>
</button>
<button type="button" class="premium-skip-button" onclick="premiumCloseVideo{{ section_id_clean }}()">
{{ section.settings.skip_text | default: 'Skip Intro' }}
<svg class="premium-skip-icon" viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M4,4H11V12L4,12V4M13,12V4H20V12H13M13,20V13H20V20H13M4,20V13H11V20H4Z"/>
</svg>
</button>
</div>
</div>
<!-- Audio permission prompt for browsers that block autoplay -->
<div class="premium-audio-permission" style="display: none;">
<div class="premium-audio-prompt">
<p>Click anywhere to enable sound</p>
<button type="button" class="premium-enable-audio">Enable Sound</button>
</div>
</div>
{% else %}
<div class="premium-placeholder">
<svg class="premium-placeholder-icon" viewBox="0 0 24 24" width="48" height="48">
<path fill="currentColor" d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" />
</svg>
<p>Please add a video in the section settings</p>
</div>
{% endif %}
</div>
</div>
<style>
.premium-video-intro-section {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: #000;
opacity: 1;
visibility: visible;
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.premium-video-intro-section.premium-fade-out {
opacity: 0;
pointer-events: none;
}
.premium-video-intro-section.premium-hidden {
display: none;
}
.premium-video-container {
position: relative;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
.premium-video-element {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
object-fit: cover;
z-index: 1;
transition: opacity 0.5s ease;
}
.premium-desktop-video {
display: block;
}
.premium-mobile-video {
display: none;
}
.premium-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, var(--overlay-opacity)));
z-index: 2;
pointer-events: none;
}
.premium-content-overlay {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 3;
text-align: center;
pointer-events: none;
max-width: 90%;
width: 100%;
padding: 0 20px;
}
.premium-content-overlay.premium-position-top {
top: 15%;
transform: translateX(-50%) translateY(-50%);
}
.premium-content-overlay.premium-position-center {
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.premium-content-overlay.premium-position-bottom {
bottom: 20%;
transform: translateX(-50%) translateY(50%);
}
.premium-text-content {
color: #ffffff;
font-size: var(--text-size);
font-weight: 700;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
line-height: 1.3;
margin: 1.5rem 0;
font-family: var(--font-heading-family);
animation: fadeInUp 1s ease-out;
}
.premium-logo-content {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
animation: fadeIn 1.2s ease-out;
}
.premium-logo-content img {
max-width: var(--logo-size);
height: auto;
filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.7));
}
.premium-countdown {
margin: 1.5rem 0;
font-size: calc(var(--text-size) * 0.6);
color: #fff;
font-weight: 600;
animation: fadeIn 1.5s ease-out;
}
.premium-countdown-timer {
background: rgba(0, 0, 0, 0.5);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
margin-left: 0.5rem;
}
.premium-cta-container {
margin-top: 2rem;
pointer-events: auto;
animation: fadeInUp 1.8s ease-out;
}
.premium-cta-button {
display: inline-block;
background: var(--cta-bg-color);
color: var(--cta-text-color);
padding: 1rem 2.5rem;
border-radius: 3rem;
font-weight: 700;
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.premium-cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
.premium-controls-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 4;
padding: 0 20px 20px;
pointer-events: none;
}
.premium-progress-bar {
width: 100%;
height: 4px;
background: var(--progress-bg);
border-radius: 2px;
overflow: hidden;
margin-bottom: 15px;
}
.premium-progress-fill {
height: 100%;
width: 0%;
background: var(--progress-color);
border-radius: 2px;
transition: width 0.1s linear;
}
.premium-controls-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.premium-audio-toggle {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.premium-audio-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.premium-audio-icon {
color: #fff;
display: none;
}
.premium-audio-on.audio-enabled,
.premium-audio-off.audio-disabled {
display: block;
}
.premium-skip-button {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
font-family: var(--font-body-family);
cursor: pointer;
pointer-events: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.premium-skip-button:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.premium-skip-icon {
transition: transform 0.3s ease;
}
.premium-skip-button:hover .premium-skip-icon {
transform: translateX(3px);
}
.premium-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
z-index: 2;
}
.premium-placeholder-icon {
margin-bottom: 1rem;
opacity: 0.7;
}
/* Audio permission prompt */
.premium-audio-permission {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.premium-audio-prompt {
text-align: center;
color: white;
padding: 2rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 80%;
}
.premium-audio-prompt p {
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.premium-enable-audio {
background: #ffffff;
color: #000000;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.premium-enable-audio:hover {
background: #e6e6e6;
transform: scale(1.05);
}
body.premium-video-playing {
overflow: hidden;
height: 100vh;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.premium-desktop-video {
display: none;
}
.premium-mobile-video {
display: block;
}
.premium-content-overlay.premium-position-top {
top: 10%;
}
.premium-content-overlay.premium-position-bottom {
bottom: 15%;
}
.premium-text-content {
font-size: calc(var(--text-size) * 0.7);
margin: 1rem 0;
}
.premium-logo-content img {
max-width: calc(var(--logo-size) * 0.7);
}
.premium-cta-button {
padding: 0.8rem 1.8rem;
font-size: 1rem;
}
.premium-controls-container {
padding: 0 15px 15px;
}
.premium-audio-prompt {
padding: 1.5rem;
}
.premium-audio-prompt p {
font-size: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.premium-video-intro-section,
.premium-skip-button,
.premium-audio-toggle,
.premium-cta-button {
transition: none;
}
.premium-text-content,
.premium-logo-content,
.premium-countdown,
.premium-cta-container {
animation: none;
}
}
</style>
<script>
(function() {
const videoSection{{ section_id_clean }} = document.getElementById('premium-video-intro-{{ section.id }}');
const videoContainer{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-video-container');
const desktopVideo{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-desktop-video');
const mobileVideo{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-mobile-video');
const progressFill{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-progress-fill');
const audioToggle{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-audio-toggle');
const audioPermission{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-audio-permission');
const enableAudioBtn{{ section_id_clean }} = videoSection{{ section_id_clean }}?.querySelector('.premium-enable-audio');
let currentVideo{{ section_id_clean }} = null;
let isPlaying{{ section_id_clean }} = false;
let autoCloseTimer{{ section_id_clean }} = null;
let progressInterval{{ section_id_clean }} = null;
let countdownTimer{{ section_id_clean }} = null;
let audioBlocked{{ section_id_clean }} = false;
function getActiveVideo{{ section_id_clean }}() {
const isMobile = window.innerWidth <= 768;
const preferredVideo = isMobile ? mobileVideo{{ section_id_clean }} : desktopVideo{{ section_id_clean }};
return preferredVideo || desktopVideo{{ section_id_clean }} || mobileVideo{{ section_id_clean }};
}
function checkSessionDisplay{{ section_id_clean }}() {
const sessionType = videoSection{{ section_id_clean }}?.dataset.sessionType;
const sessionKey = 'premium_video_played_{{ section_id_clean }}';
if (sessionType === 'once' && sessionStorage.getItem(sessionKey)) {
premiumCloseVideo{{ section_id_clean }}(true);
return false;
}
return true;
}
function startAutoCloseTimer{{ section_id_clean }}() {
const delay = parseInt(videoSection{{ section_id_clean }}?.dataset.autoCloseDelay) || 0;
if (delay > 0) {
autoCloseTimer{{ section_id_clean }} = setTimeout(() => {
premiumCloseVideo{{ section_id_clean }}();
}, delay * 1000);
}
}
function startProgressBar{{ section_id_clean }}() {
if (!currentVideo{{ section_id_clean }} || !progressFill{{ section_id_clean }}) return;
clearInterval(progressInterval{{ section_id_clean }});
progressInterval{{ section_id_clean }} = setInterval(() => {
if (currentVideo{{ section_id_clean }}.duration) {
const progress = (currentVideo{{ section_id_clean }}.currentTime / currentVideo{{ section_id_clean }}.duration) * 100;
progressFill{{ section_id_clean }}.style.width = `${progress}%`;
}
}, 100);
}
function startCountdown{{ section_id_clean }}() {
const countdownElement = videoSection{{ section_id_clean }}?.querySelector('.premium-countdown-timer');
if (!countdownElement || !videoSection{{ section_id_clean }}.dataset.autoCloseDelay) return;
let countdown = parseInt(countdownElement.dataset.countdown) || parseInt(videoSection{{ section_id_clean }}.dataset.autoCloseDelay);
countdownElement.textContent = countdown;
clearInterval(countdownTimer{{ section_id_clean }});
countdownTimer{{ section_id_clean }} = setInterval(() => {
countdown--;
countdownElement.textContent = countdown;
if (countdown <= 0) {
clearInterval(countdownTimer{{ section_id_clean }});
}
}, 1000);
}
function toggleAudio{{ section_id_clean }}() {
if (!currentVideo{{ section_id_clean }}) return;
// Toggle the muted state
currentVideo{{ section_id_clean }}.muted = !currentVideo{{ section_id_clean }}.muted;
// Update audio icon
const audioOn = audioToggle{{ section_id_clean }}.querySelector('.premium-audio-on');
const audioOff = audioToggle{{ section_id_clean }}.querySelector('.premium-audio-off');
if (currentVideo{{ section_id_clean }}.muted) {
audioOn.classList.remove('audio-enabled');
audioOn.classList.add('audio-disabled');
audioOff.classList.add('audio-enabled');
audioOff.classList.remove('audio-disabled');
} else {
audioOn.classList.add('audio-enabled');
audioOn.classList.remove('audio-disabled');
audioOff.classList.remove('audio-enabled');
audioOff.classList.add('audio-disabled');
}
}
function enableAudio{{ section_id_clean }}() {
if (!currentVideo{{ section_id_clean }}) return;
// Try to enable audio through user interaction
currentVideo{{ section_id_clean }}.muted = false;
// Try to play with sound
const playPromise = currentVideo{{ section_id_clean }}.play();
if (playPromise !== undefined) {
playPromise.then(() => {
// Audio successfully enabled
if (audioPermission{{ section_id_clean }}) {
audioPermission{{ section_id_clean }}.style.display = 'none';
}
toggleAudio{{ section_id_clean }}();
audioBlocked{{ section_id_clean }} = false;
}).catch(error => {
console.log('Audio enable failed:', error);
// If enabling audio fails, keep it muted
currentVideo{{ section_id_clean }}.muted = true;
toggleAudio{{ section_id_clean }}();
});
}
}
function cleanupVideoResources{{ section_id_clean }}() {
// Pause the video and reset its state
if (currentVideo{{ section_id_clean }}) {
currentVideo{{ section_id_clean }}.pause();
currentVideo{{ section_id_clean }}.currentTime = 0;
// Disconnect video element from DOM to stop audio
currentVideo{{ section_id_clean }}.src = '';
currentVideo{{ section_id_clean }}.load();
}
// Clear all intervals and timeouts
if (autoCloseTimer{{ section_id_clean }}) {
clearTimeout(autoCloseTimer{{ section_id_clean }});
autoCloseTimer{{ section_id_clean }} = null;
}
if (progressInterval{{ section_id_clean }}) {
clearInterval(progressInterval{{ section_id_clean }});
progressInterval{{ section_id_clean }} = null;
}
if (countdownTimer{{ section_id_clean }}) {
clearInterval(countdownTimer{{ section_id_clean }});
countdownTimer{{ section_id_clean }} = null;
}
// Reset progress bar
if (progressFill{{ section_id_clean }}) {
progressFill{{ section_id_clean }}.style.width = '0%';
}
}
function premiumPlayVideo{{ section_id_clean }}() {
if (!currentVideo{{ section_id_clean }} || isPlaying{{ section_id_clean }}) return;
// Set initial audio state
const audioEnabled = videoSection{{ section_id_clean }}.dataset.audioEnabled === 'true';
currentVideo{{ section_id_clean }}.muted = !audioEnabled;
const playPromise = currentVideo{{ section_id_clean }}.play();
if (playPromise !== undefined) {
playPromise.then(() => {
isPlaying{{ section_id_clean }} = true;
document.body.classList.add('premium-video-playing');
if (autoCloseTimer{{ section_id_clean }}) {
clearTimeout(autoCloseTimer{{ section_id_clean }});
}
startProgressBar{{ section_id_clean }}();
startCountdown{{ section_id_clean }}();
// Set correct initial icon state
toggleAudio{{ section_id_clean }}();
}).catch(error => {
console.log('Video autoplay prevented by browser:', error);
// Check if the error is due to audio autoplay restrictions
if (error.name === 'NotAllowedError' && audioEnabled) {
audioBlocked{{ section_id_clean }} = true;
// Show audio permission prompt
if (audioPermission{{ section_id_clean }}) {
audioPermission{{ section_id_clean }}.style.display = 'flex';
}
// Try muted autoplay as fallback
currentVideo{{ section_id_clean }}.muted = true;
currentVideo{{ section_id_clean }}.play()
.then(() => {
isPlaying{{ section_id_clean }} = true;
document.body.classList.add('premium-video-playing');
startProgressBar{{ section_id_clean }}();
startCountdown{{ section_id_clean }}();
toggleAudio{{ section_id_clean }}();
})
.catch(err => {
console.log('Muted autoplay also failed:', err);
});
}
});
}
}
window.premiumCloseVideo{{ section_id_clean }} = function(immediate = false) {
// Clean up video resources to stop audio
cleanupVideoResources{{ section_id_clean }}();
document.body.classList.remove('premium-video-playing');
const sessionType = videoSection{{ section_id_clean }}?.dataset.sessionType;
if (sessionType === 'once') {
sessionStorage.setItem('premium_video_played_{{ section_id_clean }}', 'true');
}
if (immediate) {
videoSection{{ section_id_clean }}.style.display = 'none';
return;
}
videoSection{{ section_id_clean }}.classList.add('premium-fade-out');
setTimeout(() => {
videoSection{{ section_id_clean }}.style.display = 'none';
}, 800);
};
function initVideoIntro{{ section_id_clean }}() {
if (!videoSection{{ section_id_clean }} || !checkSessionDisplay{{ section_id_clean }}()) return;
currentVideo{{ section_id_clean }} = getActiveVideo{{ section_id_clean }}();
if (!currentVideo{{ section_id_clean }}) {
premiumCloseVideo{{ section_id_clean }}(true);
return;
}
// Add event listener for audio permission button
if (enableAudioBtn{{ section_id_clean }}) {
enableAudioBtn{{ section_id_clean }}.addEventListener('click', enableAudio{{ section_id_clean }});
}
// Also allow clicking anywhere to enable audio
if (audioPermission{{ section_id_clean }}) {
audioPermission{{ section_id_clean }}.addEventListener('click', enableAudio{{ section_id_clean }});
}
document.body.classList.add('premium-video-playing');
currentVideo{{ section_id_clean }}.addEventListener('ended', () => {
if (!currentVideo{{ section_id_clean }}.hasAttribute('loop')) {
premiumCloseVideo{{ section_id_clean }}();
}
});
if (videoContainer{{ section_id_clean }}) {
videoContainer{{ section_id_clean }}.addEventListener('click', (e) => {
if (!e.target.closest('.premium-audio-toggle') &&
!e.target.closest('.premium-skip-button') &&
!e.target.closest('.premium-cta-button') &&
!e.target.closest('.premium-audio-permission')) {
premiumPlayVideo{{ section_id_clean }}();
}
});
}
if (audioToggle{{ section_id_clean }}) {
audioToggle{{ section_id_clean }}.addEventListener('click', toggleAudio{{ section_id_clean }});
}
// Start playing the video automatically
setTimeout(() => {
premiumPlayVideo{{ section_id_clean }}();
}, 300);
startAutoCloseTimer{{ section_id_clean }}();
window.addEventListener('resize', () => {
const newVideo = getActiveVideo{{ section_id_clean }}();
if (newVideo !== currentVideo{{ section_id_clean }}) {
const wasPlaying = isPlaying{{ section_id_clean }};
const currentTime = currentVideo{{ section_id_clean }}.currentTime;
const wasMuted = currentVideo{{ section_id_clean }}.muted;
currentVideo{{ section_id_clean }} = newVideo;
isPlaying{{ section_id_clean }} = false;
if (wasPlaying) {
currentVideo{{ section_id_clean }}.currentTime = currentTime;
currentVideo{{ section_id_clean }}.muted = wasMuted;
premiumPlayVideo{{ section_id_clean }}();
}
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initVideoIntro{{ section_id_clean }});
} else {
initVideoIntro{{ section_id_clean }}();
}
})();
</script>
{% schema %}
{
"name": "Premium Video Intro",
"settings": [
{
"type": "header",
"content": "Video Sources"
},
{
"type": "url",
"id": "desktop_video",
"label": "Desktop Video URL",
"info": "Recommended: MP4 format, 1080p or 4K resolution"
},
{
"type": "url",
"id": "mobile_video",
"label": "Mobile Video URL",
"info": "Optional: Vertical video for mobile devices"
},
{
"type": "checkbox",
"id": "loop_video",
"label": "Loop Video",
"default": false,
"info": "Video will restart when finished instead of closing"
},
{
"type": "header",
"content": "Text Overlay"
},
{
"type": "richtext",
"id": "overlay_text",
"label": "Overlay Text",
"default": "<p>Welcome to Our Store</p>"
},
{
"type": "range",
"id": "text_size",
"min": 24,
"max": 120,
"step": 2,
"unit": "px",
"label": "Text Size",
"default": 48
},
{
"type": "header",
"content": "Logo Overlay"
},
{
"type": "image_picker",
"id": "overlay_logo",
"label": "Overlay Logo",
"info": "Recommended: Transparent PNG, 800px width"
},
{
"type": "range",
"id": "logo_size",
"min": 50,
"max": 500,
"step": 10,
"unit": "px",
"label": "Logo Size",
"default": 200
},
{
"type": "header",
"content": "Call to Action"
},
{
"type": "text",
"id": "cta_text",
"label": "CTA Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "cta_link",
"label": "CTA Link",
"default": "/collections/all"
},
{
"type": "color",
"id": "cta_bg_color",
"label": "CTA Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_text_color",
"label": "CTA Text Color",
"default": "#000000"
},
{
"type": "header",
"content": "Countdown Timer"
},
{
"type": "checkbox",
"id": "show_countdown",
"label": "Show Countdown Timer",
"default": true
},
{
"type": "number",
"id": "countdown_duration",
"label": "Countdown Duration (seconds)",
"default": 10,
"info": "Set to 0 to use auto-close delay value"
},
{
"type": "header",
"content": "Progress Bar"
},
{
"type": "color",
"id": "progress_color",
"label": "Progress Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "progress_bg_color",
"label": "Progress Background Color",
"default": "rgba(255, 255, 255, 0.3)"
},
{
"type": "header",
"content": "Audio Settings"
},
{
"type": "checkbox",
"id": "enable_audio",
"label": "Enable Audio Initially",
"default": true,
"info": "Note: Browsers may block autoplay with sound"
},
{
"type": "header",
"content": "Effects"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 80,
"step": 5,
"unit": "%",
"label": "Dark Overlay Opacity",
"default": 20
},
{
"type": "range",
"id": "auto_close_delay",
"min": 0,
"max": 30,
"step": 1,
"unit": "s",
"label": "Auto Close Delay",
"default": 10,
"info": "Set to 0 to disable auto-close"
},
{
"type": "header",
"content": "Session Management"
},
{
"type": "select",
"id": "session_type",
"label": "Show Video",
"options": [
{
"value": "once",
"label": "Once Per Session"
},
{
"value": "always",
"label": "Every Visit"
}
],
"default": "once"
}
],
"presets": [
{
"name": "Premium Video Intro",
"category": "Media"
}
]
}
{% endschema %}Step 3: Test Your Website
Go to your live website and refresh. Your 3D intro video should now play automatically in a full-screen overlay when the page loads, with the option to skip. Test it on both desktop and mobile!
Conclusion: Elevate Your Store’s First Impression
Adding a 3D intro video is a proven strategy to capture attention, reduce your website bounce rate, and signal quality to both users and search engines. By following this tutorial and using our free, optimized code snippet, you can implement this powerful feature without hurting your site’s performance.
Ready to create your 3D intro video? Check out tools like Blender, Adobe After Effects, or online platforms like Placeit to bring your brand story to life.
Have you added a video intro to your store? Share your results in the comments below!