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:

Step 1

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:

https://myshopify.com/admin/themes/current?key=snippets/article-grid-item.liquid

Replace all the code with code from this file:

https://gist.githubusercontent.com/whistlerbrad/60ed150186f67bc0ce554206e0d368e0/raw/5259ef4ce96a496188df39cbda1cc849d57dcaa6/article-grid-item.liquid

Save the file.

That will place the title below the image.

Step 2

Now we will add the following style overrides to your style.scss.liquid file which is located in the assets folder.

If Pipeline is published, you can click on this link to open the file:

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

Add the following code to the very bottom of the file, starting on a new line:

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

Save the file.

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;}

Save the file.

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.


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. 

Still need help? Contact Us Contact Us