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!
Create a New Section Liquid
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 }} </div>
</div>
<!--- Coded by jotting.com --->
</div>
{% schema %}
{
"name": "Marquee",
"settings": [
{
"type": "text",
"id": "marquee",
"label": "Marquee text"
}
] ,
"presets": [
{
"name": "Marquee",
"category":"Custom"
}
]
}
{% endschema %}
Add Code in Theme.css
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.
31 Replies to How To Add Scrolling Text/Marquee on Shopify
Hi, there is a long delay between the text.
How do I eliminate the timing gaps between?
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.
Thank you!, I appreciate it :)!
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
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.
thank you for the help 🙂
Nps 🙂
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?
Actually the wait time is the same… just scrolls way too fast and repeats the message twice (Because I wrote it twice).
Hi Arden, as mentioned previously you’d need to play around with the animation seconds/delay in order to find the sweet spot.
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;
}
Thanks mate. I’ll have a play around with it later and try find the sweet spot. Cheers.
The marquee on our website isnt working well on apple iphone devices,it works alright on everything else,what should we do?
Can you show an example?
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/
Hi Pao,
Put the background css on the marquee-wrapper class
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 ! 🙂
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.
Thank You very much, i will sent pass.
Have a great holidays!
Hi Oliv,
Updated guide, please replace the code, this should also solve the iOS issue.
Hello John, THANK YOU. Everything works! 🙂
I created the infinite marquee but the animation started late. I tried changing seconds on animation delay but nothing has changed.
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.
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?
Hi Yesh,
Please find the updated solution. Replace all the previous code you used. This solves the iOS problem, I also simplified it.
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.
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
Hi. Are you able to explain how to make the marquee customisable for font colour and background? Thank you.
Hi Gemma, the feature would definitely not fit, but when I get the time I could add it.
Hi, how do I customize the color of the background?
Hi Shay,
You need to add a background color to the marquee-container tag
Comments are closed.
How to Create a Product Image Slider on Dawn Theme
How To Create A Sticky Add To Cart On Shopify
How to Create a Featured Product Slider on Shopfiy
Cart Drawer/Slider For Dawn Theme
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent