How can I add more text to my scrolling announcement bar in the dawn theme?

[jds20]

Hi! I recently added a scrolling announcement bar for my shop by adding some code parts but I can't manage to add more text than a single lign... Any ideas ? Ty! 

shop: https://shopiquet.myshopify.com/ pw: layngo

I used the code below: 

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

{% style %}
.announcement-bar__message {
  text-align: right !important;
}
  .annoucement-bar__message {
    <p> Livraison offerte </p>
  }
@-webkit-keyframes scroll{
  0% {
    margin-right: 0%;    
  }
  100% {
    margin-right: 100%;
  }
}
.scroll-box {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.1em;
  overflow: hidden;
  width: 100%;
  background: rgb(var(--color-background));
  background: var(--gradient-background);
}
@media screen and (min-width: 768px) {
  .scroll-container {
    width: 100%;
    direction: rtl; 
    margin-left: 10px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  .scroll-container {
    width: 100%;
    direction: rtl; 
    margin-left: 24px;
    overflow: hidden;
  }
}
#scroll-element {
  padding: 10px;
}
{% endstyle %}
<script>

var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

</script>
{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.all.colors.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

[KetanKumar]

@jds20 

oh sorry bt i cant see your scrolling work and also different text 

[jds20]

Yes, I had to find a solution, I just took a break and then I found the mistake lol, ty anyway

[KetanKumar]

@do you have issue?

[AhmadS]

Where to add this code?

Can you tell how to add scrolling announcement bar?