How can I code a scrolling text-only marquee announcement bar?

Technical Q&A
1

Hello,

I’m having difficulty coding a marquee announcement bar. The static announcement bar code is below. When I’ve tried to add the marquee, both the background and the text scroll left. If possible, I’d like to have only the text scroll left.

URL: https://siriusnaturalpetfoods.com

(static) announcement-bar.liquid:

{% if section.settings.announcement_visibility %}
{% if section.settings.home_page_only == false or template.name == ‘index’ %}

.announcement { font-size:{{ section.settings.announcement_text_size }}px; background-color: {{ section.settings.announcement_bg_color }}; border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }}; padding: {{ section.settings.announcement_padding}}px; text-align: {{ section.settings.announcement_text_align }}; } .announcement p {color: {{ section.settings.announcement_text_color }};} .announcement a {text-decoration: underline;} .announcement a:hover {text-decoration: none;}
{{ section.settings.announcement_text }}
{% endif %} {% endif %} {% schema %} { "name": "Announcement Bar", "settings": [ { "type": "checkbox", "id": "announcement_visibility", "label": "Visibility (On / Off)", "default": true }, { "type": "checkbox", "id": "home_page_only", "label": "Home page only", "default": true }, { "type": "richtext", "id": "announcement_text", "label": "Text", "default": "

Default richtext content

" }, { "type": "range", "id": "announcement_text_size", "min": 12, "max": 24, "step": 1, "unit": "px", "label": "Font size", "default": 16 }, { "type": "color", "id": "announcement_text_color", "label": "Text color", "default": "#FFFFFF" }, { "type": "color", "id": "announcement_bg_color", "label": "Background color", "default": "#094886" }, { "type": "range", "id": "announcement_border_size", "min": 0, "max": 10, "step": 1, "unit": "px", "label": "Border size", "default": 4 }, { "type": "color", "id": "announcement_border_color", "label": "Border color", "default": "#094886" }, { "type": "range", "id": "announcement_padding", "min": 0, "max": 20, "step": 1, "unit": "px", "label": "Padding", "default": 5 }, { "type": "select", "id": "announcement_text_align", "label": "Text alignment", "options": [ { "value": "left", "label": "left"}, { "value": "center", "label": "center"}, { "value": "right", "label": "right"} ], "default": "center" } ] } {% endschema %}
2

You can try this code it will help you:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}
3

Thank you! Is it possible to modify this code so the text scrolls in the announcement bar instead?