How To Add Scrolling Text/Marquee on Shopify

31 Replies to How To Add Scrolling Text/Marquee on Shopify

1. Hi, there is a long delay between the text.
   How do I eliminate the timing gaps between?

   1. Hi Jla, it sounds like your text is too short for the timing, what you can do is repeat the sentence. For example.

      Instead of ‘Welcome to this coding tutorial.’ put, ‘Welcome to this coding tutorial. Welcome to this coding tutorial.’ This will make the text scroll faster. Obviously the shorter the sentence, the slower it will go. So you need to repeat the text.

2. Thank you!, I appreciate it :)!

3. Hi,
   Thank you for the code It was exactly what I was looking for. I implemented and it works fine but there is weird issue which i am not able to figure out,
   I have added a link in the text using aref tag for people to be able to visit the link, but It shows once and then it doesn’t, I figured that it the link gets active when marquee double is scrolling and when the marquee words are scrolling the same link isn’t clickable.
   Please help, I am not able to figure it out.
   Thank you

   P.S : this is the preview for you to take a look
   https://fd9fvpvrfdjfesjd-15181060.shopifypreview.com

   1. Hi Shan,

      It’s because the first marquee word line wraps on top of the double, which makes it seem like it’s not working, but infact when you hover over that non-clickable link, it’s actually hovering over the first marquee words. I suggest wrapping the whole thing into a link. That would make the bar a clickable link essentially.

      1. thank you for the help 🙂

         1. Nps 🙂

4. Hey Bluish,

   Looks good on desktop but on my phone there’s an extremely long pause between repeating. If i extend the message like you mentioned above it does reduce the wait time however the texts scrolls so fast it’s virtually unreadable. Any ideas?

   1. Actually the wait time is the same… just scrolls way too fast and repeats the message twice (Because I wrote it twice).

      1. Hi Arden, as mentioned previously you’d need to play around with the animation seconds/delay in order to find the sweet spot.

   2. You’d have to find the middle ground between text, too much itll show to fast, too little itll be so slow. You will need to start player with the animation in the css code. Unfortunately that’ll be a guessing game til you get to the sweet spot. Below is the code you need to play with The seconds are the focus part you need to play with.

      .marquee-words span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee-keywords 30s linear infinite;
      -webkit-animation: marquee-keywords 30s linear infinite;
      font-size: 20px;
      letter-spacing: 0.2em;
      font-family: var(–heading-font-family);
      animation-delay: -14s;
      -webkit-animation-delay: -14s;
      }

      .marquee-double span {
      animation-delay: 1s;
      -webkit-animation-delay: 1s;
      }

      1. Thanks mate. I’ll have a play around with it later and try find the sweet spot. Cheers.

5. The marquee on our website isnt working well on apple iphone devices,it works alright on everything else,what should we do?

   1. Can you show an example?

6. Hello 🙂 I would like to add a background color, where can I do it?, this is the example i’m trying to replicate: https://hairtamin.com/

   1. Hi Pao,

      Put the background css on the marquee-wrapper class

      1. https://www.bublysuds.com/ , but site is stil underconstruction. It work fine on android app but on IOS not. No matter of browser .
         Thank You ! 🙂

         1. Hi Oliv, can you provide the site password via the contact us form. I am also on holidays, so can’t investigate until 10/1/2022.

            1. Thank You very much, i will sent pass.
               Have a great holidays!

         2. Hi Oliv,

            Updated guide, please replace the code, this should also solve the iOS issue.

            1. Hello John, THANK YOU. Everything works! 🙂

7. I created the infinite marquee but the animation started late. I tried changing seconds on animation delay but nothing has changed.

   1. Hi Paolo,

      I’ve updated the guide, please replace all the previous code. You can now alter the css seconds to change the speed. If you are seeing gaps, then double up the text.

8. First off, thanks, John, for this great solution! It works on desktop and android just fine. What I’m having trouble with is it not showing at first on iOS devices (iPhone & iPad) and then zooming by too fast to read. No tinkering with the .marquee-words and .marquee-double classes has yielded any acceptable results. Has anyone found a good solution yet?

   1. Hi Yesh,

      Please find the updated solution. Replace all the previous code you used. This solves the iOS problem, I also simplified it.

9. Hi John, Thanks so much for this tutorial! Can I ask how I would change the text to be in the Header font instead of the body text? Thank you.

   1. Hi Nicola, what do you mean in the “header font” I would assume you want to change the size? just change the element to h2/h3 or the sizing of the text element

10. Hi. Are you able to explain how to make the marquee customisable for font colour and background? Thank you.

    1. Hi Gemma, the feature would definitely not fit, but when I get the time I could add it.

11. Hi, how do I customize the color of the background?

    1. Hi Shay,

       You need to add a background color to the marquee-container tag

Comments are closed.