how to add scrolling marquee text on dawn theme

[saucistudio]

I am working on a client's website and need help adding a scrolling text feature to the header of the dawn theme. the store has not launched yet and this is the preview link.

https://www.shadyeclipse.com/?_ab=0&_fd=0&_sc=1

also. the buttons are showing with an opacity for some reason.

[Made4uo-Ribe]

Hi @saucistudio 

The marquee design is not included in the features of the Dawn theme. Custom coding is required to implement it. Let us know if you're interested. Thank you!

[Dan-From-Ryviu]

Hi @saucistudio 

You can use this free Annify announcement bar app to do that. 

[DaisyVo]

Hi @saucistudio 

To add a scrolling marquee text to the header of the Dawn theme and fix the button opacity issue, here’s how you can do it step by step. I'll keep things clear and easy to follow. Here's what you need to do:

1. Adding a Scrolling Marquee Text

To add a scrolling marquee in the header, we’ll use custom code in your Dawn theme.

Steps:

1-Access the Theme Editor:

• Go to your Shopify Admin > Online Store > Themes.
• Find the Dawn theme and click "Actions" > "Edit Code."

2-Edit the Header Code:

• Look for header.liquid in the Sections folder and open it.
• Find the location where you want the marquee text to appear (typically just before or after the navigation/menu).

1. Add the Marquee Code: Insert the following HTML and CSS:
   
   <div class="marquee-container">

    <marquee behavior="scroll" direction="left">

        Welcome to [Your Store Name]! Enjoy free shipping on all orders!

    </marquee>

</div>

1. Optional Styling (CSS): Add the CSS to the base.css file in the Assets folder to make the marquee look nice:
   
   .marquee-container {

    background-color: #000; /* Adjust the background color */

    color: #fff; /* Adjust the text color */

    font-size: 16px;

    padding: 10px;

    font-weight: bold;

}

marquee {

    display: block;

    font-family: Arial, sans-serif;

}

3-Save Changes: After adding the code, click "Save." Preview your store to ensure the marquee displays correctly.

2. Fixing the Button Opacity Issue

Opacity issues are usually caused by either CSS styling or hover states in the theme.

Steps:

1-Inspect the Issue:

• Open your store preview link and use your browser’s Inspect Element tool (right-click > Inspect).
• Check the button elements and look for CSS rules affecting opacity (e.g., opacity: 0.5; or similar).

2-Override the CSS:

• Go to the Assets folder > Open base.css (or the main CSS file for the theme).
• Add this rule to ensure buttons appear fully opaque:

button,

.btn {

    opacity: 1 !important;

}

button:hover,

.btn:hover {

    opacity: 0.9; /* Optional hover effect */

}

1.  

3-Save and Check: Save the changes and refresh the store preview. The buttons should now display correctly without the unwanted opacity.

Final Preview:

Here’s how it should look:

• The marquee text will scroll smoothly across the header.
• Buttons will appear fully visible without any unnecessary transparency.

If you’d like to customize the marquee further (e.g., change speed, direction, or pause on hover), let me know—I’d be happy to help you fine-tune it.

If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy