Shopify

How To Add Scrolling Text/Marquee on Shopify

Looking to create a scrolling text effect/marquee for your Shopify store? Look no further and follow this guide!

Click here to view our example store

You see this awesome scrolling text also known as “Marquee” and wondering how do I implement this on my Shopify site? Look no further below is a easy to follow tutorial on how to add this to your Shopify site. Let’s get into it!

Head over to the Sections folder and click Add a new section, and name the section marquee and click add. You will now have a bare bone section liquid file with minimal code. Delete all the default code and add the below code to that liquid file.

<div class="marquee-container">
  <div class="marquee">
    <div class="marquee-words">{{ section.settings.marquee }}&nbsp;</div>
  </div>
  <!--- Coded by jotting.com --->
</div>

{% schema %}
{
  "name": "Marquee",
  "settings": [
  {
    "type": "text",
    "id": "marquee",
    "label": "Marquee text"
  }
  ] ,
  "presets": [
  {
    "name": "Marquee",
    "category":"Custom"
  }
  ]
}
{% endschema %}

Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Dawn theme, so in this case the CSS/SCSS file is named base.css. Scroll to the very bottom and paste the below code.

.marquee-container {
  overflow: hidden;
}

.marquee {
  margin: 0;
  display: inline-block;
}

.marquee-words {
  white-space: nowrap;
  animation: marquee-keywords 15s linear infinite;
  font-size: 20px;
  letter-spacing: 0.2em;
}

@keyframes marquee-keywords {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

Add The Text in The Customizer

You’re done! Go to your theme customizer. Find the Marquee section and add it to your home page then add the text you want to have scrolling. Start showing your cool design on your Shopify site.

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

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

    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.

  1. 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.

  2. 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;
      }

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

        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.

        2. Hi Oliv,

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

  4. 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.

  5. 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.

  6. 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

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

Comments are closed.