how to use image on header announcement on shopify

hi guys in this video i am going to show,you that how you can add marquee effect,in your announcement bar so currently,you can see on my screen that this is a,shopify store and on the top header you,are seeing that the text is sliding from,right to left so how you can do that,quickly so i will be showing you step by,step that how you can add this specific,effect into your shopify store so,basically the benefit of this is that,this is making your store little,attractive and customers are interested,to read on the top and maybe you can add,the text like you are providing some,kind of sales to your customers or you,are have any specific notification for,your customers like your products are,delayed or something like that so you,can add such,things on the top,so before continuing the video if you,are no uh if you are new on this channel,then please subscribe this channel first,so uh let's get started so let me show,you actually i have already,written a blog post on this so you only,need to copy and paste the code and then,everything is done,so,here i have written the code so i will,be adding the link below in the,description so you should just go,through and,copy and paste the code which i will be,showing you that how you will be doing,in your store,so if i will be refreshing this page,then you will see that,we don't have any kind of marquee effect,right now why because i have removed the,code so now let me show you how you will,be doing that so first of all you need,to go to your dashboard of shopify then,you need to click on customize,so first of all you need to enable your,your announcement bar because in some,cases you may have not enabled this one,and because of which you would not able,to see on the top see that we have some,sections here for example header you,should click over it and on the right,hand side you can see that we have,announcement bar so for example i am,uncheck going to uncheck this and now,you can see that you don't have any,announcement bar on the top but if i am,clicking on,show announcement so in this way it,would be reflecting on the top and one,more thing is that home page only,so,that means if you are interested to show,this specific announcement bar on your,home page otherwise if you are,unchecking this this means that this,would remain on all all the pages of,your store all right then after you need,to add the text which you are interested,to keep on the top so i have added this,text and then after let's save these,changes,so one more thing is that if you are,interested to change the background of,this then you should click on theme,settings and then click on this and then,you can change the color whichever you,are interested in all right,so then finally you need to click on,save so this thing we have we are done,with this right,now we need to click on actions then,click on edit code,and then after you will see some folders,and files so here you can see that we,have few folders click on layout,so uh always you keep in mind that for,the first folder you should click and,then you should you will be getting any,kind of file which will be related to,theme,like theme dash template.liquid or maybe,theme.liquid so click over it and then,you should find this tag this is a head,tag all right so here on the,this is head tag open but you need to,find,head tag close,so here down below you can see that this,is head tech lows head tag close means,with forward slash we have here he aad,so before that we are interested we are,going to add the css code so here you,can see that i have already added the,blog post so you only need to copy this,whole line of code from top to bottom,so let me copy these lines,and then paste it up just above,this header but before pasting that you,should add some more code which is like,opening,these braces,angular bracket then style this is open,tag and then you should write forward,slash and then again style all right so,these are the two tags which you have to,write first,and inside of these tags you should,paste that code so i'm going to paste it,so now if all the lines are reflecting,here,all right so that means if i'm going to,save these changes then automatically,the text would be sliding on the top so,this was uh already over there but let,me refresh this page,and now you can see that we are done,with the thing which we were interested,to implement so here you can see that we,have uh we have the sliding announcement,bar so this is really good and this is,really easy actually i did some struggle,but finally i,i created the code so i had to share,with you because if you are not,aware of coding then still you can,implement this one without any help of,plugin because in some cases people are,using some,extra apps and you already know that if,you are adding some extra apps then that,means your store would be more slower,all right so you you have no need to add,any kind of app into your store just,copy and paste the code so so in that,way you could able to do all the stuff,by your own even you don't know the,coding alright so thank you so much for,watching this video if you are new on,this channel then please subscribe this,channel and also like this video so,thank you so much once again see you in,the next video

Congratulation! You bave finally finished reading how to use image on header announcement on shopify and believe you bave enougb understending how to use image on header announcement on shopify

Come on and read the rest of the article!