Tutorial: Remove blog banner image

If you'd like to remove the banner image on a blog page, you can simply remove the blog's Featured image. By doing this, you will lose the benefit of having a featured image in the blog index/listing page. To maintain the featured image in the index/listing page but remove it from a blog page, use this customization by creating a new blog template.


Create a new section

From the Shopify admin dashboard you will want to edit the code of your theme.

Open your code editor:

Or use this link:


Scroll down to the " Sections" folder and then click on "Add a new section" (Important - you must be in the sections folder):

Call the new section article-no-banner:

Replace all the default code with this code:


Save the section file. 


Create a new template

Still in the code editor, scroll up to the Templates folder and click on "Add a new template" (Important - You must be in the templates folder):

In the drop-down, be sure it's on "article" and call the new template no-banner:

Then click the Create template button.

Next, change the default code from:


{% section 'article-no-banner' %}

Save the file.


Choose your new template on a blog page

Return to your main Shopify Admin and find a blog you'd like to use without a banner image. On the right-side, scroll below your Feature image section and the Tags section to Template. Use the drop-down and change the option from "article" to "article.no-banner":

Save the blog and now you can preview the page. 


Update css to reduce padding on top

This step is optional. However, it will reduce the extra padding above your post. On a new line, add the following code to the very bottom of this file:


/* -- code to fix padding when using blog no-banner template -- */
.blog_no_banner { margin-top: -30px; }
/* - end - */




Still need help? Contact Us Contact Us