Custom gradient for Announcement bar

Solved
maxroddy
Excursionist
42 7 13

Hello!  

I would like to ask if anyone know how to do this? My store would better suit a colorful gradient. Any help appreciated.

thanks 

Accepted Solutions (2)

Accepted Solutions
KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@maxroddy 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#announcement {
background: #a4118e;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

if change color try  this 

https://cssgradient.io/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@maxroddy 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 4 (4)
Natztech
Shopify Partner
2237 565 1373

hello @maxroddy 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@maxroddy 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#announcement {
background: #a4118e;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

if change color try  this 

https://cssgradient.io/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

maxroddy
Excursionist
42 7 13

You just made my day KetanKumar! Thank you very much for your help. My announcement has rainbow gradient now .

 

KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@maxroddy 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post