Shopify Liquid code generator

<div class="acd-{{ section.id }}" data-ends="{{ section.settings.ends_at }}">
  <p class="acd__msg">{{ section.settings.message | escape }}</p>
  <div class="acd__clock" aria-live="polite">
    <span data-unit="d">00</span>d <span data-unit="h">00</span>h
    <span data-unit="m">00</span>m <span data-unit="s">00</span>s
  </div>
  {% if section.settings.button_label != blank %}
    <a class="acd__btn" href="{{ section.settings.button_link }}">
      {{ section.settings.button_label | escape }}
    </a>
  {% endif %}
</div>

{% style %}
  .acd-{{ section.id }} {
    background: {{ section.settings.background }};
    color: {{ section.settings.text_color }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Countdown bar",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "message", "label": "Message", "default": "Summer sale ends in" },
    { "type": "text", "id": "ends_at", "label": "Ends at (YYYY-MM-DD HH:MM)", "default": "2026-10-31 23:59" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#1c1230" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
  ],
  "presets": [{ "name": "Countdown bar" }]
}
{% endschema %}