Hi,
I want to apply gradient background color to my sections. I want to choose which section to put gradient as background.
The colors are #0569bc #0678d6 #3EA5FA
Please guide me how to do this!
Topic summary
Goal: apply a gradient background to selected sections of a Shopify (Reformation theme) store using colors #0569bc, #0678d6, #3EA5FA.
Proposed solution: add custom CSS in the theme’s asset stylesheet.
- Path: Admin Dashboard > Online Store > Edit Code > Assets > open application.css or base.css or style.css; paste CSS at the end.
- Implementation provided targets the Featured Collection section via the .featured-collection selector and uses a linear-gradient to right with the three colors.
Artifacts: a screenshot preview was shared showing the gradient effect applied.
Scope/limitations: the reply demonstrates applying the gradient to the Featured Collection section specifically; it does not detail how to select or identify other sections for similar styling.
Status: actionable guidance provided; no confirmation from the original poster on results or whether additional sections need configuration. The discussion appears open with potential follow-up needed if gradients are required on other sections.
Hi, @Farmmedix welcome to the Shopify Community,
Please follow below instructions for adding gradient color to the background
1- Admin Dashboard > Online Store
2- Edit Code > Theme Files
3- Assets folder > application.css,OR base.css, OR style.css
paste below code in that last of any of above files
.featured-collection {
background-image: linear-gradient(to right, #0569bc, #0678d6, #3EA5FA);
}
Result will be like below.
