How to put a gradient background on the announcement bar

Store Design
1

As per title I would like to know how I can put a gradient background on the ad bar.
My theme is Focal.

Thanks

2

Hello @alexinko

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the home page link?

3

Hello,

Thanks for your help, this is the link to my home page: https://balancershop.com/

4

@alexinko

Do you want horizontal or vertical and 2 color code to use gradient background?

Screenshot at Dec 14 00-29-08.png
Screenshot at Dec 14 00-29-08.png2009×805 277 KB

5

I would like a 2-color horizontal gradient.

6

@alexinko

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Edit code:

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

7

Thank you!!! It works perfectly! If I wanted to change the colors in the gradient is it possible?

8

@alexinko

You can change the css code easily:

Screenshot at Dec 14 00-55-47.png
Screenshot at Dec 14 00-55-47.png769×167 57.3 KB

Red: color above

Yellow: color below

You can change with client color name or rgb color code