Hello,
I am looking for coding which allows the text on our announcement bar to scroll. I found a Youtube video with coding but it appears to only work on the mobile version of the site and not the web version.
Does anyone have a solution for this?
Thanks,
Natalie
Where would I add this code?
Hi,
The element is a deprecated HTML tag. If you use it, your pages or apps may be broken. To make the announcement bar to scroll, you need to modify the announcement bar coding.
If you don’t have knowledge of css & liquid coding, you may copy the code below and replace your announcement-bar.liquid under Sections.
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-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: 50%;
direction: rtl;
margin-left: 120px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 24px;
overflow: hidden;
}
}
#scroll-element {
padding: 10px;
}
{% endstyle %}
{% 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 %}
The following elements are modified.
added scroll-box class in the first div
created second div with scroll-container class within scroll-box div
added scroll-element id in announcement-bar message
added necessary css style within the announcement-bar.liquid
added necessary javascript within the announcement-bar.liquid
You may change the scroll speed from above code.
To change the scroll speed, please change the number in the code from 120 to 80 or 160 per your needs.
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
To change the scroll area width, you may change the width 50% to different number.
@media screen and (min-width: 768px) {
.scroll-container {
width: 50%; /* Change this number for scroll area width */
direction: rtl;
margin-left: 120px; /* You may also change this number for left margin of the scroll area */
overflow: hidden;
}
}
If you have any questions, please let me know.
Hope it helps.
Thanks.
share store link
Hi,
After you replace the announcement-bar.liquid, you should save the change and wait 5-10 seconds to apply the change. I just tested the code in Dawn theme.
As you wanted to be 100% width. I tested it on my temporary store.
The store URL is https://blithe-cosmetic.myshopify.com/?preview_theme_id=134476038400 with PW: peoplevillage
If you need help, let me know (send me a private message).
I can fix it for free.
It should take less than 5 minutes.
Hope it helps.
Thanks.
That has worked, we noticed that on the mobile site the text jumps when it enters from the right
Hey! Thank’s a lot for your messages. It helped me a lot but I got more question for you.
If I wan’t to add differents messages scrolling with icons.. How can I do it? Thank’s in advance!
How do I make the text scroll in from the right side instead of just appearing?
Hello are you able to assist me with adding
scroll announcement bar?
Solved this with the below code. For reference you can watch this video with FREE Code attached. Just copy and paste. This code is compatible with any theme:
{%- if section.settings.text != blank -%}
{%- if section.settings.link != blank -%}
{%- endif -%}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{{ section.settings.text | escape }}
{%- if section.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
{%- if section.settings.link != blank -%}
{%- endif -%}
{%- endif -%}
{% schema %}
{
"name": "Marquee Announcement",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "Add text to display"
},
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#000"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#fff"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
{% endschema %}
Here is the latest video you can follow:
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 %}
