How can I create a sliding announcement bar using the Motion theme?

Hey there my store is: https://ca3121.myshopify.com/

I want to have the slide show on the announcement bar like this site: https://icon-amsterdam.nl/en

As you can see a different text appears on the announcement bar once every few seconds

How do i get that? What’s the code

We’re both using Motion theme

Hey @Anonymous

To achieve a similar slideshow effect in your announcement bar using the Motion theme in Shopify, you’ll need to modify the theme’s code. In order to include the announcement bar, you’ll require a designated section where you can display the text within the bar. Please note that modifying your theme’s code requires some technical knowledge. If you’re not comfortable making these changes yourself, it’s recommended to reach out to a Shopify developer who can assist you with implementing the desired slideshow effect on the announcement bar.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Can you send me a Shopify Developer please ?

@Anonymous you can do that kind of text changing effect by applying following code :
https://stackoverflow.com/questions/6398526/javascript-jquery-or-something-to-change-text-every-some-seconds

Feel free to contact me anytime as I’m readily available to assist you and resolve any concerns or problems you may have!

Best Regards,
Moeed

Where do i paste it ?

@Anonymous you can put it in js file by selecting the specific element of the announcement bar.

Can you look into my store because idk if i should add it at the bottom ?

@Anonymous Can you share password or your store access cause for that need customization code.

pw: nohren

@Anonymous add below code into theme.liquid file before closing tag


Hi @Anonymous ,

You can follow this tutorial to implement the announcement bar slider
https://www.youtube.com/watch?v=hDLvX_tTQWU&t=306s

theme.scss.liquid or theme.js.liquid ?

And what you mean with ‘before closing tag’ ?

It works but how do i make it go slower ?

Hi @Anonymous

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can use this app to Announcement Bar Slider:

https://apps.shopify.com/quick-announcement-bar-always-keep-your-customers-informed

Regards,

San

Hello @websensepro the code in the tutorial does not work for me.. I am using Dawn 9.0 and the call is right above the header-group. Any idea what can be wrong?
Thank u in advance

Hi @sapiens_sapiens ,

add this section.

@websensepro Hi, that’s exactly where I put the call, and it didn’t work for me. I ended up replacing the whole announcement-bar component to have it working.