Hello,
i addeda Marquee Announcement Bar in my Store and i really love it. But i would like to make 2 changes to it.
Number 1: i would like to have more than 1 message in the announcement bar.
Number 2: i would like the text to start in the middle of the screen and not on the right.
Here is a Store which got it exactly how i would like to have it. https://www.elevateclo.com/ Can somebody help me do it like that.
My Store: https://quincko.de/
Password: Keba
Btw: i am using the Dawn Theme.
Thanks and best regards
Hi @Quincko
This is Victor from PageFly - Shopify Page Builder App
Number 2 will be solve when you add more message to the margue.
Please help me to screenshot your code or paste it here, i will check a tell you how to add msg to it
Also you can try to add the msg in the theme customizer
Hope this can help you solve the issue
Best regards,
Victor | PageFly
Hi,
this is the Code:
.announcement-bar__message {
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 2s linear infinite;
-webkit-animation: scroll-left 2s linear infinite;
animation: scroll-left 20s linear infinite;
}
.announcement-bar {
overflow: hidden;
height: 35px;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@media only screen and (max-width: 800px) {
.announcement-bar__message {
font-size: 13px;
animation: scroll-left 20s linear infinite;
}
.home-page-video video {
width: 100%;
}
#shopify-section-slideshow img, .index-slideshow-section img {
height: unset !important;
/* opacity: 0.8 !important; */
}
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 400px;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-150%);
}
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
}
}
@media only screen and (max-width: 600px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 260px;
}
}
@media only screen and (max-width: 500px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 240px;
}
}
Best regards
Hi @Quincko
your custom code is not good, please use mine and follow the guide
Go to annoucement-bar.liquid in theme code
Paste this code at the top of the file
After that paste this code below like this
Your message
Your message
Your message
And remove all your code.
How can i change the colors, the font and the size of the new announcement bar?
you can go to base.css and style like this
#node-marquee > span {
font-size: 20px;
color: red;
}
Quincko
January 18, 2023, 10:19am
8
Unfortunately it doesn‘t work
Please style inline to the node-marquee like this
replace the current one with the new one
Quincko
January 18, 2023, 12:26pm
10
I am sorry but it still doesn´t work. The bar is doing what it should but i can´t seem to change anything besides the text. But i would need to change the padding to the top, the colors and also the font.
Hey,
I had done this with the code but my problem is that there is still the other announcement bar on the top and the marquee one with the text directly above and when i remove the stocked one the marquee one also will be removed
I added a pptx file that you can see what is the problem so maybe you can help me with this.
Hi Victor, I followed your instructions and it works beautifully! I just have one question: my animated arrow link appears below the text and I want to move it to behind the rolling text. Is there a way to do that and have a unique link arrow for each of my messages?
Hi @komesoap Can you share with me your store URL for me to take a look?
Then i will give you a code to fix that.
Thank you
@PageFly-Victor Thanks for responding Victor! Here’s my link: d04c2c.myshopify.com
I managed to remove the arrow from below, but I’m wondering if there’s a way to add it behind each message with a unique url. If it’s too complicated to execute, no worries about it!
Hi @komesoap In case you want to create a arrow behind each text, please follow my guide:
paste this to base.css
svg {
line-height: 19px !important;
width: 15px !important;
}
.node-marquee__el span {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
then replace this code to your code, in annoucement bar.liquid
Your message
Your message
Your message
1 Like
@PageFly-Victor Thank you so much for your help, Victor!
Hello @PageFly-Victor
I’ve read your reply and i appreciate it. but i want to take it further more :
i want to localize : i use if (Shopify.locale==‘’) if (Shopify.locale==‘’) messages
section or in the
nodeMarquee({ section ?
i want the marquee to appear in the same announcement line , not above . i tried to clear the static line , but this hides the announcement bar altogether.
Regards
Wawmegastore
Here is the updated 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 %}
