Shopify Black Friday Sale – Countdown & Promotions
Create an engaging Black Friday sale section for your Shopify store. Includes a countdown timer, promotional text, and a call-to-action button. Fully customizable and responsive.
Liquid Code
<!-- ======================================== Section Name: Black Friday Sale Tech Stack: Liquid, HTML, CSS, JavaScript What This Section Does: - Displays a promotional Black Friday sale section with a customizable countdown timer. - Includes a title, description, call-to-action button, and featured image. - Dynamically updates the countdown timer and displays a "Sale is Live" message when the timer ends. - Fully responsive design for mobile and desktop compatibility. Promotion: Boost your Shopify store's sales with an interactive Black Friday sale section. Create urgency with a countdown timer and drive conversions with engaging visuals and CTAs. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/). ======================================== --> <section class="black-friday-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"> <div class="black-friday-container page-width"> <div class="black-friday-content"> <h1 class="black-friday-title" style="color: {{ section.settings.title_color }};">{{ section.settings.title }}</h1> <p class="black-friday-description" style="color: {{ section.settings.text_color }};">{{ section.settings.description }}</p> {% if section.settings.show_countdown %} <div class="countdown-timer"> <div class="countdown-block"> <div class="countdown-number" id="days">01</div> <div class="countdown-label">DAYS</div> </div> <div class="countdown-block"> <div class="countdown-number" id="hours">01</div> <div class="countdown-label">HRS</div> </div> <div class="countdown-block"> <div class="countdown-number" id="minutes">15</div> <div class="countdown-label">MINS</div> </div> <div class="countdown-block"> <div class="countdown-number" id="seconds">00</div> <div class="countdown-label">SECS</div> </div> </div> {% endif %} <a href="{{ section.settings.button_link }}" class="shop-offers-button"> {{ section.settings.button_text }} <span class="button-arrow">→</span> </a> </div> <div class="black-friday-image"> {% if section.settings.image != blank %} <img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.title }}" /> {% endif %} </div> </div> </section> {% if section.settings.show_countdown %} <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 immediately if date has passed if (distance < 0) { // Hide the countdown blocks const countdownBlocks = document.querySelectorAll('.countdown-block'); countdownBlocks.forEach(block => { block.style.display = 'none'; }); // Add animated sale is live message const countdownTimer = document.querySelector('.countdown-timer'); const saleIsLive = document.createElement('div'); saleIsLive.className = 'sale-is-live'; saleIsLive.innerHTML = 'SALE IS LIVE!'; countdownTimer.appendChild(saleIsLive); // Add sparkle animation addSparkleEffect(countdownTimer); return; // No need to start countdown if already passed } // Update the countdown every second 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 is finished if (distance < 0) { clearInterval(countdownTimer); // Hide the countdown blocks const countdownBlocks = document.querySelectorAll('.countdown-block'); countdownBlocks.forEach(block => { block.style.display = 'none'; }); // Add animated sale is live message const countdownTimerElement = document.querySelector('.countdown-timer'); const saleIsLive = document.createElement('div'); saleIsLive.className = 'sale-is-live'; saleIsLive.innerHTML = 'SALE IS LIVE!'; countdownTimerElement.appendChild(saleIsLive); // Add sparkle animation addSparkleEffect(countdownTimerElement); } }, 1000); // Function to add sparkle effect function addSparkleEffect(element) { // Create sparkle container const sparkleContainer = document.createElement('div'); sparkleContainer.className = 'sparkle-container'; element.appendChild(sparkleContainer); // Add multiple sparkles for (let i = 0; i < 15; i++) { const sparkle = document.createElement('div'); sparkle.className = 'sparkle'; sparkle.style.left = Math.random() * 100 + '%'; sparkle.style.top = Math.random() * 100 + '%'; sparkle.style.animationDelay = Math.random() * 2 + 's'; sparkleContainer.appendChild(sparkle); } } }); </script> {% endif %} <style> /* Reset margins for headings and paragraphs */ h1, h2, h3, h4, h5, h6, p { margin: 0; } .black-friday-section { width: 100%; } .black-friday-container { display: flex; align-items: center; max-width: 1200px; margin: 0 auto; } .black-friday-content { flex: 1; padding-right: 40px; } .black-friday-title { font-size: 48px; font-weight: bold; background: linear-gradient(90deg, #c17eef 0%, #6b8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; max-width: 250px; letter-spacing: 0; line-height: 1; } .black-friday-description { font-size: 14px; line-height: 1.4; margin-bottom: 30px; letter-spacing: 0; } .sale-is-live { color: #ff0000; font-weight: bold; font-size: 24px; text-align: center; width: 100%; animation: popIn 0.5s forwards, pulse 1.5s infinite 0.5s; transform: scale(0); } @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } .sparkle-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .sparkle { position: absolute; width: 8px; height: 8px; background-color: #ffdd00; border-radius: 50%; opacity: 0; animation: sparkle 2s infinite; } @keyframes sparkle { 0% { transform: scale(0); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .countdown-timer { display: flex; margin-bottom: 30px; background-color: #ffffff; border-radius: 10px; padding: 15px; width: fit-content; } .countdown-block { text-align: center; padding: 0 20px; } .countdown-number { font-size: 2.5rem; font-weight: bold; color: #000000; } .countdown-label { font-size: 14px; font-weight: 600; color: {{ section.settings.countdown_label_color }}; margin-top: 5px; line-height: 1.4; letter-spacing: 0; } .shop-offers-button { display: inline-flex; align-items: center; background-color: #000000; color: #ffffff; padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .shop-offers-button:hover { background-color: #333333; } .button-arrow { margin-left: 10px; } .black-friday-image { flex: 1; } .black-friday-image img { width: 100%; border-radius: 10px; height: 600px; object-fit: cover; } @media screen and (max-width: 768px) { .black-friday-container { flex-direction: column; } .black-friday-content { padding-right: 0; margin-bottom: 30px; text-align: center; } .black-friday-title { font-size: 2.5rem; margin: 14px auto; } .countdown-timer { justify-content: center; margin: 30px auto; } .countdown-block { padding: 0 10px; } .countdown-number { font-size: 1.8rem; } } </style> {% schema %} { "name": "Black Friday Sale", "settings": [ { "type": "color", "id": "background_color", "label": "Background Color", "default": "#f9f4ff" }, { "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": "text", "id": "title", "label": "Title", "default": "Lorem Ipsum Sale" }, { "type": "color", "id": "title_color", "label": "Title Color", "default": "#6b8cff" }, { "type": "textarea", "id": "description", "label": "Description", "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo." }, { "type": "color", "id": "text_color", "label": "Text Color", "default": "#333333" }, { "type": "checkbox", "id": "show_countdown", "label": "Show Countdown Timer", "default": true }, { "type": "text", "id": "countdown_date", "label": "Countdown End Date (Format: YYYY-MM-DD)", "default": "2025-11-29" }, { "type": "color", "id": "countdown_label_color", "label": "Countdown Label Color", "default": "#c17eef" }, { "type": "text", "id": "button_text", "label": "Button Text", "default": "Lorem Ipsum" }, { "type": "url", "id": "button_link", "label": "Button Link" }, { "type": "image_picker", "id": "image", "label": "Featured Image" } ], "presets": [ { "name": "Black Friday Sale", "category": "Promotional" } ] } {% endschema %}