Blogs: Remove blog banner image

In this tutorial we will create a custom section and template which will remove the banner image on your blog posts while still maintaining the featured image for the homepage blog section and the main blog index page.

Remove the banner on a blog page but keep the image for the blog index page

By doing this, you will lose the benefit of having a featured image on the blog index page. 

In order to keep the image on the index page:

But remove from the main blog post, you can use the following

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.

1

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:

https://shopify.com/admin/themes/current

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

Delete all the default code that's generated:

Replace with all the code from this link (click link to view code):

OPTION 1

Pipeline 5.0 and higher:
Click to view code

OPTION 2

Earlier versions of Pipeline:
Click to view code

Save the section file. 

2

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

Example:

Then click the Create template button to complete.

Next, change the default code from:

to:

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

Save the file.

3

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. 

http://shopify.com/admin/articles

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. 

4

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:

assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

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

Result

Before:

After:

The index page will still have the featured image: