Remove default Blog title from on top of the blog image

Shopify Discussion

Topic summary

Goal: Remove the default blog title overlay from the featured image on blog articles, and apply it to all future posts.

Proposed solutions:

  • CSS approach: In Online Store > Themes > Edit code > Assets (base.css/style.css/theme.css), add:
    div#template-article .banner__heading.title { display: none; }
    This hides the title overlay on article banners. A result screenshot was shared.
  • theme.liquid approach: In Online Store > Themes > Edit code > theme.liquid, add custom code above the tag. The exact snippet was not included in the post, but a result screenshot was shown.

Outcome and status:

  • The original poster expressed thanks after trying the guidance. One helper followed up noting the solution worked for the poster, suggesting the issue is resolved.

Notes:

  • Images were shared to demonstrate the successful removal of the overlay.
  • The CSS method applies sitewide, covering future blog posts under the same theme.
Summarized with AI on December 15. AI used: gpt-5.
1

Hi there

Looking for help removing the default blog title that sits on top of the Blog image please. I would like this to be removed from all future blogs as well please.

Here’s hoping you can help and thanks so much in advance.

Laurence

treaclegeorge.com

https://treaclegeorge.com/blogs/tipsy-hobby-cooking/moroccan-chicken-with-honey

1 Like
2

Hi @LorenzoW

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#template-article .banner__heading.title {
    display: none;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hey @LorenzoW

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730224451711.png
Moeed_0-1730224451711.png1899×916 282 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

thanks so much for your help :+1:

1 Like
5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.