Shopify
Dawn 2.0 Theme
RE: Countdown Timer

Im trying my hand at the Shopify code framework.

I want to make my own countdown timer and to start, I have duplicated the Announcement Bar code in Sections and named it countdown.

I have also duplicated the anncoument bar css.

I have renamed everything annoucement to countdown - to not confuse both in css and html classes.

I have gotten as far as to have the Count Timer appear as a selectable section in the Customiser but when it is active, it is not showing up.

[Screenshot of the Customiser and by Countdown Timer appearing][1]

I noticed it does not have a similar icon as the header / announcement bar would .

What am I doing wrong?

Here is my current code:

```
  {%- case block.type -%}
    {%- when 'countdown' -%}
      <div class="countdown-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.countdown' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="countdown-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <p class="countdown-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "Countdown Timer",
  "max_blocks": 2,
  "blocks": [
    {
      "type": "announcement",
      "name": "Countdown Timer",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "We must edit the code to configure the timer",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "background-1",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__3.label"
            },
            {
              "value": "accent-1",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__4.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__5.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }

}
{% endschema %}```

  [1]: https://i.stack.imgur.com/HDlMz.png

```