how to get text to scroll in announcement bar for dawn theme

Litegreeneyes · ‎01-31-2024

HI I'm trying to find code to allow my text in announcement bar to scroll or do i have to hide announcement bar and add a marquee scroll bar? Thanks

Dan-From-Ryviu · ‎01-31-2024

Please share your store URL

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Litegreeneyes · ‎02-04-2024

HI my store is www.micaloco.com.au I just needed it to scroll to the left and keep scrolling.

Thank you

Dan-From-Ryviu · ‎02-05-2024

I sent request to accesss your store, please accept so I can help you

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ThePrimeWeb · ‎02-05-2024

Hey @Litegreeneyes,

Refer to the video in the attached link, is that what you require?

https://streamable.com/2xora4

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Litegreeneyes · ‎02-05-2024

HI thats thats exactly what i need thank you

ThePrimeWeb · ‎02-06-2024

Hey @Litegreeneyes,

It's gonna be a little tough, but you should be able to follow through!

Go to your theme's "Edit Code" Option, then in the search bar type "announcement-bar.liquid"
Now scroll down until about line 302 and look for "type": "text", two lines below it should be "default":"Welcome to our store",

change the "type": "text" to "type": "textarea" and hit save.

Screenshot for reference

Next, in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

The value below that says "animation: marquee 20s linear infinite !important;", the 20s means 20 seconds per cycle, increase this to like 50s or 120s, etc... if the scroll is too fast

<style>
.announcement-bar {
  display: block !important;
}

.announcement-bar__message {
  white-space: nowrap !important;
  animation: marquee 20s linear infinite !important;
}

@keyframes marquee {
  100% {
    transform: translateX(calc(-100% - 1rem));
  }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Now go into your Theme's Customizer and you'll see that the textbox for announcement bar is a Text Area now.

Add the Free Shipping message multiple times in it. Make sure it's very lengthy. Then hit save. I usually seperate it with " | ", you can do " - ".

Just make sure it follows this format.

"FREE SHIPPING<space>|<space>" or "FREE SHIPPING<space>-<space>"

Another screenshot for reference.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ThePrimeWeb · ‎02-06-2024

Hey @Litegreeneyes,

Sorry, for the CSS I missed out something. Copy it from here. The rest is as per normal.

<style>
.announcement-bar {
  display: block !important;
  overflow-x: hidden !important;
}

.announcement-bar__message {
  white-space: nowrap !important;
  animation: marquee 20s linear infinite !important;
}

@keyframes marquee {
  100% {
    transform: translateX(calc(-100% - 1rem));
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Natasha22 · ‎06-19-2024

Is there a way to make the bar slimmer? I want my header from the top to not be impacted but the scroll bar has made it shorted on the top.

Is there a way to add this at the bottom the image banner?

https://freedom-pieces.com/

benllih · ‎01-03-2025

Easy! Go here and download the free code:

https://hotboxsolutions.com/shopify-tutorial/free-text-scroller-section

Go to your theme and edit code

Now create a new section

Call it ticker-scroller-lyt and then paste the code into there!

Done!

how to get text to scroll in announcement bar for dawn theme