Dawn Theme 10.0 - Announcement Bar is not rotating on mobile

Shopify Discussion
1

I updated to the new Dawn 10.0 theme and want to work with the rotating announcement bar. For the desktop everything seems to be working fine. Now when I check the bar on the phone. It hangs on the first announcement and does not rotate to the next.

Is this a bug and will this be fixed in future updates?

Thank you!

3 Likes
2

Hey Bram,

Do you mind sharing your store url?
We haven’t noticed any issues with it so far.

Best,
Flo

3

Sure!

Thank you!

4

I noticed the same issue on mobile. Announcement bar auto rotates on desktop but doesn’t on mobile.

5

Did you find anything? We didnt change any code, so it is just basic theme 10.0 code that is not working on mobile.

1 Like
6

I have the same issue regarding the announcement bar on mobile view.

7

Same issue on our store reiterwelt.eu - desktop works fine but mobile version (at least on iOS) doesnt rotate.

8

Is any expert going to look in to this theme problem? Sounds like a bug if I see others with the same problem.

9

I found out that this is (to my surprise) an intended feature by the devs of DAWN 10.0.0 because of different reasons. One of the reasons listed was that on mobile you cannot stop the rotation by hovering over the bar, like you can do on desktop.

This is indeed quite stupid by them to not indicate this anywhere.

You can read more about it on the gitbhub link here:
https://github.com/Shopify/dawn/issues/2705

1 Like
10

Right, at least give users to ability to turn it on or off. Now it is really frustrating that is does not rotate at all.

11

Agreed. Mobile-first design should have this 100% accounted for in the theme settings and an option to enable on mobile.

12

Hi there!
Yes, indeed, they didn’t think it through. However, there is a simple and straightforward solution for this. First of all, open the code editor of the theme where you want to implement this. Then, open the “global.js” file. Next, locate the “setAutoPlay” method in the “SlideshowComponent” class. In this method, replace this line of code

this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked || !this.desktopLayout.matches ? this.pause() : this.play();

with this line

this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play();

Voila! Now the announcement bar automatically scrolls on mobile devices.

1 Like
13

Thanks! This worked!

14

You’re welcome ?

15

I’m having the same issue and trying to fix using your instructions above, but I’m not finding where the global.js file is located. I have selected on Edit Code, I’m using the Dawn theme. any other pointers you can give as to where I can find the global.js file or if it’s called something different in the Dawn Theme. thank you