How can I add gradient to my store's announcement bar and buttons?

Store Design

Topic summary

A user running the Prestige theme by Maestroo seeks to add gradient styling to their announcement bar and buttons to match their logo gradient.

Solutions Provided:

Two community members offered CSS code solutions:

  • PageFly-Richard provided detailed CSS targeting .AnnouncementBar__Wrapper with cross-browser gradient syntax, instructing the user to paste the code at the bottom of theme.css in the theme editor (Online Store → Theme → Edit code → Assets → theme.css).

  • EcomGraduates offered a simpler alternative using .site-header__announcement for the announcement bar and .button selectors for buttons, with placeholder color codes (#COLOR1, #COLOR2) to be replaced with the user’s logo colors.

Current Status:

The user asked for clarification on where to paste the code, and PageFly-Richard confirmed the location with a screenshot showing the theme.css file path. The discussion remains open as implementation has not been confirmed.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi how do i add gradient to the announcement bar and buttons for my store. I am using the Prestige theme by Maestroo. The link to my website is:

https://modernhomewares.com.au/

P.S. I would like the gradient to match the gradient in my logo.

2

Hi @SuleimanSethi ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.AnnouncementBar__Wrapper {
    background: rgba(99,33,55,1);
    background: -moz-linear-gradient(left, rgba(99,33,55,1) 0%, rgba(99,33,55,1) 0%, rgba(210,138,149,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(99,33,55,1)), color-stop(0%, rgba(99,33,55,1)), color-stop(100%, rgba(210,138,149,1)));
    background: -webkit-linear-gradient(left, rgba(99,33,55,1) 0%, rgba(99,33,55,1) 0%, rgba(210,138,149,1) 100%);
    background: -o-linear-gradient(left, rgba(99,33,55,1) 0%, rgba(99,33,55,1) 0%, rgba(210,138,149,1) 100%);
    background: -ms-linear-gradient(left, rgba(99,33,55,1) 0%, rgba(99,33,55,1) 0%, rgba(210,138,149,1) 100%);
    background: linear-gradient(to right, rgba(99,33,55,1) 0%, rgba(99,33,55,1) 0%, rgba(210,138,149,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632137', endColorstr='#d28a95', GradientType=1 );
}

PageFlyRichard_0-1678278451649.png
PageFlyRichard_0-1678278451649.png1871×351 269 KB

I hope it would help you
Best regards,

Richard | PageFly

3

hello there

/* Gradient for announcement bar */
.site-header__announcement {
background: linear-gradient(to right, #COLOR1, #COLOR2);
}

/* Gradient for buttons */
.button, .btn, input[type="submit"] {
background: linear-gradient(to right, #COLOR1, #COLOR2);
}

Make sure to replace “#COLOR1” and “#COLOR2” with the colors that match the gradient in your logo.

4

Where do i paste this?

5

Hi @SuleimanSethi ,

You can paste my code in theme.css

PageFlyRichard_0-1678336878895.png
PageFlyRichard_0-1678336878895.png798×632 83 KB

I hope it would help you
Best regards,

Richard | PageFly