How can I create an announcement bar?

[MyMawduh]

am using a Sense version 9.0.0

Want to make a different look to the site and have my announcement bar move like a stock market bar?

[oscprofessional]

Hello @MyMawduh 

Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

[MyMawduh]

www.mymawduh.com

[Denishamakwana]

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

[MyMawduh]

www.mymawduh.com

[oscprofessional]

Hello @MyMawduh 

Please refer to this URL: It might be helpful to you-

https://community.shopify.com/c/shopify-design/moving-announcement-bar/td-p/1585168

[MyMawduh]

Woow lots of code for a simple task. I kinda got lost on what to do. 

cant we just generate a CSS code to add to the announcement bar?

[Kudosi-Tracy]

Hello @MyMawduh ,

You can try to do this:

1. Go to Online Stores -> Theme -> Actions -> Edit code

2. Open the theme.liquid -> add the following code

<script>
  function ticker() {
    var bar = document.getElementById('announcement-bar');
    var width = bar.offsetWidth;
    var parentWidth = bar.parentNode.offsetWidth;
    var limit = width - parentWidth;
    var step = 1;
    var direction = -1;
    var position = 0;

    setInterval(function() {
      if (position === 0 || position === limit) {
        direction = -direction;
      }
      position += step * direction;
      bar.style.transform = 'translateX(' + -position + 'px)';
    }, 10);
  }

  document.addEventListener('DOMContentLoaded', ticker);
</script>

3. Save and preview

Hope this can help.

Ali Reviews team. 

[MyMawduh]

No it did not work

[Ujjaval · Accepted solution]

@MyMawduh 
add <marquee> </marquee> tag in announcement-bar.liquid file

[MyMawduh]

it's working. can you check the site and tell me what you think, please?

I really like it on the mobile version, but on the desktop, it's slow and was thinking if I can change the color. 

[Ujjaval]

@MyMawduh you can control the speed of announcement bar using 
by adding

scrollamount="10" 

[MyMawduh]

oh my god i completely missed everything up 😥

[Ujjaval]

@MyMawduh what happened dude?
You didn't add na 

<marquee behavior="scroll" direction="left" scrollamount="20">

for fast scrolling?

[sapiens_sapiens]

Hello Ujjaval,
the marquee is not available in the theme, am I wrong?
I am working to achieve the same result and trying to adapt the marquee I have to my announcement bar, but it flickers by scrolling for a sec in the opposite direction. Could u pls give me a hand to fix it?

[Darceycunningha]

Hey, for some reason i don't appear to have the code. Is it something to do with my theme? 

Any help appreciated 🙂

[wendaomigo]

hi can you copy paste this marquee code please? thank you