Header background color

Store Design
, , , , ,

Topic summary

A user needed to change their Shopify blog page header background color from white to light grey (#f2f2f2) to match their template.

Solutions provided:

  • Theme Settings approach: Navigate to Theme settings → Color schemes and modify the “Secondary background” color (currently set to white).

  • CSS code solution: Add custom CSS to the “Custom CSS” section:

.article-template__info-wrapper > * {
  background: #f2f2f2;
}
  • Alternative method: Insert CSS code in the theme.liquid file before the </body> tag, wrapped in a conditional statement for the blog template.

Resolution: The user confirmed the solutions worked, marking them as simple and effective. The issue was successfully resolved using the provided CSS approaches.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

I’m using a template, and it shows a light grey on the header of the blog page, but mine is white. How can I change just the background of the header to hex f2f2f2 similar to the template image below?

Screenshot 2025-05-01 at 3.49.15 PM.png
Screenshot 2025-05-01 at 3.49.15 PM.png2156×1338 348 KB

here’s the link to my site: https://jodh52febvkblyxz-8134245.shopifypreview.com/blogs/press-and-news/vox-ufos-are-real-that-s-the-easy-part-now-here-s-the-hard-part

2 Likes
2

I have checked the store and saw that not only the header is the problem with it assign a Shopify designer to guide you with just little tips

3

unhelpful

4

It’s in “Theme settings”. Get to “Color schemes” (or other place to select theme colors) and see what settings are available. In your code it’s “Secondary background” – it’s set to white at the moment…

If this is not acceptable, add this to the section “Custom CSS” setting:

.article-template__info-wrapper > * {
  background: #f2f2f2;
}
1 Like
5

Hi @JayKay89

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if template.name == 'blog' %}
  
{% endif %}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Amazing! Thanks Tim - both simple and easy solutions.