Preview
Accent
Section code
<section class="sl-countdown" style="padding:clamp(24px,5vw,48px) 1rem;background:{{ section.settings.bg_color | default: 'var(--sl-accent,#0a5cff)' }};color:#fff;font-family:inherit;text-align:center;">
<div style="max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;align-items:center;">
<h2 style="margin:0;font-size:clamp(1.35rem,3vw,2rem);">{{ section.settings.heading }}</h2>
<p style="margin:0;opacity:.95;font-size:clamp(.95rem,1.5vw,1.05rem);">{{ section.settings.subheading }}</p>
{%- assign end_date = section.settings.end_date -%}
{%- if end_date != blank -%}
<p style="margin:.25rem 0 0;font-size:clamp(1rem,2vw,1.25rem);font-weight:600;">
{{ section.settings.ends_label | default: 'Ends' }}
<time datetime="{{ end_date }}">{{ end_date | date: '%B %-d, %Y at %l:%M %p' }}</time>
</p>
{%- endif -%}
{%- if section.settings.cta_text != blank -%}
<a href="{{ section.settings.cta_link }}" style="display:inline-block;margin-top:.5rem;padding:.65rem 1.25rem;background:#fff;color:var(--sl-accent,#0a5cff);border-radius:.375rem;text-decoration:none;font-weight:700;">{{ section.settings.cta_text }}</a>
{%- endif -%}
</div>
</section>
{% schema %}
{
"name": "Countdown Banner",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Flash sale ends soon" },
{ "type": "text", "id": "subheading", "label": "Subheading", "default": "Use code FLASH20 at checkout." },
{ "type": "text", "id": "end_date", "label": "End date (YYYY-MM-DD HH:MM)", "default": "2026-12-31 23:59" },
{ "type": "text", "id": "ends_label", "label": "Ends label", "default": "Ends" },
{ "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop the sale" },
{ "type": "url", "id": "cta_link", "label": "Button link" },
{ "type": "color", "id": "bg_color", "label": "Background color" }
],
"presets": [{ "name": "Countdown Banner" }]
}
{% endschema %}Internal notesTeam only
Freeform markdown notes visible only to signed-in team members. Separate from the public description.