How can I create a scrolling announcement bar with two messages?

pongopetfood · ‎12-01-2023

Hello,

I would like to create a scrolling announcement bar with 2 differents messages, and change the colour of the background and the font !

I also want add my logo between the message like this : https://miliamatcha.com/

Theme : Prestige

Thanks a lot

Taknify · ‎12-01-2023

You can easily add this using code (I don't think Shopify has any section that provides that to you natively.) Please use this as an example starting point: https://codepen.io/willarch/pen/xxMzYag

You can duplicate your theme and add this piece of code on theme.liquid right below the <body> tag for experimenting it.
Let me know if that helps or you require further clarification.
Thanks.

Need to tweak your store for Black Friday? Simply, send me a message.

aditya58singh · ‎12-01-2023

Here is code you can add in HTML Section

 <div class="marquee">
        <div class="track">
            <span class="content">Your first message here</span>
            <img src="path-to-your-logo.png" alt="Logo" class="logo">
            <span class="content">Your second message here</span>
        </div>
    </div>

Then ADD CSS

.marquee {
    width: 100%;
    overflow: hidden;
    background-color: lightpink;
}

.track {
    white-space: nowrap;
    display: flex;
    animation: marquee 10s linear infinite;
}

.content {
    padding: 10px 20px;
    color: #000; /* Change the font color if needed */
    font-size: 20px;
}

.logo {
    height: 50px; /* Adjust the size of your logo */
    padding: 10px;
}

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

ADD JS SCRIPT

document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.track');
    const trackWidth = track.offsetWidth;
    const viewportWidth = window.innerWidth;
    const totalWidth = trackWidth + viewportWidth;
    const animationDuration = totalWidth / 100; // Adjust the speed here

    track.style.animationDuration = `${animationDuration}s`;
});

- Helpful? Like and Accept a solution.
- Cart Drawer Upsell & Free Gift Boost conversions & AOV with upsell-cross sell, free gifts & add-ons with customizable cart drawer.

Sales Countdown Timer Bar create urgency with count down timer, navigation menu with images and lot more.

pongopetfood · ‎12-28-2023

Hey,

Thanks for your message but it doesn't work like nothing change...

How can I create a scrolling announcement bar with two messages?

How can I create a scrolling announcement bar with two messages?

Community Blog Articles