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">
  <div class="marquee-wrapper">
   <p class="marquee-words">
    <span>{{ section.settings.marquee }}&nbsp</span>
  </p>
  <p class="marquee-words marquee-double">
    <span>{{ section.settings.marquee }}&nbsp</span>
  </p>
  </div>
<!--- Coded by bluish.io --->
</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 Debut theme, so in this case the CSS/SCSS file is named theme.css. Scroll to the very bottom and paste the below code.

.marquee {
  margin: auto;
  margin-top: auto;
  padding-bottom: 32px;
  margin-top: 55px;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: flex;
  justify-content: center;
}

.marquee-words {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

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

@keyframes marquee-keywords {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@-webkit-keyframes marquee-keywords {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}

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.

You’re done! With Shopify 2.0, you can add this section ANYWHERE in your theme. So start showing your cool design on your Shopify site.

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *