How can I modify the transition of my custom announcement bar in Dawn?

Solved

How can I modify the transition of my custom announcement bar in Dawn?

LabelSource
Explorer
60 1 10

Hi All,

 

How can I change my announcement bar to transition to the next rather than have them stacked underneath each other. Thanks.

Screenshot 2022-06-20 at 14.08.53.png

Accepted Solution (1)
Alan15
Shopify Partner
148 27 72

This is an accepted solution.

@LabelSource 

You can try adding this JavaScript code to the end of the announcement-bar.liquid file in the Sections folder. It might be what you want (It works on a recent version of Dawn theme):

<script>
let announcementIndex = 0;
showAnnouncements();

function showAnnouncements() {
  let i;
  let announcements = document.getElementsByClassName("announcement-bar");
  console.log(announcements);
  for (i = 0; i < announcements.length; i++) {
    announcements[i].style.display = "none";
  }
  announcementIndex++;
  if (announcementIndex > announcements.length) {
    announcementIndex = 1;
  }
  announcements[announcementIndex - 1].style.display = "block";
  setTimeout(showAnnouncements, 4000); // Change announcement every 4 seconds
}
</script>

 

 

Need more help? Contact me here

View solution in original post

Replies 4 (4)

SagarSukhanandi
Shopify Partner
279 58 71

Hi @LabelSource 

Could you please share your store URL and password if any to check?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
LabelSource
Explorer
60 1 10

Hi Sagar, I have not yet published this on my site so it wont display, can i send you a link for the customise page to my shopify to see?

 

https://label-source.co.uk/

Alan15
Shopify Partner
148 27 72

This is an accepted solution.

@LabelSource 

You can try adding this JavaScript code to the end of the announcement-bar.liquid file in the Sections folder. It might be what you want (It works on a recent version of Dawn theme):

<script>
let announcementIndex = 0;
showAnnouncements();

function showAnnouncements() {
  let i;
  let announcements = document.getElementsByClassName("announcement-bar");
  console.log(announcements);
  for (i = 0; i < announcements.length; i++) {
    announcements[i].style.display = "none";
  }
  announcementIndex++;
  if (announcementIndex > announcements.length) {
    announcementIndex = 1;
  }
  announcements[announcementIndex - 1].style.display = "block";
  setTimeout(showAnnouncements, 4000); // Change announcement every 4 seconds
}
</script>

 

 

Need more help? Contact me here
LabelSource
Explorer
60 1 10

Alan, thank you very much sir, works a dream!