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.

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://myshopify.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:

Replace all the default code with this code:

https://gist.githubusercontent.com/whistlerbrad/20cf1f20d41fc17cc3934ee87ed2eadd/raw/79597b42ae252f328578b2ed1aa9345e120e3d6a/article.liquid

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:

Then click the Create template button.

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. 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:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

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

Result

Before:

After:

Still need help? Contact Us Contact Us