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

Litegreeneyes
Tourist
5 0 1

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 

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7027 1330 1354

Please share your store URL

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Litegreeneyes
Tourist
5 0 1

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
Shopify Partner
7027 1330 1354

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

ThePrimeWeb
Shopify Partner
1187 309 228

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
Litegreeneyes
Tourist
5 0 1

HI thats thats exactly what i need thank you 

ThePrimeWeb
Shopify Partner
1187 309 228

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

ThePrimeWeb_0-1707221073242.png

 

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.

ThePrimeWeb_1-1707221235388.jpeg

 

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

 

ThePrimeWeb_2-1707221271938.png

 

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.

 

ThePrimeWeb_3-1707221327078.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ThePrimeWeb
Shopify Partner
1187 309 228

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