"Sliding" text announcement bar on Dawn [June 2023]

Technical Q&A
,
1

Hello everyone, i am looking to add a “sliding” effect to my annoncement bar’s store, but i understand it is only possible with coding.

An example of the effect i am reffering to can be seen on “flourist.com”. Their announcement bar is exactly what i am looking for.

Example announcement bar store: Flourist.com

My store url: https://0fbee0-2.myshopify.com/

2

Hi Luigi,

What you are looking for is this:

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

#announcement-bar {
    overflow: hidden;
}

#announcement-bar .scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 20s linear infinite;
}

In this example, #announcement-bar is the ID of your announcement bar, and .scrolling-text is the class of the text you want to scroll. You will need to replace these with the actual ID and class in your Shopify theme.

You can also adjust the speed of the scroll by changing the duration in the animation property (20s in this example).

Let me know if this is unclear. Happy to help.

Best,
Fran

1 Like
3 

    
Your announcement text goes here

Shopify removed it :slightly_smiling_face:
1 Like
4

I am sorry to be such a newbie, but where does the first lines of code and where does this second with

go? Do i put the first in the middle of
?

Do i put it in the custom css section at the bottom of the announcement bar or do i go to “edit code” and have to put it in some file?

Again sorry if i am so unexperienced with all this.

5

Apologies, I went a little fast there.

You want to make all edits in the code itself.
I recommend you duplicate your theme (if you are editing the live theme) first.

in the editor you want to search for “announcement-bar.liquid”.

In this file, you can make the edits like so (done in Dawn theme).

Screenshot 2023-06-20 at 5.42.50 PM.png
Screenshot 2023-06-20 at 5.42.50 PM.png2180×710 119 KB

For the css, you can paste the code at the bottom of the base.css file.

Let me know if this works :slightly_smiling_face:

1 Like
6

I’m so desolated, i’ll have to buy you a coffee for this!

So pasting the upper code on the base.css file is of course easy enough, i’ve done that.

I have tried to paste somehow somehere these codes:


    
Your announcement text goes here

But it only messed up the announcement bar, so i'm lost on this last passage, also the the code on your screen looks different than mine:

![1.png|1902x557](upload://9IuFvr7KGc2nxW8B5JC0ebV7BSq.png)

I don't know what to delete and what to put in its place and what to add and where.