How to slow down announcement bar scrolling text

Store Design
1

Hi, I’m using an external theme “Ella” in Shopify. However, I just can’t seem to slow down the announcement bar text scroll time. I haven’t published the theme yet as I want to finish all the edits before publishing, and so I can’t provide a link to my problem.

2

@SkinnyMaverick - if bar is scrolling fast it can be due to javascript, please check if you have any option to slow down in customize settings… else check css for announcement bar to find if it is css

3

Hi, thank you for commenting. I have checked both the settings in the customization section as well as all the CSS in the original code. Can’t find any setting or CSS code that says anything about the announcement bar timing.

4

Hello @SkinnyMaverick ,

Check the theme settings maybe there you will find an option to control it.
if not then try to ask from theme developer about it.
Alternatively you have to hire a developer to find the code and do the necessary changes.

Thanks

5

Hi, thank you for your comment. I’m starting to think it’s a development thing and that I’ll have to contact the developer directly. I’ve checked all the settings everywhere including the CSS coding.

6

@SkinnyMaverick - better to ask theme support then, else you will need to get some expert to do it

1 Like
7

Hello SkinnyMaverick,

I am just now running into this issue myself, were you able to find a decent fix for this?

Thank you in advance.

8

Hi, yes I was.
Having tried everything else, I copied the Announcement Bar and put half
(or some) of my wording in there. It instantly slowed down. My theory is,
that the more text you have in your Announcement Bar the faster it will
scroll. Unfortunately, I haven’t found another workaround for this yet.

I hope this helps.

9

I have the fix to this.

Open your theme’s code, open up the section announcement-bar.liquid
and insert the following code: assign timeScroll = 12 | times: section.blocks.size

right under: assign hasCountDown = hasCountDown[0]

And that’ll do the trick! Simply change the 12 to whatever number you desire, as that adjusts the speed.

10

Hi! You can do this yourself by simple visiting the Customize code and search announcement-bar.liquid and if you open it you will following code at the start

{%- if section.settings.enable_announcement and section.blocks.size > 0 -%}
    {%-liquid
        assign arrow =  section.settings.arrow_active
        assign hasCountDown = section.blocks | where: 'type', 'countdown'
        assign hasCountDown = hasCountDown[0]
        assign timeScroll =12 | times: section.blocks.size

just change the assign timeScroll = 12 value to your desired speed. If the value is lower speed will be high and higher the value speed will be low. I hope this will solve the problem for many non technical persons.