Solved

Custom gradient for Announcement bar

maxroddy
Excursionist
43 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)

KetanKumar
Shopify Partner
36839 3635 11972

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
36839 3635 11972

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)

Kinjaldavra
Shopify Partner
2302 570 1422

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
36839 3635 11972

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
maxroddy
Excursionist
43 7 13

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

 

KetanKumar
Shopify Partner
36839 3635 11972

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