How To Add Moving Announcement Bar In Shopify (Scrolling Text)

Поділитися
Вставка
  • Опубліковано 5 січ 2025

КОМЕНТАРІ • 91

  • @WebDevJapan
    @WebDevJapan 3 місяці тому +3

    You're doing a great service for us freelancers out here on the hustle and grind. Thank you

    • @ahsanraza2282
      @ahsanraza2282 3 місяці тому +1

      If you are comfortable to answer can you tell how you get clients and and how much do you charge

    • @WebDevJapan
      @WebDevJapan 3 місяці тому

      @@ahsanraza2282 I use Upwork and my current rate is $28/hr but I'm about to bump it way up because I have more work than I can do by myself.

  • @GYmDrip-g4d
    @GYmDrip-g4d Місяць тому +1

    Hi anes can make the proubelm is that the movement of the announcement bar is not fulll i need the movement to be in all anoncmnet bar

  • @elchico6830
    @elchico6830 3 місяці тому

    Bro you almost helped me with building my whole store! You're a hero.

  • @vyanna28
    @vyanna28 Місяць тому

    This is really helpful! Thank you so much! Hope you can also create logo slider or multi column section but for video like a video customer testimonial. Will be watching more of your videos to support your channel. Thank you again!

  • @ZiyandaTshazi
    @ZiyandaTshazi 4 місяці тому

    Thanks it worked but i wanted it to have spaces so i created four different announcements,so its moving like a photo slide rather.
    It's more than perfect thank you ❤
    You gained a follower.

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      You're very welcome and glad i could help.
      My pleasure

  • @EarringsByLadyCLLC
    @EarringsByLadyCLLC Місяць тому

    Thank you so much. I have learned so much from your videos.

  • @youniqa
    @youniqa Місяць тому +1

    Your personality is fire 🤩Amazing tutorial for someone who has zero knowledge about coding. Subscribing to learn more 😁Thank you

  • @mdpcadena3743
    @mdpcadena3743 Місяць тому

    Thank you!! It works well on desktop. On mobile goes very fast 🙃

  • @charliehillsdon422
    @charliehillsdon422 Місяць тому +1

    I love your videos and they have been so incredibly helpful! In this case, i have tried inserting the code several times and it doesnt seem to be moving at all. Do you know what the problem could be?

  • @Sachu915
    @Sachu915 2 місяці тому +1

    Aweome man!! superb...Brother can you show how to make the text scroll from one end of the screen to other end...now its starting and ending from the middle of the accouncement bar ...Thanks in advance brother :)

  • @GYmDrip-g4d
    @GYmDrip-g4d Місяць тому

    HI ANES TY FOR UR VIDIOs i have one proublem with my annoncment bar when i made the hader trasparent the anoncment bar is also transpant i went to make it colorful

  • @ThePurplexShop
    @ThePurplexShop 2 місяці тому

    Thank you so much!! Liked & Subscribed!

  • @alexeirakha
    @alexeirakha 2 місяці тому +1

    hi first of all thanks you for the guide
    second In phone mode it does not fit itself It makes the site wider
    how i can fix it?
    thanks you

    • @connfoley1458
      @connfoley1458 Місяць тому

      Same Problem here site becomes extremely wide and the text on the banner disappears

  • @nicholas.chiariello4681
    @nicholas.chiariello4681 14 днів тому

    JazakAllahu khair :)

  • @jhinjjaro
    @jhinjjaro Місяць тому

    THANK YOU IT WORKED FOR ME :D

  • @Snoweee1
    @Snoweee1 5 місяців тому

    Brother I had requested you for a video which is like how to add parallax scrolling in Shopify i hope you working on it appreciate your hardwork man ❤

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому +2

      Yes and its noted, i had some difficulties with parallax scrolling due to conflicted codes but i will make it work.
      Keep in mind the videos you see are already made and scheduled.
      Cheers

    • @Snoweee1
      @Snoweee1 5 місяців тому

      @@OnHOWGuy thank you man and your last video also was super helpful which was about anauncment bar good job brother ❤️

  • @SamuelDaSilva-n9u
    @SamuelDaSilva-n9u Місяць тому

    Amazing, it is helpful

  • @zanenashop
    @zanenashop Місяць тому

    hello i try to copy ur codes but it doesn't work the txt is not moving

  • @CripplingDipStories
    @CripplingDipStories 4 місяці тому +1

    Just a suggestion, try showing the footage of the out put first and then show the process how to get it. Hope it helps!

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Thank you for the tip, i was doing that in the early days but i give up on it but now i will start doing it again.
      Thanks again.

  • @MingoMoves
    @MingoMoves 4 місяці тому +1

    so helpful thanks :)

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому +1

      You're very welcome

  • @juliayacaman2210
    @juliayacaman2210 Місяць тому

    how do I make the text never ending??

  • @august3402
    @august3402 2 місяці тому

    Good Job!

  • @Realjones383
    @Realjones383 4 місяці тому +1

    hey on desktop it works fine but on mobile the announcement bar buffers and doesn't move smoothly. i'm using dawn theme. can you please help me?

    • @Pokmung
      @Pokmung 3 місяці тому

      Same here, the FPS is too low it does not run smoothly

    • @ZainulAbid-xy4vn
      @ZainulAbid-xy4vn 2 місяці тому

      @@Pokmungdid you find sollution

    • @Pokmung
      @Pokmung 2 місяці тому

      @@ZainulAbid-xy4vn Yes bro

    • @trendingestore
      @trendingestore Місяць тому

      @@Pokmung Hi i have the same broblem can you help!

    • @EarringsByLadyCLLC
      @EarringsByLadyCLLC Місяць тому

      @@Pokmung I have the same problem too

  • @HizZonor
    @HizZonor 4 місяці тому

    Great video on how to add movement of text in the announcement bar. However, I have a further request:
    I want to add five spaces between separate message phrases in my announcement bar. I'm using the Spotlight 15.0.1 theme. When I type my message with the desired spaces, the spaces don't show up when published -- there's only one space between messages. Can you suggest a fix?

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Thank you, i appreciate that.
      I understand your issue and i think you might want to google "zero width joiner" and you can copy the space from those websites because that space is different and codes read it as a character.
      Cheers

  • @BmanJuancho
    @BmanJuancho 4 місяці тому

    Thank you for all the great videos. I was able to get the announcements to scroll, and the bar in gradient colors. The issue I am having is the bar is very small and the announcement is below the actual bar. Any ideas how I can fix it please. Thank you.

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      You're very welcome and glad i could help.
      I would recommend you to check out my video on how to change announcement bar text color and size because i did add the code to adjust the size and the padding as well.
      Also what theme/version are you using ?
      Please let me know in new comment as its difficult or me to see replies now.
      Cheers

    • @xneic6943
      @xneic6943 Місяць тому

      try to change the announcement bar height to 35 px instead of 5 px in theme.liqid codes at the end

  • @MrLucasimon
    @MrLucasimon Місяць тому

    Genial! 💥

  • @hasim9531
    @hasim9531 5 місяців тому

    thanks for the video, but just a question how do you implement the scrolling bar whilst having multiple announcements

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому

      You're very welcome, I guess you want to have two announcement one scrolling and one static ? If thats the case you might need to add a new announcement section file with different class name like announcement v2 so this code doesnt have an effect on it then add it same as you did with the first announcement bar.
      Cheers

  • @beham1016
    @beham1016 4 місяці тому

    Hi there Anas, as always you are the best! Can you please show us how to make the product image on the product page full width on the mobile version and maybe make the thumbnail carousels for the product pictures smaller? this can be a great video NGL!

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      I replied to your previous comment.
      Cheers

  • @Yu-Anime007
    @Yu-Anime007 4 місяці тому

    Hey thanks for this video it means a lot, can you make a video how can i change shopify share button icon plzz 😅😅

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      You're very welcome and glad i could help.
      Absolutely, i noted your request and i will work on it.
      cheers

  • @mihaelm8888
    @mihaelm8888 Місяць тому

    thanks bro

  • @joannazirka
    @joannazirka 3 місяці тому

    hello, i did all the steps but the sliding effect movement didn't work ! can you help me with it please i tried several times and checked that i am doing all the steps correctly, still didn t work
    please and thank you ( amazing channel by the way)

  • @LifeofEfa
    @LifeofEfa Місяць тому

    Hey bro, I followed every step but it didn't work and I don't want to remove anything in case i ruin my whole website. I need your help brother.

  • @AnoosyLtd
    @AnoosyLtd 4 місяці тому

    Hi Anas
    I'm using Refresh Theme, and i can't resize the bar! can you help please.
    I'm saving a lot of money after watching your videos. Thank you so much

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Hey, after i saw your comment i retested the code again on refresh and i was able to resize it and here is a picture : ibb.co/Wt8JQq8
      So not sure if you did something wrong or whats the case.
      You're very welcome and glad i could help.
      Cheers

  • @devrim_can
    @devrim_can 4 місяці тому

    you are the best

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Thank you and glad i could help.
      Cheers

  • @lifestorysunity.project
    @lifestorysunity.project 5 місяців тому

    good job friend

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому

      Thank you very much, glad i could help.
      cheers

  • @dirtbikecultureaustralia1106
    @dirtbikecultureaustralia1106 3 місяці тому

    mine seems really jittery when it scrolls

  • @CuriosityCorner675
    @CuriosityCorner675 4 місяці тому

    It doesn't work on mobile in my case... I am using Empire Theme version 11.1.0

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Hey, Unfortunately i dont try my codes on premium themes because i dont have access to their codes and i dont know how their theme structure works but for free themes i can go far and beyond.
      Keep in mind you are entitled to support if you bought the theme.
      Cheers

  • @YU-ANIME77
    @YU-ANIME77 5 місяців тому

    Bro Shopify showing me a outstanding charges of whole year subscription of Shopify , so this is my 2nd month of starting , so can pay it monthly ?

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому

      Hey, Yeah ofc you can pay monthly, They show the pricing yearly by default but you switch to monthly.
      Cheers

  • @CuriosityCorner675
    @CuriosityCorner675 4 місяці тому

    hello, new subscriber, thanks for your tutorial however can you also show how to apply that to mobile view?

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому +1

      Hey, welcome to the family and you're very welcome.
      This is for both mobile and desktop, it doesnt work for you on mobile ?if thats the case please let me know the theme/version you using.
      Please let me know in new comment as its difficult or me to see replies now.
      Cheers

    • @Mykhailo_Manilko
      @Mykhailo_Manilko Місяць тому

      @@OnHOWGuy I have a similar problem. It works on the phone, but it doesn't move smoothly, like it's glitching. I'm using Sense 15.2.0 theme. I will be grateful for your help.

    • @Styllair
      @Styllair Місяць тому

      @@Mykhailo_Manilko did you fix it?

    • @Mykhailo_Manilko
      @Mykhailo_Manilko Місяць тому

      @@Styllair No…

  • @ASTHamzakoo
    @ASTHamzakoo 5 місяців тому

    thank you

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому +1

      You're welcome, glad i could help.
      Cheers

  • @kamitalia707
    @kamitalia707 5 місяців тому

    If your bar is not moving only change The number from 20 to 10 or 15

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Oh i thought i mentioned that in the video but thanks.
      Cheers

  • @MariaSohail-g5y
    @MariaSohail-g5y 5 місяців тому

    heyy !! i added first code then my whole screen started moving

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому

      You probably pasted the code in the wrong section thats why.

  • @tinhluk
    @tinhluk 5 місяців тому

    I have lost all your codes and changes after updating a new version of the theme.

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому +1

      Hey, Keep in mind that its not necessary to update the themes, updates are just design-wise security updates are done in the backend which you dont have access to, whenever they release a new update just check the changelog for that update to see if there is any feature that got your attention and you want it, otherwise im already showing you how to add things that they might include in 2025 autumn updates haha.
      The good news is you can publish the version that you edited again as your main theme and its going to be in the theme's library list and it will still have that update message, so just publish that version and you are good.
      Cheers

    • @tinhluk
      @tinhluk 5 місяців тому

      @@OnHOWGuy Thank you for your advice again. ☺️

  • @neguinhogamerbryt
    @neguinhogamerbryt 5 місяців тому

    E-mail remarcketing bro please for checkout abandoned cart etc

    • @OnHOWGuy
      @OnHOWGuy  5 місяців тому

      Got you but it will mostly be done through an app.
      Cheers

    • @neguinhogamerbryt
      @neguinhogamerbryt 5 місяців тому

      @@OnHOWGuy already created certain written emails but do not know how to assemble their automation Please if possible help or as soon as possible you already helped a lot with my store I used almost everything from the channel

  • @TrendederBoss
    @TrendederBoss 4 місяці тому

    tried many codes but only your code worked

    • @OnHOWGuy
      @OnHOWGuy  4 місяці тому

      Ofc mine the only one that would work haha, Really glad to hear that and happy to help.
      Cheers

  • @muskanrajouria3623
    @muskanrajouria3623 3 місяці тому

    It's not working

  • @HSPArts-yn4mb
    @HSPArts-yn4mb 4 місяці тому +1

    your code is not working bro

  • @sefukas6598
    @sefukas6598 Місяць тому

    it didnt work):

  • @letuan1393
    @letuan1393 3 місяці тому

    like