Blogs: Add a description of your blog and image height

This customization adds the ability to change the Featured image banner height and also adds the option to have a description of your blog. 

Example: Description added below standard blog index title:

Example: Title and description centred with no banner:

Example: Featured image with short height setting and right aligned title & description:

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 code

Open this file:

The file you're opening is:

sections/blog.liquid

Quick link if the theme is live/published:
Open snippets/blog.liquid

Use Command-A (Mac) or Control-A (Win) to select all:

Erase all the code in that file and replace it with all the code from this file:

Click to view code

Save the file.

2

View the new setting option in the Theme Editor

Open the Theme Editor (draft mode example):

Or:

Quick link if your theme is live/published:
Open Theme Editor

Use the top drop-down menu:

Change to Blogs (1):

Then click on Blog (2) for the settings.

These are the new settings for your blog description and alignment:

The description uses HTML tags to style the content. If you need to use a line break, use the code: <br>

Height settings for Featured image banner:

Remember to Save your changes in the Theme Editor. 

Still need help? Contact Us Contact Us