Shopify themes, liquid, logos, and UX
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>
@growteamsg you will have announcement bar settings in customize settings of the theme, did you check customize settings?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025