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

Store Design
, , , , , , ,

Topic summary

A user wants to create a rotating text slider in their Shopify store’s top bar announcement area. Currently displays “Free delivery over $100” and seeks to add additional text slides that rotate every few seconds.

Current Implementation:

  • Has basic HTML/CSS/JavaScript code for a text slider
  • Code includes styling for overflow, transitions, and a 3-second rotation interval
  • Only one text item currently defined in the markup

Issue:
Unsure how to add additional text items to the existing slider code to enable rotation between multiple messages.

Response:
Another user suggests checking the theme’s customization settings for built-in announcement bar options, which may offer native slider functionality without custom code.

Status: Awaiting further guidance on either modifying the custom code or utilizing theme settings.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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

Screenshot 2025-01-22 at 11.06.52 PM.png
Screenshot 2025-01-22 at 11.06.52 PM.png1368×192 16.1 KB

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?





.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;
}



Free delivery over $100.




2

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