Shopify themes, liquid, logos, and UX
Hi All,
How can I change my announcement bar to transition to the next rather than have them stacked underneath each other. Thanks.
Solved! Go to the solution
This is an accepted solution.
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>
Hi @LabelSource
Could you please share your store URL and password if any to check?
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?
This is an accepted solution.
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>
Alan, thank you very much sir, works a dream!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025