All things Shopify and commerce
Hi Team, this is my home page link (https://kiaappliances.com/)
To display gradient on header I used the code.........
.t4s-section-header [data-header-height] {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
Now I want to add the same gradient color but to my footer of website which right now is only black, can you please guide me which code to add. I would be grateful.
In the picture you can see that I have placed the header gradient code in this global custom css, can you tell me what code to put here and how to put it with the header existing one so that the header and footer colors can match.
Solved! Go to the solution
This is an accepted solution.
Please add this code to your Global custom css
#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hello @harrygoat1218 ,
Please place the below-provided code to your Global Custom CSS.
#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
Steps:
Fig: Custom CSS Section
Fig: Footer Result
Thank You.
This is an accepted solution.
You can update code to this and check
#t4s-footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
#t4s-footer * { background: transparent !important; }
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Please add this code to your Global custom css
#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you Sir, as always you are the best.
Can you please also tell this for Fotter Bottom...........
I also want it to have the same color.
This is an accepted solution.
You can update code to this and check
#t4s-footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
#t4s-footer * { background: transparent !important; }
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you Sir it worked, can you also check your messages Sir Dan if possible please..................
Hi, I am using the Dawn theme and it doesn't work for me. I have put this code into my global custom css but nothing has changed with my footer. Can you help me?
Hi @Nirmine1111
Please try to use this code for your Dawn theme, add it at the bottom of base.css file
footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
footer * { background: transparent !important; }
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hello @harrygoat1218 ,
Please place the below-provided code to your Global Custom CSS.
#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
Steps:
Fig: Custom CSS Section
Fig: Footer Result
Thank You.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025