How To Add Flash Sale Promo Section In Shopify

Adding a Flash Sale section to your Shopify store is a powerful way to create urgency and boost conversions. By showcasing limited-time offers with countdown timers and eye-catching designs, you can encourage quicker buying decisions and make your store more dynamic and sales-driven.

Create a new section named Flash-Sale-Promo.liquid using the following code:

{% assign wsp_section_id = section.id | replace: '_', '' | downcase %}

{% style %}
  .flash-sale-container-{{ wsp_section_id }} {
    width: 100%;
    background-color: {{ section.settings.background_color }};
    border-radius: {{ section.settings.border_radius }}px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: {{ section.settings.layout_direction }};
    gap: 20px;
    align-items: center;
  }

  .flash-sale-content-{{ wsp_section_id }} {
    flex: 1;
    min-width: 0;
    z-index: 2;
  }

  .flash-sale-image-wrapper-{{ wsp_section_id }} {
    flex: 0 0 {{ section.settings.image_width }}%;
    max-width: {{ section.settings.image_width }}%;
    position: relative;
    z-index: 2;
  }

  .flash-sale-image-{{ wsp_section_id }} {
    width: 100%;
    height: auto;
    border-radius: {{ section.settings.border_radius }}px;
    object-fit: cover;
  }

  .flash-sale-image-placeholder-{{ wsp_section_id }} {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    border-radius: {{ section.settings.border_radius }}px;
  }

  .flash-sale-image-placeholder-{{ wsp_section_id }} svg {
    width: 80%;
    height: 80%;
  }

  .flash-sale-badge-{{ wsp_section_id }} {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: {{ section.settings.badge_color }};
    color: {{ section.settings.badge_text_color }};
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 3;
  }

  .flash-sale-title-{{ wsp_section_id }} {
    font-size: {{ section.settings.title_size }}px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: {{ section.settings.title_color }};
    line-height: 1.2;
  }

  .flash-sale-subtitle-{{ wsp_section_id }} {
    font-size: {{ section.settings.subtitle_size }}px;
    margin: 0 0 20px 0;
    color: {{ section.settings.text_color }};
    line-height: 1.5;
  }

  .flash-sale-timer-{{ wsp_section_id }} {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .timer-unit-{{ wsp_section_id }} {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: {{ section.settings.timer_background }};
    border-radius: 8px;
    padding: 10px;
    min-width: 60px;
  }

  .timer-value-{{ wsp_section_id }} {
    font-size: 20px;
    font-weight: 700;
    color: {{ section.settings.timer_text_color }};
  }

  .timer-label-{{ wsp_section_id }} {
    font-size: 12px;
    color: {{ section.settings.timer_text_color }};
    opacity: 0.8;
  }

  .flash-sale-coupon-{{ wsp_section_id }} {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .coupon-code-{{ wsp_section_id }} {
    background-color: {{ section.settings.coupon_background }};
    border: 2px dashed {{ section.settings.coupon_border }};
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    color: {{ section.settings.coupon_text_color }};
    letter-spacing: 1px;
    flex-grow: 1;
    text-align: center;
  }

  .copy-button-{{ wsp_section_id }} {
    background-color: {{ section.settings.button_color }};
    color: {{ section.settings.button_text_color }};
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
  }

  .copy-button-{{ wsp_section_id }}:hover {
    background-color: {{ section.settings.button_hover_color }};
  }

  .copy-button-{{ wsp_section_id }}:focus {
    outline: 2px solid {{ section.settings.button_text_color }};
    outline-offset: 2px;
  }

  .copy-button-{{ wsp_section_id }}:active {
    transform: scale(0.98);
  }

  .copy-feedback-{{ wsp_section_id }} {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: {{ section.settings.button_color }};
    color: {{ section.settings.button_text_color }};
    transform: translateY(100%);
    transition: transform 0.3s;
  }

  .copy-feedback-{{ wsp_section_id }}.show {
    transform: translateY(0);
  }

  .flash-sale-cta-{{ wsp_section_id }} {
    display: inline-section;
    background-color: {{ section.settings.cta_color }};
    color: {{ section.settings.cta_text_color }};
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
  }

  .flash-sale-cta-{{ wsp_section_id }}:hover {
    background-color: {{ section.settings.cta_hover_color }};
  }

  .flash-sale-cta-{{ wsp_section_id }}:focus {
    outline: 2px solid {{ section.settings.cta_text_color }};
    outline-offset: 2px;
  }

  .flash-sale-cta-{{ wsp_section_id }}:active {
    transform: scale(0.98);
  }

  @media screen and (max-width: 768px) {
    .flash-sale-container-{{ wsp_section_id }} {
      flex-direction: column;
      padding: 20px;
    }

    .flash-sale-image-wrapper-{{ wsp_section_id }} {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }

    .flash-sale-title-{{ wsp_section_id }} {
      font-size: {{ section.settings.title_size | minus: 4 }}px;
    }

    .flash-sale-subtitle-{{ wsp_section_id }} {
      font-size: {{ section.settings.subtitle_size | minus: 2 }}px;
    }

    .flash-sale-timer-{{ wsp_section_id }} {
      justify-content: center;
    }

    .timer-unit-{{ wsp_section_id }} {
      min-width: 50px;
      padding: 8px;
    }

    .timer-value-{{ wsp_section_id }} {
      font-size: 18px;
    }

    .timer-label-{{ wsp_section_id }} {
      font-size: 10px;
    }

    .flash-sale-coupon-{{ wsp_section_id }} {
      flex-direction: column;
    }

    .coupon-code-{{ wsp_section_id }} {
      width: 100%;
    }

    .copy-button-{{ wsp_section_id }} {
      width: 100%;
    }
  }
{% endstyle %}

<flash-sale-promo-{{ wsp_section_id }}
  class="flash-sale-container-{{ wsp_section_id }}"
  {{ section.shopify_attributes }}
>
  {% if section.settings.show_badge %}
    <div class="flash-sale-badge-{{ wsp_section_id }}">{{ section.settings.badge_text }}</div>
  {% endif %}

  {% if section.settings.layout_direction == 'row-reverse' or section.settings.layout_direction == 'column-reverse' %}
    <div class="flash-sale-content-{{ wsp_section_id }}">
      <h2 class="flash-sale-title-{{ wsp_section_id }}">{{ section.settings.title }}</h2>
      <p class="flash-sale-subtitle-{{ wsp_section_id }}">{{ section.settings.subtitle }}</p>

      {% if section.settings.show_timer %}
        <div class="flash-sale-timer-{{ wsp_section_id }}" data-end-date="{{ section.settings.end_date }}">
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-days>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Days</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-hours>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Hours</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-minutes>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Minutes</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-seconds>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Seconds</span>
          </div>
        </div>
      {% endif %}

      <div class="flash-sale-coupon-{{ wsp_section_id }}">
        <div class="coupon-code-{{ wsp_section_id }}" aria-label="Coupon code">{{ section.settings.coupon_code }}</div>
        <button
          class="copy-button-{{ wsp_section_id }}"
          aria-label="Copy coupon code to clipboard"
          data-coupon="{{ section.settings.coupon_code }}"
        >
          Copy Code
          <span class="copy-feedback-{{ wsp_section_id }}">Copied!</span>
        </button>
      </div>

      {% if section.settings.show_cta %}
        <a href="{{ section.settings.cta_link }}" class="flash-sale-cta-{{ wsp_section_id }}">
          {{- section.settings.cta_text -}}
        </a>
      {% endif %}
    </div>

    <div class="flash-sale-image-wrapper-{{ wsp_section_id }}">
      {% if section.settings.image %}
        <img
          src="{{ section.settings.image | image_url: width: 800 }}"
          alt="{{ section.settings.image.alt | escape }}"
          class="flash-sale-image-{{ wsp_section_id }}"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
          loading="lazy"
        >
      {% else %}
        <div class="flash-sale-image-placeholder-{{ wsp_section_id }}">
          {{ 'image' | placeholder_svg_tag }}
        </div>
      {% endif %}
    </div>
  {% else %}
    <div class="flash-sale-image-wrapper-{{ wsp_section_id }}">
      {% if section.settings.image %}
        <img
          src="{{ section.settings.image | image_url: width: 800 }}"
          alt="{{ section.settings.image.alt | escape }}"
          class="flash-sale-image-{{ wsp_section_id }}"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
          loading="lazy"
        >
      {% else %}
        <div class="flash-sale-image-placeholder-{{ wsp_section_id }}">
          {{ 'image' | placeholder_svg_tag }}
        </div>
      {% endif %}
    </div>

    <div class="flash-sale-content-{{ wsp_section_id }}">
      <h2 class="flash-sale-title-{{ wsp_section_id }}">{{ section.settings.title }}</h2>
      <p class="flash-sale-subtitle-{{ wsp_section_id }}">{{ section.settings.subtitle }}</p>

      {% if section.settings.show_timer %}
        <div class="flash-sale-timer-{{ wsp_section_id }}" data-end-date="{{ section.settings.end_date }}">
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-days>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Days</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-hours>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Hours</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-minutes>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Minutes</span>
          </div>
          <div class="timer-unit-{{ wsp_section_id }}">
            <span class="timer-value-{{ wsp_section_id }}" data-seconds>00</span>
            <span class="timer-label-{{ wsp_section_id }}">Seconds</span>
          </div>
        </div>
      {% endif %}
      <div class="flash-sale-coupon-{{ wsp_section_id }}">
        <div class="coupon-code-{{ wsp_section_id }}" aria-label="Coupon code">{{ section.settings.coupon_code }}</div>
        <button
          class="copy-button-{{ wsp_section_id }}"
          aria-label="Copy coupon code to clipboard"
          data-coupon="{{ section.settings.coupon_code }}"
        >
          Copy Code
          <span class="copy-feedback-{{ wsp_section_id }}">Copied!</span>
        </button>
      </div>

      {% if section.settings.show_cta %}
        <a href="{{ section.settings.cta_link }}" class="flash-sale-cta-{{ wsp_section_id }}">
          {{- section.settings.cta_text -}}
        </a>
      {% endif %}
    </div>
  {% endif %}
</flash-sale-promo-{{ wsp_section_id }}>

<script>
  (function() {
    class FlashSalePromo extends HTMLElement {
      constructor() {
        super();
        this.copyButton = this.querySelector('.copy-button-{{ wsp_section_id }}');
        this.copyFeedback = this.querySelector('.copy-feedback-{{ wsp_section_id }}');
        this.timerContainer = this.querySelector('.flash-sale-timer-{{ wsp_section_id }}');
        this.daysElement = this.querySelector('[data-days]');
        this.hoursElement = this.querySelector('[data-hours]');
        this.minutesElement = this.querySelector('[data-minutes]');
        this.secondsElement = this.querySelector('[data-seconds]');
        this.endDate = this.timerContainer ? new Date(this.timerContainer.dataset.endDate).getTime() : null;
        this.timerInterval = null;
      }

      connectedCallback() {
        if (this.copyButton) {
          this.copyButton.addEventListener('click', this.copyToClipboard.bind(this));
        }
        
        if (this.timerContainer && this.endDate) {
          this.startCountdown();
        }
      }

      disconnectedCallback() {
        if (this.timerInterval) {
          clearInterval(this.timerInterval);
        }
      }

      copyToClipboard() {
        const couponCode = this.copyButton.dataset.coupon;
        
        navigator.clipboard.writeText(couponCode).then(() => {
          this.copyFeedback.classList.add('show');
          
          setTimeout(() => {
            this.copyFeedback.classList.remove('show');
          }, 2000);
          
          // Announce to screen readers
          const announcement = document.createElement('div');
          announcement.setAttribute('aria-live', 'assertive');
          announcement.setAttribute('role', 'status');
          announcement.classList.add('visually-hidden');
          announcement.textContent = 'Coupon code copied to clipboard';
          document.body.appendChild(announcement);
          
          setTimeout(() => {
            document.body.removeChild(announcement);
          }, 3000);
        }).catch(err => {
          console.error('Could not copy text: ', err);
        });
      }

      startCountdown() {
        this.updateCountdown();
        
        this.timerInterval = setInterval(() => {
          this.updateCountdown();
        }, 1000);
      }

      updateCountdown() {
        const now = new Date().getTime();
        const distance = this.endDate - now;
        
        if (distance < 0) {
          clearInterval(this.timerInterval);
          this.daysElement.textContent = '00';
          this.hoursElement.textContent = '00';
          this.minutesElement.textContent = '00';
          this.secondsElement.textContent = '00';
          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);
        
        this.daysElement.textContent = days < 10 ? `0${days}` : days;
        this.hoursElement.textContent = hours < 10 ? `0${hours}` : hours;
        this.minutesElement.textContent = minutes < 10 ? `0${minutes}` : minutes;
        this.secondsElement.textContent = seconds < 10 ? `0${seconds}` : seconds;
      }
    }

    customElements.define('flash-sale-promo-{{ wsp_section_id }}', FlashSalePromo);
  })();
</script>

{% schema %}
{
  "name": "Flash Sale Promo",

  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "FLASH SALE: Office Furniture"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Upgrade your workspace with 30% off all office furniture. Limited time offer!"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "layout_direction",
      "label": "Layout direction",
      "options": [
        {
          "value": "row",
          "label": "Image left, content right"
        },
        {
          "value": "row-reverse",
          "label": "Content left, image right"
        },
        {
          "value": "column",
          "label": "Image top, content bottom"
        },
        {
          "value": "column-reverse",
          "label": "Content top, image bottom"
        }
      ],
      "default": "row"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 20,
      "max": 50,
      "step": 5,
      "unit": "%",
      "label": "Image width (desktop)",
      "default": 40
    },
    {
      "type": "header",
      "content": "Badge"
    },
    {
      "type": "checkbox",
      "id": "show_badge",
      "label": "Show badge",
      "default": true
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge text",
      "default": "Limited time"
    },
    {
      "type": "header",
      "content": "Timer"
    },
    {
      "type": "checkbox",
      "id": "show_timer",
      "label": "Show countdown timer",
      "default": true
    },
    {
      "type": "text",
      "id": "end_date",
      "label": "End date (YYYY-MM-DD HH:MM:SS)",
      "default": "2025-12-31 23:59:59",
      "info": "Format: YYYY-MM-DD HH:MM:SS"
    },
    {
      "type": "header",
      "content": "Coupon"
    },
    {
      "type": "text",
      "id": "coupon_code",
      "label": "Coupon code",
      "default": "FLASH30"
    },
    {
      "type": "header",
      "content": "Call to Action"
    },
    {
      "type": "checkbox",
      "id": "show_cta",
      "label": "Show CTA button",
      "default": true
    },
    {
      "type": "text",
      "id": "cta_text",
      "label": "Button text",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#4a4a4a"
    },
    {
      "type": "color",
      "id": "badge_color",
      "label": "Badge background color",
      "default": "#ff3b30"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "timer_background",
      "label": "Timer background color",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "timer_text_color",
      "label": "Timer text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "coupon_background",
      "label": "Coupon background color",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "coupon_border",
      "label": "Coupon border color",
      "default": "#cccccc"
    },
    {
      "type": "color",
      "id": "coupon_text_color",
      "label": "Coupon text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Copy button background color",
      "default": "#000f9f"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Copy button text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Copy button hover color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "cta_color",
      "label": "CTA button background color",
      "default": "#000f9f"
    },
    {
      "type": "color",
      "id": "cta_text_color",
      "label": "CTA button text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "cta_hover_color",
      "label": "CTA button hover color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Border radius",
      "default": 8
    },
    {
      "type": "range",
      "id": "title_size",
      "min": 16,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Title size",
      "default": 28
    },
    {
      "type": "range",
      "id": "subtitle_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Subtitle size",
      "default": 16
    }
  ],
  "presets": [
    {
      "name": "Flash Sale Promo"
    }
  ]
}
{% endschema %}