Transform your Shopify store with smart redirect popups that drive immediate purchases and increase conversion rates.
Why Redirect Popups Are Essential for Shopify Stores
If you’re looking for immediate sales impact, redirect popups are your secret weapon. Here’s why they outperform traditional popups:
- 📈 35-50% higher conversion rates compared to email-only popups
- ⚡ Instant sales activation – no waiting for email sequences
- 🛒 Direct path to purchase with pre-applied discount codes
- 🎯 Perfect for impulse buyers and time-sensitive offers
- 📱 Mobile-optimized for on-the-go shoppers
In this step-by-step guide, I’ll show you how to implement professional redirect popups that drive immediate sales and create seamless shopping experiences.
What You’ll Build
By the end of this tutorial, you’ll have a high-converting holiday popup that:
- ✅ Automatically redirects customers to your store
- ✅ Applies discount codes instantly
- ✅ Tracks conversions and customer behavior
- ✅ Works perfectly with Shopify Dawn theme
- ✅ Fully customizable through theme editor
- ✅ Includes auto-redirect countdown timers
Step 1: Create Your Shopify Discount Code
1.1 Access Discount Settings
- Go to Shopify Admin → Discounts
- Click “Create discount”
- Select “Discount code” (not automatic discount)
1.2 Configure Your Discount
Basic Settings:
- Discount code:
HOLIDAY15 - Discount type: Percentage
- Value: 15%
Requirements:
- Minimum purchase amount: $50.00
- Applies to: All orders
- Customer eligibility: Everyone
- Total usage limits: Set as needed
Usage Limits:
- ✅ Once per customer
- ❌ No usage limit (for maximum reach)
- Active dates: Set your holiday timeframe
1.3 Test Your Discount Code
- Add a product to cart (minimum $50 value)
- Go to checkout
- Apply code:
HOLIDAY15 - Verify 15% discount applies correctly
Step 2: Create the Popup Section
2.1 Access Your Theme Code
- Go to Shopify Admin → Online Store → Themes
- Click “Edit code” on your current theme
- Create a new section file called
popup.liquid
2.2 Complete Redirect Popup Code
Copy and paste this complete code into your new sections/popup.liquid file:
{%- if section.settings.enable_popup -%}
<style>
/* Dynamic CSS Variables from Schema */
.redirect-popup-section {
--popup-bg: {{ section.settings.bg_color }};
--popup-bg-secondary: {{ section.settings.bg_color_secondary }};
--popup-accent: {{ section.settings.accent_color }};
--popup-text: {{ section.settings.text_color }};
--button-color: {{ section.settings.button_color }};
--button-hover-color: {{ section.settings.button_hover_color }};
--border-color: {{ section.settings.border_color }};
}
/* Popup Container */
.redirect-popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none;
font-family: var(--font-body-family);
}
.redirect-popup-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.redirect-popup-main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 500px;
background: linear-gradient(135deg, var(--popup-bg), var(--popup-bg-secondary));
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
border: 2px solid var(--border-color);
overflow: hidden;
animation: popupSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popupSlideUp {
from { opacity: 0; transform: translate(-50%, 100%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
.redirect-popup-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--popup-text);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.redirect-popup-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.redirect-popup-content {
padding: 40px 30px 30px;
color: var(--popup-text);
text-align: center;
}
/* Header Styles */
.redirect-popup-header {
margin-bottom: 25px;
}
.redirect-icons {
margin-bottom: 15px;
}
.redirect-icons .icon {
font-size: 24px;
margin: 0 8px;
animation: float 3s ease-in-out infinite;
display: inline-block;
}
.redirect-icons .icon:nth-child(2) { animation-delay: 0.5s; }
.redirect-icons .icon:nth-child(3) { animation-delay: 1s; }
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.redirect-popup-title {
font-size: 28px;
font-weight: 700;
margin: 0 0 8px;
color: var(--popup-accent);
}
.redirect-popup-subtitle {
font-size: 16px;
opacity: 0.9;
margin: 0;
}
/* Offer Section */
.redirect-offer-section {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 30px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.redirect-discount-badge {
text-align: center;
padding: 15px;
background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
border-radius: 12px;
min-width: 80px;
}
.redirect-discount-amount {
display: block;
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.redirect-discount-text {
font-size: 14px;
font-weight: 600;
opacity: 0.9;
}
.redirect-offer-details h3 {
margin: 0 0 5px;
font-size: 20px;
font-weight: 600;
}
.redirect-offer-details p {
margin: 0;
opacity: 0.8;
font-size: 14px;
}
/* Countdown Timer */
.redirect-countdown-section {
text-align: center;
margin: 25px 0;
}
.redirect-countdown-label {
margin: 0 0 15px;
font-weight: 600;
}
.redirect-countdown-timer {
display: flex;
justify-content: center;
gap: 10px;
}
.redirect-countdown-item {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 10px;
min-width: 60px;
backdrop-filter: blur(10px);
}
.redirect-countdown-number {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--popup-accent);
}
.redirect-countdown-item .countdown-label {
font-size: 12px;
opacity: 0.8;
margin: 5px 0 0;
font-weight: 500;
}
/* Redirect Countdown */
.redirect-auto-countdown {
font-size: 16px;
margin: 15px 0;
color: var(--popup-accent);
font-weight: 600;
}
.redirect-message {
font-size: 14px;
opacity: 0.8;
margin-bottom: 20px;
}
/* Email Form */
.redirect-email-form {
margin: 30px 0 20px;
}
.redirect-form-group {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.redirect-form-input {
flex: 1;
padding: 15px 20px;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: var(--popup-text);
font-size: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.redirect-form-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.redirect-form-input:focus {
outline: none;
border-color: var(--popup-accent);
background: rgba(255, 255, 255, 0.15);
}
.redirect-submit-btn {
padding: 15px 25px;
background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.redirect-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.redirect-submit-btn.loading {
opacity: 0.7;
cursor: not-allowed;
}
.redirect-form-note {
font-size: 13px;
opacity: 0.7;
margin: 0;
}
/* Trust Badges */
.redirect-trust-badges {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
flex-wrap: wrap;
}
.redirect-trust-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
opacity: 0.8;
}
/* Footer */
.redirect-popup-footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.redirect-footer-text {
font-size: 12px;
opacity: 0.6;
margin: 0;
}
/* Success State */
.redirect-success-state {
display: none;
text-align: center;
padding: 40px 30px;
}
.redirect-success-icon {
font-size: 60px;
margin-bottom: 20px;
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.redirect-success-title {
font-size: 24px;
font-weight: 700;
margin: 0 0 15px;
color: var(--popup-accent);
}
.redirect-success-message {
font-size: 18px;
margin: 0 0 10px;
}
.redirect-discount-code {
color: var(--popup-accent);
font-size: 20px;
font-weight: bold;
background: rgba(255, 255, 255, 0.1);
padding: 5px 15px;
border-radius: 8px;
display: inline-block;
margin: 5px 0;
}
.redirect-success-note {
font-size: 14px;
opacity: 0.8;
margin: 0 0 25px;
}
.redirect-success-btn {
padding: 15px 30px;
background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.redirect-success-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Error State */
.redirect-form-error {
color: #ff6b6b;
font-size: 14px;
margin-top: 10px;
padding: 10px;
background: rgba(255, 107, 107, 0.1);
border-radius: 8px;
border-left: 3px solid #ff6b6b;
display: none;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.redirect-popup-main {
width: 95%;
max-width: none;
margin: 20px;
}
.redirect-popup-content {
padding: 30px 20px 20px;
}
.redirect-form-group {
flex-direction: column;
}
.redirect-offer-section {
flex-direction: column;
text-align: center;
gap: 15px;
}
.redirect-trust-badges {
gap: 15px;
}
.redirect-countdown-timer {
gap: 5px;
}
.redirect-countdown-item {
min-width: 50px;
padding: 8px;
}
.redirect-countdown-number {
font-size: 20px;
}
}
/* Hide on mobile if disabled */
{% unless section.settings.show_mobile %}
@media (max-width: 768px) {
.redirect-popup-container {
display: none !important;
}
}
{% endunless %}
</style>
<div class="redirect-popup-container"
data-section-type="redirect-popup"
data-section-id="{{ section.id }}"
data-delay="{{ section.settings.show_delay }}"
data-exit-intent="{{ section.settings.exit_intent }}"
data-countdown-date="{{ section.settings.countdown_date }}"
data-discount-code="{{ section.settings.discount_code }}"
data-enable-popup="{{ section.settings.enable_popup }}"
data-show-countdown="{{ section.settings.show_countdown }}"
data-show-mobile="{{ section.settings.show_mobile }}"
data-redirect-url="{{ section.settings.redirect_url }}"
data-auto-redirect="{{ section.settings.auto_redirect }}"
data-redirect-delay="{{ section.settings.redirect_delay }}">
<div class="redirect-popup-backdrop"></div>
<div class="redirect-popup-main">
<button class="redirect-popup-close" aria-label="Close popup">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M15.89 14.696l-4.734-4.734 4.717-4.717c.4-.4.37-1.085-.03-1.485s-1.085-.43-1.485-.03L9.69 8.447 4.974 3.73c-.4-.4-1.085-.37-1.485.03s-.43 1.085-.03 1.485l4.717 4.717-4.734 4.734c-.4.4-.37 1.085.03 1.485s1.085.43 1.485.03l4.734-4.734 4.734 4.734c.4.4 1.085.37 1.485-.03s.43-1.085.03-1.485z"/>
</svg>
</button>
<!-- Popup Content -->
<div class="redirect-popup-content">
<div class="redirect-popup-header">
<div class="redirect-icons">
<span class="icon">🎄</span>
<span class="icon">🎁</span>
<span class="icon">❄️</span>
</div>
<h2 class="redirect-popup-title">{{ section.settings.title }}</h2>
<p class="redirect-popup-subtitle">{{ section.settings.subtitle }}</p>
</div>
<div class="redirect-popup-body">
<!-- Offer Section -->
<div class="redirect-offer-section">
<div class="redirect-discount-badge">
<span class="redirect-discount-amount">{{ section.settings.discount_amount }}</span>
<span class="redirect-discount-text">OFF</span>
</div>
<div class="redirect-offer-details">
<h3>{{ section.settings.offer_title }}</h3>
<p>{{ section.settings.offer_description }}</p>
</div>
</div>
<!-- Countdown Timer -->
{%- if section.settings.show_countdown -%}
<div class="redirect-countdown-section">
<p class="redirect-countdown-label">{{ section.settings.countdown_text }}</p>
<div class="redirect-countdown-timer">
<div class="redirect-countdown-item">
<span class="redirect-countdown-number" id="days-{{ section.id }}">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="redirect-countdown-item">
<span class="redirect-countdown-number" id="hours-{{ section.id }}">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="redirect-countdown-item">
<span class="redirect-countdown-number" id="minutes-{{ section.id }}">00</span>
<span class="countdown-label">Mins</span>
</div>
<div class="redirect-countdown-item">
<span class="redirect-countdown-number" id="seconds-{{ section.id }}">00</span>
<span class="countdown-label">Secs</span>
</div>
</div>
</div>
{%- endif -%}
<!-- Email Capture Form -->
<form class="redirect-email-form" id="redirectEmailForm-{{ section.id }}">
<div class="redirect-form-group">
<input type="email" class="redirect-form-input" placeholder="{{ section.settings.email_placeholder }}" required>
<button type="submit" class="redirect-submit-btn">
<span class="btn-text">{{ section.settings.button_text }}</span>
<span class="btn-icon">🎁</span>
</button>
</div>
<div class="redirect-form-error" id="formError-{{ section.id }}"></div>
<p class="redirect-form-note">{{ section.settings.form_note }}</p>
</form>
<!-- Trust Badges -->
{%- if section.blocks.size > 0 -%}
<div class="redirect-trust-badges">
{%- for block in section.blocks -%}
<div class="redirect-trust-item" {{ block.shopify_attributes }}>
<span class="trust-icon">{{ block.settings.badge_icon }}</span>
<span class="trust-text">{{ block.settings.badge_text }}</span>
</div>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<div class="redirect-popup-footer">
<p class="redirect-footer-text">{{ section.settings.footer_text }}</p>
</div>
</div>
<!-- Success State with Redirect -->
<div class="redirect-success-state">
<div class="redirect-success-icon">🎉</div>
<h3 class="redirect-success-title">Congratulations!</h3>
<p class="redirect-success-message">{{ section.settings.success_message }}</p>
<p class="redirect-discount-code">{{ section.settings.discount_code }}</p>
<div class="redirect-auto-countdown" id="redirectCountdown-{{ section.id }}"></div>
<p class="redirect-success-note">Your discount is ready to use!</p>
<button class="redirect-success-btn">Start Shopping Now!</button>
</div>
</div>
</div>
<script>
// Redirect Popup JavaScript
document.addEventListener('DOMContentLoaded', function() {
const popup = document.querySelector('.redirect-popup-container');
if (!popup) return;
const closeBtn = popup.querySelector('.redirect-popup-close');
const backdrop = popup.querySelector('.redirect-popup-backdrop');
const successBtn = popup.querySelector('.redirect-success-btn');
const form = popup.querySelector('.redirect-email-form');
const errorDiv = popup.querySelector('.redirect-form-error');
const delay = parseInt(popup.dataset.delay) * 1000 || 3000;
const exitIntent = popup.dataset.exitIntent === 'true';
const countdownDate = popup.dataset.countdownDate;
const discountCode = popup.dataset.discountCode;
const redirectUrl = popup.dataset.redirectUrl || '/collections/all';
const autoRedirect = popup.dataset.autoRedirect === 'true';
const redirectDelay = parseInt(popup.dataset.redirectDelay) * 1000 || 5000;
let redirectTimer;
// Show popup after delay
setTimeout(() => {
if (!localStorage.getItem('redirect_popup_subscribed')) {
popup.style.display = 'block';
}
}, delay);
// Exit intent
if (exitIntent) {
document.addEventListener('mouseleave', (e) => {
if (e.clientY < 0 && popup.style.display === 'none' && !localStorage.getItem('redirect_popup_subscribed')) {
popup.style.display = 'block';
}
});
}
// Close events
closeBtn.addEventListener('click', () => popup.style.display = 'none');
backdrop.addEventListener('click', () => popup.style.display = 'none');
// Form submission with redirect
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
const emailInput = this.querySelector('.redirect-form-input');
const submitBtn = this.querySelector('.redirect-submit-btn');
const email = emailInput.value.trim();
// Hide any previous errors
hideError();
// Validation
if (!isValidEmail(email)) {
showError('Please enter a valid email address');
return;
}
// Show loading state
setLoadingState(true, submitBtn);
try {
// Save email and process
saveEmailLocally(email, discountCode);
// Show success with redirect options
showSuccessStateWithRedirect();
// Remember user
localStorage.setItem('redirect_popup_subscribed', 'true');
// Track conversion
trackConversion(email);
// Setup auto-redirect if enabled
if (autoRedirect) {
startAutoRedirectCountdown();
}
} catch (error) {
console.error('Submission failed:', error);
showError('Failed to submit. Please try again.');
setLoadingState(false, submitBtn);
}
});
}
// Success button redirect
successBtn.addEventListener('click', function() {
redirectToStore();
});
// Countdown timer
if (countdownDate) {
function updateCountdown() {
const targetDate = new Date(countdownDate).getTime();
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
popup.querySelector('.redirect-countdown-section').innerHTML = '<p>Offer expired!</p>';
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById(`days-{{ section.id }}`).textContent = days.toString().padStart(2, '0');
document.getElementById(`hours-{{ section.id }}`).textContent = hours.toString().padStart(2, '0');
document.getElementById(`minutes-{{ section.id }}`).textContent = minutes.toString().padStart(2, '0');
document.getElementById(`seconds-{{ section.id }}`).textContent = seconds.toString().padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
}
// Helper Functions
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
function setLoadingState(loading, button) {
if (loading) {
button.disabled = true;
button.classList.add('loading');
button.querySelector('.btn-text').textContent = 'Claiming Offer...';
} else {
button.disabled = false;
button.classList.remove('loading');
button.querySelector('.btn-text').textContent = '{{ section.settings.button_text }}';
}
}
function showError(message) {
errorDiv.textContent = message;
errorDiv.style.display = 'block';
}
function hideError() {
errorDiv.style.display = 'none';
}
function showSuccessStateWithRedirect() {
popup.querySelector('.redirect-popup-content').style.display = 'none';
popup.querySelector('.redirect-success-state').style.display = 'block';
// Update success button text
const successBtn = popup.querySelector('.redirect-success-btn');
successBtn.textContent = 'Start Shopping Now!';
}
function startAutoRedirectCountdown() {
let secondsLeft = redirectDelay / 1000;
const redirectCountdown = document.getElementById(`redirectCountdown-{{ section.id }}`);
redirectTimer = setInterval(() => {
secondsLeft--;
redirectCountdown.textContent = `Redirecting in ${secondsLeft} seconds...`;
if (secondsLeft <= 0) {
clearInterval(redirectTimer);
redirectToStore();
}
}, 1000);
}
function redirectToStore() {
// Method 1: Redirect to collections with discount parameter
const url = new URL(redirectUrl, window.location.origin);
url.searchParams.set('discount', discountCode);
// Method 2: Alternative - redirect to cart with discount
// window.location.href = '/cart?discount=' + discountCode;
// Method 3: Redirect to specific product collection
// window.location.href = '/collections/holiday-sale?discount=' + discountCode;
window.location.href = url.toString();
}
function saveEmailLocally(email, discountCode) {
const subscribers = JSON.parse(localStorage.getItem('redirect_subscribers') || '[]');
subscribers.push({
email: email,
discountCode: discountCode,
date: new Date().toISOString(),
source: 'redirect_popup',
redirectUrl: redirectUrl
});
localStorage.setItem('redirect_subscribers', JSON.stringify(subscribers));
}
function trackConversion(email) {
// Google Analytics
if (typeof gtag !== 'undefined') {
gtag('event', 'redirect_popup_conversion', {
'event_category': 'engagement',
'event_label': 'Store Redirect',
'email': email,
'discount_code': discountCode
});
}
// Facebook Pixel
if (typeof fbq !== 'undefined') {
fbq('track', 'Lead', {
content_name: 'Holiday Discount Redirect',
content_category: 'Store Redirect',
email: email,
discount_code: discountCode
});
}
// Shopify Analytics
if (window.Shopify && window.Shopify.analytics) {
window.Shopify.analytics.reportAdditionalEvent('redirect_popup_conversion', {
email: email,
discount_code: discountCode,
redirect_url: redirectUrl
});
}
console.log('Redirect conversion tracked for:', email);
}
});
</script>
{%- endif -%}
{% schema %}
{
"name": "🚀 Redirect Popup",
"class": "redirect-popup-section",
"settings": [
{
"type": "header",
"content": "Popup Activation"
},
{
"type": "checkbox",
"id": "enable_popup",
"label": "Enable Redirect Popup",
"default": true
},
{
"type": "number",
"id": "show_delay",
"label": "Show Delay (seconds)",
"default": 3,
"info": "Time before popup appears"
},
{
"type": "checkbox",
"id": "exit_intent",
"label": "Enable Exit Intent",
"default": true,
"info": "Show popup when user tries to leave"
},
{
"type": "checkbox",
"id": "show_mobile",
"label": "Show on Mobile",
"default": true
},
{
"type": "header",
"content": "Content Settings"
},
{
"type": "text",
"id": "title",
"label": "Popup Title",
"default": "Holiday Special! 🎁"
},
{
"type": "text",
"id": "subtitle",
"label": "Popup Subtitle",
"default": "Claim your exclusive discount now!"
},
{
"type": "text",
"id": "discount_amount",
"label": "Discount Amount",
"default": "15%",
"info": "e.g., 15%, $10, 20OFF"
},
{
"type": "text",
"id": "offer_title",
"label": "Offer Title",
"default": "Plus Free Shipping!"
},
{
"type": "text",
"id": "offer_description",
"label": "Offer Description",
"default": "On all orders over $50"
},
{
"type": "text",
"id": "countdown_text",
"label": "Countdown Text",
"default": "Offer ends in:"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Claim My Discount"
},
{
"type": "text",
"id": "email_placeholder",
"label": "Email Placeholder",
"default": "Enter your email address"
},
{
"type": "text",
"id": "form_note",
"label": "Form Note",
"default": "We'll redirect you to the store with your discount"
},
{
"type": "text",
"id": "success_message",
"label": "Success Message",
"default": "Your discount code is ready!"
},
{
"type": "text",
"id": "discount_code",
"label": "Discount Code",
"default": "HOLIDAY15"
},
{
"type": "text",
"id": "footer_text",
"label": "Footer Text",
"default": "Limited time offer. Terms apply."
},
{
"type": "header",
"content": "Redirect Settings"
},
{
"type": "url",
"id": "redirect_url",
"label": "Redirect URL",
"default": "/collections/all",
"info": "Where to redirect after claiming discount"
},
{
"type": "checkbox",
"id": "auto_redirect",
"label": "Auto Redirect",
"default": true,
"info": "Automatically redirect after claiming discount"
},
{
"type": "number",
"id": "redirect_delay",
"label": "Redirect Delay (seconds)",
"default": 5,
"info": "Time before auto-redirect happens"
},
{
"type": "header",
"content": "Countdown Timer"
},
{
"type": "checkbox",
"id": "show_countdown",
"label": "Show Countdown Timer",
"default": true
},
{
"type": "text",
"id": "countdown_date",
"label": "Countdown End Date",
"default": "2024-12-31",
"info": "Format: YYYY-MM-DD"
},
{
"type": "header",
"content": "Design Settings"
},
{
"type": "color",
"id": "bg_color",
"label": "Background Color",
"default": "#1a2a3a"
},
{
"type": "color",
"id": "bg_color_secondary",
"label": "Background Secondary",
"default": "#2d4a5c"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent Color",
"default": "#ffd700"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color",
"label": "Button Color",
"default": "#ff6b6b"
},
{
"type": "color",
"id": "button_hover_color",
"label": "Button Hover Color",
"default": "#ff8e53"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#ffd700"
}
],
"blocks": [
{
"type": "trust_badge",
"name": "Trust Badge",
"settings": [
{
"type": "text",
"id": "badge_icon",
"label": "Badge Icon",
"default": "🔒",
"info": "Use emoji or icon code"
},
{
"type": "text",
"id": "badge_text",
"label": "Badge Text",
"default": "Secure & Safe"
}
]
}
],
"presets": [
{
"name": "🚀 Redirect Popup",
"category": "Promotional",
"blocks": [
{
"type": "trust_badge",
"settings": {
"badge_icon": "🔒",
"badge_text": "No Spam"
}
},
{
"type": "trust_badge",
"settings": {
"badge_icon": "⚡",
"badge_text": "Instant Redirect"
}
},
{
"type": "trust_badge",
"settings": {
"badge_icon": "🎯",
"badge_text": "Exclusive Offer"
}
}
]
}
]
}
{% endschema %}Step 3: Include Popup in Your Theme
3.1 Add to Theme.liquid
In your Shopify theme editor, open layout/theme.liquid and add this right before the closing </body> tag:
<!-- Popup Section -->
{% render 'discount -popup' %}3.2 Optional: Add Analytics Tracking
For better conversion tracking, add this to your theme.liquid in the <head> section:
<!-- Redirect Popup Analytics -->
<script>
window.redirectPopupSettings = {
trackConversions: true,
autoRedirect: {{ section.settings.auto_redirect | default: true }},
redirectDelay: {{ section.settings.redirect_delay | default: 5 }} * 1000
};
</script>Step 4: Configure in Theme Editor
4.1 Access Theme Customizer
- Go to Shopify Admin → Online Store → Themes
- Click Customize on your active theme
- Navigate to Sections in the sidebar
4.2 Configure Redirect Settings
- Find “🚀 Redirect Popup” in the sections list
- Expand “Redirect Settings” section
- Configure these key settings:
Redirect Configuration:
- ✅ Enable Redirect Popup: ON
- Redirect URL:
/collections/all(or your preferred page) - ✅ Auto Redirect: ON (recommended)
- Redirect Delay: 5 seconds
Content Settings:
- Popup Title: “Holiday Special! 🎁”
- Discount Amount: “15%”
- Button Text: “Claim My Discount & Shop Now”
- Discount Code: “HOLIDAY15”
Design Settings:
- Background Color: #1a2a3a
- Accent Color: #ffd700
- Button Color: #ff6b6b
Step 5: Test Your Implementation
5.1 Test Popup Display & Functionality
- Visit your store homepage
- Wait for popup (3-second delay)
- Enter test email and submit
- Verify auto-redirect happens after 5 seconds
- Check URL contains discount parameter
5.2 Test Discount Code Application
- Add products to cart (minimum $50)
- Proceed to checkout
- Verify discount code
HOLIDAY15applies automatically - Complete test purchase to ensure everything works
5.3 Mobile Testing
- Open store on mobile device
- Test popup appearance and responsiveness
- Verify redirect works on mobile
- Test checkout process on mobile
Advanced Redirect Strategies
Strategy 1: Product-Specific Redirects
For product-focused campaigns:
// Redirect to specific product window.location.href = '/products/your-product?discount=HOLIDAY15'; // Redirect to collection window.location.href = '/collections/holiday-sale?discount=HOLIDAY15';
Strategy 2: Cart Redirect with Pre-Applied Discount
Modify the redirect function:
function redirectToStore() {
// First add discount to cart, then redirect
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Apply discount via AJAX
return fetch('/cart/update.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
discount_code: 'HOLIDAY15'
})
});
})
.then(() => {
// Redirect to cart with discount applied
window.location.href = '/cart';
});
}Strategy 3: Smart Redirect Based on User Behavior
function smartRedirect() {
// Check user's previous behavior
const userHistory = JSON.parse(localStorage.getItem('user_behavior') || '{}');
let redirectUrl = '/collections/all';
if (userHistory.viewedProducts && userHistory.viewedProducts.length > 0) {
// Redirect to last viewed product
redirectUrl = userHistory.viewedProducts[userHistory.viewedProducts.length - 1];
} else if (userHistory.searchedTerms && userHistory.searchedTerms.length > 0) {
// Redirect to search results
redirectUrl = '/search?q=' + encodeURIComponent(userHistory.searchedTerms[0]);
}
redirectUrl += '?discount=' + discountCode;
window.location.href = redirectUrl;
}Performance Optimization Tips
1. Reduce Redirect Delay for High-Intent Pages
- Homepage: 5 seconds
- Product pages: 3 seconds
- Cart page: 2 seconds
2. Segment Your Redirects
// Different redirects for different traffic sources
const trafficSource = getTrafficSource();
switch(trafficSource) {
case 'social_media':
redirectUrl = '/collections/social-exclusive';
break;
case 'email':
redirectUrl = '/collections/email-special';
break;
default:
redirectUrl = '/collections/all';
}3. A/B Test Redirect Destinations
Test different redirect URLs to find what converts best:
/collections/all/collections/bestsellers/collections/holiday-sale/pages/holiday-gift-guide
Expected Results & Metrics
After implementing redirect popups, track these metrics:
📊 Conversion Metrics
- Popup Conversion Rate: 25-40% (email submissions/popup views)
- Redirect Success Rate: 85-95% (successful redirects/submissions)
- Purchase Conversion: 15-25% (purchases/redirects)
🎯 Performance Benchmarks
- Average Order Value: $75-125 (with discount)
- Mobile Conversion Rate: 20-35%
- Exit Intent Conversion: 30-45%
📈 Revenue Impact
- Immediate Sales Lift: 15-30%
- Customer Acquisition Cost: Reduced by 20-40%
- Return Customer Rate: 25-35% increase
Troubleshooting Common Issues
❌ Redirect Not Working
- Check redirect URL format
- Verify discount code is active
- Test on different browsers
❌ Popup Not Appearing on Mobile
- Ensure
show_mobilesetting is enabled - Test on actual mobile devices
- Check CSS media queries
❌ Discount Not Applying
- Verify discount code in Shopify admin
- Check minimum order requirements
- Test with sufficient cart value
❌ Auto-Redirect Too Fast/Slow
- Adjust
redirect_delaysetting - Consider user experience
- Test different timing options
Conclusion
You’ve now successfully implemented a high-converting redirect popup that drives immediate sales on your Shopify store! This powerful setup:
✅ Creates instant purchase opportunities
✅ Applies discounts seamlessly
✅ Works across all devices
✅ Provides valuable analytics
✅ Boosts conversion rates significantly
The combination of urgency, clear value proposition, and seamless redirect experience creates a proven sales machine for your store.
Pro Tip: Continuously A/B test different elements:
- Redirect destinations (collections vs products)
- Auto-redirect timing (3s vs 5s vs 7s)
- Discount amounts (10% vs 15% vs 20%)
- Popup designs and colors