Custom gradient CSS not working

Store Design
, , ,

Topic summary

Goal: Apply a site-wide linear-gradient background via custom CSS, but saving changes in the Online Store editor failed with the error “Online Store editor session can’t be published.”

Key steps and fix:

  • After requesting access details to inspect, a solution was provided to bypass the editor issue.
  • Add the CSS directly in the theme’s base.css file (at the end), defining a .gradient class with the desired linear-gradient and an !important flag.

Result:

  • The gradient background rendered correctly (confirmed by a screenshot). The original poster confirmed success and expressed thanks.

Notes:

  • The solution relies on editing theme files rather than the Online Store editor’s custom CSS area.
  • The exact CSS snippet (linear-gradient) is central to the fix; the .gradient class was used with !important to ensure it overrides existing styles.

Status: Resolved. No outstanding questions or disagreements. Images (screenshot) were used to verify the outcome.

Summarized with AI on December 21. AI used: gpt-5.
1

Hi there,

So basically what I want to do is to integrate the following custom CSS code :

"

background-image: linear-gradient(to right top, #d4781a, #c86f2b, #b96837, #aa6140, #985c46, #8b5647, #7d5047, #6f4b46, #634342, #583c3d, #4c3538, #402e32);

" as a whole gradient background for my whole website. I put it into the custom CSS editor and when I try to save it it prompts me with the following " Online Store editor session can’t be published" .

Any ideas how can I solve this or any guidance on what I am doing wrong would be appreciated. Thank y

2

Hi @zCiprian , can you share your store url?

3

Hi there:

https://nestofnecessities.com/

password: powlye

1 Like
4

@zCiprian , go to your base.css file and add the following code at the end of it :

.gradient {
    background: linear-gradient(to right top, #d4781a, #c86f2b, #b96837, #aa6140, #985c46, #8b5647, #7d5047, #6f4b46, #634342, #583c3d, #4c3538, #402e32) !important;
    
}

Result :

Abdosamer_0-1723806588920.png
Abdosamer_0-1723806588920.png1436×887 156 KB

5

Thank you very much !

1 Like