Shopify Coming Soon Section – Countdown to Launch
Build anticipation with a "Coming Soon" section for your Shopify store. Features a countdown timer, product image, and call-to-action button. Fully customizable and responsive.
Liquid Code
<!-- ======================================== Section Name: Coming Soon Tech Stack: Liquid, HTML, CSS, JavaScript What This Section Does: - Displays a countdown timer for an upcoming product launch or event. - Includes a customizable heading, product image, and call-to-action button. - Dynamically updates the countdown timer and displays celebration effects when the timer ends. - Fully responsive design for mobile and desktop users. Promotion: Create excitement for your next big launch with a "Coming Soon" section. Engage customers with a countdown and drive early interest. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/). ======================================== --> <section class="coming-soon-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"> <div class="coming-soon-container page-width"> <!-- Countdown Timer --> <div class="countdown-wrapper"> <div class="countdown-block days-block"> <div class="countdown-number" id="days">00</div> <div class="countdown-label">Days</div> </div> <div class="countdown-block hours-block"> <div class="countdown-number" id="hours">00</div> <div class="countdown-label">Hours</div> </div> <!-- Center Product Image --> <div class="product-image-container"> {% if section.settings.product_image != blank %} <img src="{{ section.settings.product_image | img_url: 'master' }}" alt="{{ section.settings.heading_text }}" class="product-image"> {% endif %} </div> <div class="countdown-block minutes-block"> <div class="countdown-number" id="minutes">00</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-block seconds-block"> <div class="countdown-number" id="seconds">00</div> <div class="countdown-label">Seconds</div> </div> </div> <!-- Heading Text --> <div class="coming-soon-heading"> <h2 style="color: {{ section.settings.heading_color }};">{{ section.settings.heading_text }}</h2> </div> <!-- CTA Button --> <div class="cta-button-container"> <a href="{{ section.settings.button_link }}" class="cta-button"> {{ section.settings.button_text }} <span class="button-arrow">→</span> </a> </div> </div> </section> <script> document.addEventListener('DOMContentLoaded', function() { // Set the countdown date from text input const countdownDateStr = "{{ section.settings.countdown_date }}"; const countdownDate = new Date(countdownDateStr).getTime(); const now = new Date().getTime(); const distance = countdownDate - now; // Check if countdown is already over if (distance < 0) { // Hide countdown and show celebration const countdownWrapper = document.querySelector('.countdown-wrapper'); countdownWrapper.style.display = 'none'; // Create celebration container const celebrationContainer = document.createElement('div'); celebrationContainer.className = 'celebration-container'; celebrationContainer.innerHTML = '<div class="celebration-message">It\'s Here!</div>'; // Add confetti/celebration elements for (let i = 0; i < 50; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = Math.random() * 100 + '%'; confetti.style.animationDelay = Math.random() * 3 + 's'; confetti.style.backgroundColor = ['#ffcc00', '#ff6699', '#33ccff', '#99ff66'][Math.floor(Math.random() * 4)]; celebrationContainer.appendChild(confetti); } // Insert celebration before the heading const heading = document.querySelector('.coming-soon-heading'); heading.parentNode.insertBefore(celebrationContainer, heading); } else { // Start countdown const countdownTimer = setInterval(function() { const now = new Date().getTime(); const distance = countdownDate - now; // Calculate days, hours, minutes, seconds 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); // Display the results with leading zeros document.getElementById("days").innerHTML = days < 10 ? "0" + days : days; document.getElementById("hours").innerHTML = hours < 10 ? "0" + hours : hours; document.getElementById("minutes").innerHTML = minutes < 10 ? "0" + minutes : minutes; document.getElementById("seconds").innerHTML = seconds < 10 ? "0" + seconds : seconds; // If the countdown finishes during the session if (distance < 0) { clearInterval(countdownTimer); // Hide countdown and show celebration const countdownWrapper = document.querySelector('.countdown-wrapper'); countdownWrapper.style.display = 'none'; // Create celebration container const celebrationContainer = document.createElement('div'); celebrationContainer.className = 'celebration-container'; celebrationContainer.innerHTML = '<div class="celebration-message">It\'s Here!</div>'; // Add confetti/celebration elements for (let i = 0; i < 50; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = Math.random() * 100 + '%'; confetti.style.animationDelay = Math.random() * 3 + 's'; confetti.style.backgroundColor = ['#ffcc00', '#ff6699', '#33ccff', '#99ff66'][Math.floor(Math.random() * 4)]; celebrationContainer.appendChild(confetti); } // Insert celebration before the heading const heading = document.querySelector('.coming-soon-heading'); heading.parentNode.insertBefore(celebrationContainer, heading); } }, 1000); } }); </script> <style> /* Reset margins for headings and paragraphs */ h1, h2, h3, h4, h5, h6, p { margin: 0; } .coming-soon-section { width: 100%; position: relative; } .coming-soon-container { max-width: 1200px; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; } .countdown-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; margin-bottom: 40px; } .countdown-block { text-align: center; padding: 0 20px; z-index: 2; } .countdown-number { font-size: 5rem; font-weight: bold; color: #ffffff; } .countdown-label { font-size: 1rem; color: #ffffff; text-transform: uppercase; } .product-image-container { position: relative; z-index: 1; margin: 0 20px; } .product-image { max-height: 600px; width: auto; } .coming-soon-heading { text-align: center; margin-bottom: 30px; } .coming-soon-heading h2 { font-size: 3rem; font-weight: bold; color: #ffffff; } .cta-button-container { margin-bottom: 40px; } /* Hover animations */ .countdown-block { transition: transform 0.3s ease, filter 0.3s ease; } .countdown-block:hover { transform: translateY(-10px); filter: brightness(1.2); } .product-image-container { transition: transform 0.5s ease; } .product-image-container:hover { transform: scale(1.05); } .cta-button { transition: transform 0.3s ease, box-shadow 0.3s ease; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* Celebration styles */ .celebration-container { position: relative; height: 200px; width: 100%; overflow: hidden; margin-bottom: 30px; } .celebration-message { position: relative; z-index: 2; font-size: 3rem; font-weight: bold; color: #ffffff; text-align: center; animation: bounce 1s ease infinite alternate; } .confetti { position: absolute; width: 10px; height: 20px; top: -20px; animation: fall 3s linear infinite; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-15px); } } @keyframes fall { 0% { top: -20px; transform: rotate(0deg); } 100% { top: 100%; transform: rotate(360deg); } } .cta-button { display: inline-flex; align-items: center; background-color: #ffffff; color: #000000; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .button-arrow { margin-left: 10px; } @media screen and (max-width: 768px) { .countdown-wrapper { flex-wrap: wrap; } .countdown-block { padding: 10px; } .countdown-number { font-size: 3rem; } .product-image-container { order: -1; margin-bottom: 20px; width: 100%; text-align: center; } .product-image { max-height: 400px; } .coming-soon-heading h2 { font-size: 2rem; } } </style> {% schema %} { "name": "Coming Soon", "settings": [ { "type": "color", "id": "background_color", "label": "Background Color", "default": "#c0c0c0" }, { "type": "range", "id": "padding_top", "label": "Padding Top", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "padding_bottom", "label": "Padding Bottom", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "image_picker", "id": "product_image", "label": "Product Image" }, { "type": "text", "id": "heading_text", "label": "Heading Text", "default": "Be ready for our new drop." }, { "type": "color", "id": "heading_color", "label": "Heading Color", "default": "#ffffff" }, { "type": "text", "id": "countdown_date", "label": "Launch Date (Format: YYYY-MM-DD)", "default": "2025-12-31" }, { "type": "text", "id": "button_text", "label": "Button Text", "default": "Get early access" }, { "type": "url", "id": "button_link", "label": "Button Link" } ], "presets": [ { "name": "Coming Soon", "category": "Promotional" } ] } {% endschema %}