How To Add A Scrolling Announcement Bar Under The Header (Dawn Theme)

Store Design
, , , , ,
1

Thanks in advance!

I am looking to add a scrolling announcement bar under the header and I was wondering if anyone could help me out with it?

Example:

IMG_0420.png
IMG_0420.png997×133 135 KB

2

Hi @MMast

Can you share your website link?

3

https://decemberschild.com/password

password: dc

4

Hi @MMast

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on announcement-bar. liquid and replace all the code with here

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      
        {%- if block.settings.message_one != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

  

      - {{ block.settings.message_one | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

      - {{ block.settings.message_two | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

       - {{ block.settings.message_three | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

      - {{ block.settings.message_four | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

       - {{ block.settings.message_five | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                
    
  

        
                - {{ block.settings.message_one | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

            - {{ block.settings.message_two | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

              - {{ block.settings.message_three| escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

            - {{ block.settings.message_four | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                

           - {{ block.settings.message_five | escape }}
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                
        

              

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

  {%- endcase -%}
{%- endfor -%}

{% 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": "message_one",
          "default": "Message one",
          "label": "Announcement one"
        },
             {
          "type": "text",
          "id": "message_two",
          "default": "Message two",
          "label": "Announcement two"
        },
           {
          "type": "text",
          "id": "message_three",
          "default": "Message three",
          "label": "Announcement three"
        },
           {
          "type": "text",
          "id": "message_four",
          "default": "Message four",
          "label": "Announcement four"
        },
           {
          "type": "text",
          "id": "message_five",
          "default": "Message five",
          "label": "Announcement five"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
            },
            {
              "value": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
            },
            {
              "value": "right",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
        },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "accent-1"
    },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

Then add your content in Theme Customize, your announcement will be scrolling

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

Thank you! Just a couple questions about this code. How do I change the speed? How do I change the text? & is there a way to change the space between each message?

6

Hello, thankyou for sharing this, it worked. However i have a question as to if it is possible to make it span the whole width of the screen on computer?

my store is shopseiza.com

thanks, george

7

Im having the same questions @seiza123 , did you ever find a solution?