Blogs: Move title below image

In this tutorial, we will move the title from inside the image to below the image on a blog index page with grid view. Since the text will be removed, the dark image overlay will not be required. We will remove overlay to brighten the blog image as well. 

Before:

After:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Replace the index page snippet code

Modify the article-grid-item.liquid which is in your Snippets folder. If Pipeline is not published, you can find the file by browsing in the Code Editor to the Snippets folder.

If Pipeline is currently published, you can use this quick link to open the file:

snippets/article-grid-item.liquid

Replace all the code with code from this file:

Click to view code

Save the file.

That will place the title below the image.

2

Add style code

Style code to use (instructions below):

.blog__article__overlay:after {background: none !important;}
.template-blog .blog__article__title { margin-bottom: 2rem; margin-top: -1.5rem; }

Optional: You can also add an additional line of code to remove the zoom effect when you hover over the image. To remove the zoom effect, add this additional line to the same file at the bottom:

.blog__link:hover .blog__article__overlay, .blog__link:hover .blog__article__text, .blog__link:hover .blog__article__title {transform: none !important;}

Notes:

To modify the title font, you can use css and target that heading with the following:

h3.blog__article__title { text-transform: uppercase; }

In that example, I'm forcing the text to be all uppercase.

Where to add the style code:

In the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.


Undo Customization

If you decide to return to the original format of the blog index page, you can use the "Older versions" link in  article-grid-item.liquid to rollback to the original version:

You'll can also remove the lines added to the bottom of your style.scss.liquid file. There is no rollback feature for that file. 


Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us