How to add moving announcement bar above footer

[Pyimk]

Hello, I am using Craft Theme.
I have a moving announcement bar at the top of every page using an app.
I want to add a moving announcement bar at my main product page.
It will be positioned above the footer.
Please help me step by step.

[jennie258fitz]

Sure, I can help you add a moving announcement bar to your main product page in the Craft Theme. Here are the steps:

Access Theme Code:
Go to your Shopify admin panel.
Navigate to Online Store > Themes.
Click on Actions next to your current theme and select Edit code.
Locate the Footer File:
In the left sidebar, find and open the footer.liquid file. This file is usually located under Sections or Snippets.
Add Announcement Bar Code:
Add the following code snippet just above the closing </footer> tag in the footer.liquid file:
HTML

<div class="announcement-bar" style="position: fixed; bottom: 0; width: 100%; background-color: #f8d7da; color: #721c24; text-align: center; padding: 10px; animation: marquee 10s linear infinite;">
<p>Your announcement text goes here!</p>
</div>

<style>
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
AI-generated code. Review and use carefully. More info on FAQ.
Customize the Announcement Bar:
Replace "Your announcement text goes here!" with your actual announcement message.
Adjust the background-color, color, and padding styles as needed.
Save and Preview:
Click Save to apply the changes.
Preview your main product page to ensure the announcement bar appears and moves as expected

[Pyimk]

It is not working sadly. It went full screen

[Pyimk · Accepted solution]

GOT ITTT. USED APP TO DO IT