Change background color of a custom page template liquid file

Store Design
, ,

Topic summary

Goal: change the background color for pages using a custom Shopify Liquid page template.

  • Initial approach: add CSS directly in the template. It didn’t work; placing the style at the top was suggested but still failed.
  • Diagnostics: a page URL was shared. A screenshot indicated the intended black background was being overridden by another style, possibly from rich text content.
  • Proposed fix: target the main wrapper element (e.g., .site-wrap) and use a more specific selector or !important to override conflicts. !important forces a CSS rule to take precedence.
  • Clarification sought: where to place the CSS and how to scope it to the custom template (page.conference.liquid).
  • Resolution: the user added the CSS inside proper tags within the Liquid template, and the background color change worked.

Key notes:

  • Liquid is Shopify’s templating language; styles added must be enclosed in tags to apply.
  • Inline or rich text styles can override template styles; use specific selectors or !important if needed.
  • Outcome: issue resolved; no further open questions.
Summarized with AI on February 1. AI used: gpt-5.
1

I’ve created a custom page template and would like all pages using that template to have a different background color than the rest of the site. Can anyone help?

2

You can set a style inside that template
3

Hello, I put that code in the liquid file but it didn’t seem to work. Perhaps i placed it wrong?


  

    
    {{ page.content }}
4

Place at the top

5

Hm. Still not working..

6

show your shop url

7

This is the page with the template applied. I kept the code as black to make sure it’s working

https://cultivatefertility.com/pages/test

8

Simonsron_0-1675044350385.png
Simonsron_0-1675044350385.png820×178 10.9 KB

The black you set is overwritten by the style you have below. You can see if the style below is set in your page rich text!

9

That color isn’t actually not showing up! I came here because I couldn’t get it working. I’ve now deleted that line and kept the one you gave me in the liquid file–still not working :frowning:

10 
.site-wrap{
background-color:#000 !important;
}

try this

1 Like
11

Assuming I should drop this in the CSS file–the template name is page.conference.liquid, how should I call the style for that template?

12

Thank you so much. I forgot to put it in a style tag–it works now!