How to Add a Scrolling Marquee Announcement Bar in Shopify

/ Blog

Adding a scrolling marquee announcement bar to your Shopify store can be a great way to grab your customers’ attention with special offers, news, or updates. It’s an eye-catching feature that can be customized to fit your brand’s style. At Morosoft Technologies, we specialize in solutions to help businesses enhance their online stores without the need for paid apps.

Hereā€™s how you can add a scrolling marquee effect to your Shopify store easily.

Step 1: Access Your Shopify Admin

First, log in to your Shopify store by navigating to your store URL, followed by /admin.

From your Shopify admin dashboard:

  • Go to Online Store in the left-hand menu.
  • Once there, click on Themes.

This method works seamlessly with any Shopify theme, including free or paid themes such as Dawn, Spotlight, Refresh, Sense, and Craft.

Step 2: Add a New Section for the Scrolling Text

  • Click on Customize next to your theme, which will take you to the theme editor.
  • In the left-hand column, find the section where you’d like to place the scrolling marquee (such as at the top of your homepage or beneath the header).
  • Click Add Section and select Custom Liquid.

Step 3: Add the Marquee Code

In the Custom Liquid section, you will paste the following code. This creates a visually appealing scrolling marquee effect for your store.

<!-- Importing the marquee library -->
<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>

<!-- Marquee container -->
<div id="node-marquee">
  <span># Fashion # Beauty # Fabrics # Free Shipping Worldwide on All Orders! # Beauty # Fabrics
    # Fashion # Beauty # Free Shipping Worldwide on All Orders!
    # Fashion # Beauty # Free Shipping Worldwide on All Orders!
    # Fashion # Beauty # Free Shipping Worldwide on All Orders!
  </span>
</div>

<!-- CSS for styling the marquee -->
<style>
    /* Style the marquee container with background color, text color, and font size */
    #node-marquee {
        background-color: #ed665c; /* Red background */
        color: white; /* White text */
        font-size: 30px; /* Large text size */
        overflow: hidden; /* Ensure content is within the box */
    }

    /* Ensure text remains in one line */
    #node-marquee span {
        display: inline-block; /* Single-line text */
        white-space: nowrap; /* Prevent text wrapping */
    }
</style>

<!-- JavaScript to control marquee behavior -->
<script>
    // Function to initialize the scrolling marquee
    nodeMarquee({
        parent: '#node-marquee', // Target the marquee container
        speed: 1 // Set the scrolling speed (increase for faster scrolling)
    });
</script>

Step 4: Customize Your Marquee

You can modify the marquee content to fit your needs. Here’s how to customize different parts of the code:

  • Changing the Text: Replace the text inside the <span> tag with your custom announcement. For example: ā€œ50% Off All Summer Apparel!ā€ or ā€œFree Shipping on Orders Over $100!ā€
  • Adjusting Colors: In the CSS section, change the background-color and color values to match your storeā€™s branding.
  • Changing Speed: Adjust the speed value in the JavaScript to increase or decrease the speed of the scrolling text.

Step 5: Save and Preview

Once you’ve made your changes, click Save, and then click Preview to see the scrolling marquee in action. The text should now scroll across your store’s announcement bar, providing a dynamic way to highlight promotions and updates.

Conclusion

By following these simple steps, you can add a scrolling marquee announcement bar to your Shopify store without using any paid apps. It’s a quick and easy solution that works across all Shopify themes and is fully customizable to match your brand’s look and feel.

At Morosoft Technologies, we aim to empower businesses by offering helpful tools and techniques to enhance their Shopify stores, ensuring you make the most of your online presence.

Related Posts