How to make annoucement bar text scroll from left to right

English Shopify Shopify Design
1

How to make announcement bar text scroll from left to right

zephyrshop.org is my webiste

2

Hey @ZephyrShop

You mean Marquee Text something like this

You can add this using this code.

Just create a from Online Stores> Themes> Edit Code

Create a new section and paste the code present in the link replace the text according to you take help from Chat CPT to customise the view as you like.

After creating the section add reference of that section in the theme.liquid file as this image

And that’s it you will have your section available in the header.

If you are unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!

3

Can you explain step by step. Because im getting a little bit confused

4

First you visit the website and confirm that it is something similar you need or you can give me a reference website to what type of marquee you need then I will provide step to step guide.

Click Here

5

It is something similar that i want, yes

6

Hi @ZephyrShop

This is Richard from PageFly - Shopify Page Builder App

Please update this code to your announcement-bar.liquid to get this solved

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

Step 2: announcement-bar.liquid and replace all code with this

{%- 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_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 -%}
                
        

              

          {%- 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": "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 %}

After that, you can add the message in the theme customizer

Hope this can help you solve the issue

Best regards,

Richard | PageFly

7

ZephyrShop_0-1710950750290.png
ZephyrShop_0-1710950750290.png1901×927 6.37 KB

I dont think its supposed to be like this

8

oh no sorry its fine by the way can you reduce the padding and can you make it so i can put 5 messages?

9

and so the text goes the whole way across