How do I add the next text to my top bar's text slider?

growteamsg · ‎01-22-2025

Currently, I have the text "Free delivery over $100" at the top bar of my site. Below is the screenshot of my top bar.

How do I add the next line of text so that the top bar will slide to show another text after a few seconds? Currently, I have the following code. However, I do not know what I can do to input instructions for the next text in another slide. Can someone help me with this?

<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.text-slider {
overflow: hidden;
width: 100%;
max-width: 700px;
margin: auto;
font-size: 15px;
font-weight: 400;
text-align: center;
}
.text-slider-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.text-item {
min-width: 100%;
box-sizing: border-box;
text-item: center;
}
</style>

<div class="text-slider">
<div class="text-slider-inner">
<div class="text-item">Free delivery over $100.</div>

<script>
const textSliderInner = document.querySelector('.text-slider-inner');

function nextText() {
const lastText = document.querySelector('.text-item:last-child');
textSliderInner.style.transition = 'transform 0.5s ease-in-out';
textSliderInner.style.transform = 'translateX(' + (-lastText.offsetWidth) + 'px)';
setTimeout(() => {
textSliderInner.style.transition = 'none';
textSliderInner.style.transform = 'translateX(0)';
textSliderInner.prepend(lastText);
}, 500);
}

setInterval(nextText, 3000); // Change text every 3 seconds
</script>
</div>
</div>
</body>

suyash1 · ‎01-22-2025

@growteamsg you will have announcement bar settings in customize settings of the theme, did you check customize settings?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com

How do I add the next text to my top bar's text slider?

How do I add the next text to my top bar's text slider?

Community Blog Articles