Multi announcement bar for Shopify Dawn theme

[Rokel]

Hi everyone!

How do we go about making the announcement bar in the Dawn theme multi?

I'm happy with the centered look and feel of the out-of-the-box announcement bar, but I'd like to have 3 separate messages with links, each displaying for 5sec.

Any gurus who can help?

Thanks so much!

Rob,

[KetanKumar]

@Rokel 

yes, please try this code if you are not able please send DM Details 

[Rokel]

Hi @KetanKumar 

Thanks for offering a solution - appreciated!

@LitExtension had the right interpretation so I'll give that a try and see how we go ; )

Thanks again,

R 

[KetanKumar]

@Rokel 

its my pleasure to help us 

[LitExtension · Accepted solution]

Hi @Rokel,

If you want to display with slider you can refer the following code: https://www.huratips.com/tech-tips/how-to-add-a-sliding-announcement-bar-manually-in-shopify.html

Or use a effect with the following instructions: https://community.shopify.com/c/shopify-design/how-do-i-get-a-sliding-announcement-bar-without-app/t...

Hope it helps!

[Rokel]

Hi @LitExtension - thanks so much for the solution.

The behaviour is mostly right but is there a way for the message NOT to fly off to the left after display and instead just an elegant disappear as the next message displays?

Thanks again,

R

[LitExtension]

Hi @Rokel,

Please send your site and if your site is password protected, please send me the password. I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Rokel]

Hi @LitExtension @KetanKumar  thanks so much for following up, I'm sorry for the delay.

I plugged in the hura-announcement bar and the format is off but looking at the code it's running from an external site (//unpkg.com/swiper/swiper-bundle.min.js) which we can't do - all code needs to be integrated within our domain. 

https://8usoax5ge750p3sp-40051409050.shopifypreview.com

If you take a look at the site you'll see the standard Dawn theme announcement bar first and the hura bar next. What we're looking for is the look and feel of the standard Dawn theme (1st one) but with the 5sec cycle between messages (and no scrolling away to the left like on the hura theme). 

I'd hoped it was a case of updating the Dawn announcement section for additional messages then adding some js or something else to handle the 5sec cycle 🤞

Thanks so much.. you guys are awesome. If too tricky we'll just settle for the single message default Dawn theme and I'll adjust the messaging.

[KetanKumar]

@Rokel 

great work and thanks for update can you pleas add this code i can see design issue you have add and check 

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.hura-announcement-bar .hura-message {padding: 0 !important;}