How to make announcement bar text scroll from left to right
zephyrshop.org is my webiste
How to make announcement bar text scroll from left to right
zephyrshop.org is my webiste
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!
Can you explain step by step. Because im getting a little bit confused
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.
It is something similar that i want, yes
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
oh no sorry its fine by the way can you reduce the padding and can you make it so i can put 5 messages?
and so the text goes the whole way across