How To Add Marquee Effect Announcement Bar [Shopify – Without APP]

Step 1: Access Your Shopify Admin

• Log in to your Shopify store by navigating to your store URL followed by /admin.
• From your Shopify admin dashboard, click on Online Store in the left-hand menu.

Step 2: Select Your Theme

• Once you’re in the Online Store section, go to Themes.
• If you’re using a theme like Dawn or any other free or paid theme (Spotlight, Refresh, Sense, Craft, etc.), this method will work seamlessly.

To demonstrate, let’s work with the Dawn theme. If you haven’t installed it yet, click Add Theme and select Dawn (or whichever theme you are using).

Step 3: Add a New Section for the Scrolling Text

• Click on Customize next to your theme. This will take you to the theme editor.
• In the left-hand column, find where you want to place your scrolling marquee (e.g., right under the header or at the top of the page).
• Click on Add Section.
• Scroll down and select Custom Liquid.

Step 4: Add the Marquee Code

Now, here’s the magic: adding the marquee code. I have two styles of marquee scrolling text you can choose from. Both styles will allow your text to scroll infinitely across the screen.

Step 5: Customize the Marquee Style

You can easily customize your marquee by changing the text, background color, and font size.

Changing Text

• Simply replace the text inside the <marquee> tag with your desired announcement, like “Free Shipping Worldwide” or “50% Off All Items”.

Adjusting the Font Size
Change the font size by modifying the font-size value. For example, font-size: 20px; can be increased or decreased to suit your design.

Step 6: Preview Your Store

After making your changes, click Save and then hit Preview to see how your new scrolling text looks on your live store.

You can experiment with different announcements, colors, and fonts until you’re happy with the appearance.

Conclusion

And there you have it! You’ve successfully added an infinite scrolling marquee text to your Shopify store without using any apps or paying anything extra. This feature is fully customizable, works on all themes, and is mobile-friendly.

Style 1

Copy Code

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div id="node-marquee">
  <span># Fashion # Beauty # Fabrics
  # Fashion # Beauty # Fabrics
    # Fashion # Beauty # Fabrics
    # Fashion # Beauty # Fabrics
    # Fashion # Beauty # Fabrics
    </span>
</div>
<style>
    #node-marquee {
        background-color: #ed665c;
        color: white;
        font-size: 30px;
        overflow: hidden;

    }
    #node-marquee span {
        display: inline-block;
        white-space: nowrap; 
    }
</style>
<script>
    nodeMarquee({
        parent: '#node-marquee',
        speed: 1
    });
</script>

Style 2

Copy Code

<div class="marquee">
    <h1>*  Fashion *  Beauty *  Fabrics *  Fashion *  Beauty *  Fabrics *  Fashion *  Beauty *  Fabrics</h1>
  </div>
<style>
.marquee {
  overflow: hidden;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
  flex-direction: row-reverse;
}

.marquee h1{
  font-size: 30px;
  white-space: nowrap;
  text-transform: uppercase
}
</style>
<script>
  function Marquee(selector, speed) {
  const parentSelector = document.querySelector(selector);
  const clone = parentSelector.innerHTML;

  parentSelector.insertAdjacentHTML('beforeend', clone);
  parentSelector.insertAdjacentHTML('beforeend', clone);
  const firstElement = parentSelector.children[0];
  let i = 0;
  setInterval(function () {
    firstElement.style.marginRight = `-${i}px`;
    if (i > firstElement.clientWidth) {
      i = 0;
    }
    i = i + speed;
  }, 0);
}
window.addEventListener('load', Marquee('.marquee', 0.2))
</script>