Blog

You are currently viewing Add Marquee Effect In Shopify Announcement Bar?
Add Marquee Effect In Shopify Announcement Bar?

Add Marquee Effect In Shopify Announcement Bar?

1. Create a section and name it marquee and paste below code.

2. Comment the default announcement bar from layout or theme if you want to.

3. Add {% section ‘marquee’ %} in place of default announcement bar

<style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 43px;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 7s linear infinite;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
      {%- endif -%}
    {%- endif -%}
  </div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
   // console.log(marquees.item(i));
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "            ")
  console.log(improvedText)
  marquees.item(i).innerHTML = improvedText
}
</script>
{% schema %}
{
  "name": "Marquee Announcement",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Welcome to our store",
      "label": "Add text to display"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}

Add Marquee Effect in Shopify Announcement Bar

Want to make your Shopify announcement bar more attractive and eye-catching? In this tutorial, you’ll learn how to add a scrolling marquee effect to your Shopify announcement bar using simple CSS.

A marquee announcement bar is a great way to display promotional messages, special offers, free shipping announcements, discount codes, and important store updates. Instead of showing a static message, the text continuously moves across the screen, making it more noticeable to visitors.

The best part is that you don’t need to install a paid Shopify app or use complicated code. You can add this effect directly to your Shopify theme with a little CSS.

What you’ll learn

  1. How to access your Shopify theme code.
  2. How to find the announcement bar CSS file.
  3. How to add a smooth scrolling marquee animation.
  4. How to adjust the scrolling speed.
  5. How to make the effect work on desktop and mobile.

Add a marquee effect using CSS

You can start by duplicating your Shopify theme as a backup. Then:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click the three dots next to your active theme.
  3. Select Edit Code.
  4. Open the base.css or theme.css file inside the Assets folder.
  5. Scroll to the bottom and add your custom CSS.
  6. Click Save and preview your store.

Here is an example of CSS you can use:

.announcement-bar {
  overflow: hidden;
  white-space: nowrap;
}

.announcement-bar__message {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__message {
    animation: none;
    padding-left: 0;
  }
}

Note: Shopify themes use different announcement bar HTML structures, so you may need to adjust the CSS selector to match your theme.

You can also change 15s to 10s for faster scrolling or 25s for slower scrolling.

Shopify also lets you add and customize announcement bars through its theme editor. Add an announcement bar+1

Useful resource: Shopify announcement bar documentation.

Looking to improve your Shopify store? This simple marquee effect is a great way to highlight free shipping, discounts, and special promotions without installing a paid app.

Ready to become a better coder? Don’t miss this tutorial!   Animation Direction in CSS