Shopify Custom Liquid: Scrolling Announcement Banner (CSS + HTML)

Example 

Introduction

A lightweight scrolling banner to showcase promotions, announcements, or store policies, with smooth animations and a mobile-friendly design.

This scrolling banner allows you to display multiple announcements in a compact space without overwhelming the layout. It auto-scrolls horizontally, pauses on hover, and is fully responsive for mobile devices. Perfect for highlighting store policies, special offers, and time-limited promotions.

 

When to Use This

● Highlight time-sensitive promotions (e.g., “Save $100 Today Only!”)

● Showcase store guarantees (e.g., “Free Shipping Over $50”)

● Display multiple messages in one space without overwhelming visitors

● Create a more premium, interactive brand feel

Code (Custom Liquid + CSS)

<style>
  /* Banner container */
  .scrolling-banner {
    background-color: #fff;  /* Background color */
    overflow: hidden;
    white-space: nowrap;
    height: 60px;  /* Banner height */
    display: flex;
    align-items: center;
    font-size: 14px;
    position: relative;
  }

  /* Scrolling track */
  .scrolling-track {
    display: inline-block;
    animation: scroll-left 30s linear infinite;
    will-change: transform;
  }

  /* Pause animation on hover */
  .scrolling-banner:hover .scrolling-track {
    animation-play-state: paused;
  }

  /* Single message style */
  .scrolling-track span {
    display: inline-block;
    padding: 0 40px; /* Space between messages */
    color: #333;
  }

  /* Scrolling animation */
  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .scrolling-banner {
      background-color: #f5f5f5;
    }
  }
</style>

<!-- Banner HTML structure -->
<div class="scrolling-banner">
  <div class="scrolling-track">
    <!-- Messages (repeat once for seamless loop) -->
    <span>30-Day Return</span>
    <span>2 Year Warranty</span>
    <span>Free Shipping</span>
    <span>4.8★ Owner Rated</span>
    <span>Fast Shipping</span>
    <span>Limited $100 OFF</span>
    <span>24 Hours Countdown</span>
  </div>
</div>

Preview

How to Use

● Copy the HTML & CSS code above.

● Paste it into a Custom Liquid section or block in your Shopify theme editor.

● Replace the text inside <span> with your own messages.

● Adjust colors, font size, and scroll speed as needed in the CSS part.

● Save and preview your store to check the effect.

Customizable parameters

Parameter	Description	Default	Example Change
background-color	Banner background color	#fff	#f5f5f5
height	Banner height	60px	50px
font-size	Text size	14px	16px
animation-duration in scroll-left	Scroll speed	30s	20s (faster)
<span> text	Announcement messages	Sample list	"Free Returns", "Buy 1 Get 1 Free"

Pro Tip:

• Use keywords in your announcement text to improve SEO (e.g., “Free Shipping in USA”, “2-Year Warranty”).

• Keep each message under 6–8 words for readability.

• Consider seasonal updates (e.g., "Christmas Sale", "Valentine's Offer").

• Use emoji or symbols (★, ✅, 🚚) to draw attention without extra images.