Blog Page Templates

You can modify the appearance of your blog pages by modifying the underlying HTML templates to create your own customized blog theme and layout.

To do this, from the Creator Dashboard head over to Web Pages, and then click on the "Page Templates" tab on the horizontal menu, as shown in the picture below.

Here you are able to modify templates for the blog list, blog post detail, blog sidebar, and blog category.

From here you can edit the blog pages as you like. For instance, you could change the size of some blog posts to prioritize an article over the others, you could change the layout of the sidebar, add other links to your program and even add a section for visitors to subscribe to your newsletter.

The templates are in HTML and support Liquid markup to allow you to redesign the blog layout. To learn more about how Liquid markup works, check out this guide: https://shopify.github.io/liquid/

Liquid uses some fixed tags and attributes related to certain content on the pages. These attributes cannot be modified, however, you can move them around or modify the HTML around it as you please.

If you look at the templates, you will see different kinds of tags and attributes, other than HTML:

{{ ..DATA... }} When the tag simply displays one or two words inside double curly brackets, it is a simple data output. For instance {{blog_title}} will display the blog title.

{{ % ... % }} If you see a tag with double curly brackets that contains two percentage signs and some text, it means that there is logic involved. For example, the tag {% if blog_categories %} means that the code following this will only show if there are any blog categories set up.

Let's see now what tags and attributes can be used for each blog template.

Blog List

The blog list is the main landing page for your Heights blog.

Modifying the template for the blog list will edit the layout of the blog page i.e.  https://yoursubdomain.heightsplatform.com/blog 

The template for the blog uses the following tags:

• {{blog_title}} The title you previously set for the blog page. You can modify this under the Blog tab.
• {{blog_tagline}} The tagline or subtitles you previously set for the blog page. You can modify this under the Blog tab.
• {{blog_posts}} Every published blog post will appear on your page.
• {{blog_categories}} The categories you previously set for the blog page. You can modify this under the Blog tab.

Then we have the following post attributes:

• {{post.title}} 
• {{post.text}}
• {{post.url}}
• {{post.reading_time}} 
• {{post.publish_date}} *By default the publish date is not shown under the blog cards on your blog page, so if you wish to add this information, simply add this attribute to the template under the tag.
• {{post.categories}}
• {{post.cover_image_large}}
• {{post.cover_image_medium}} *The images are shown on the blog list page is set as "medium" as default, which is our recommended size. Should you wish to use smaller images, you can use the thumbnail tag (next one) and adapt the rest of the code.
• {{post.cover_image_thumbnail}}

And category attributes:

• {{category.title}}
• {{category.url}}
• {{category.description}} *By default the category description is not shown under the blog page, so if you wish to add this information, simply add this attribute to the template under the tag.

Blog Post Details

This template adjusts the display of an individual blog post page. The tags supported here are:

• {{blog_title}} The title you set for the blog, not the article.
• {{blog_tagline}} The tagline you previously set for the blog page. You can modify this under the Blog tab.

Here we have the following post attributes:

• {{post.title}} 
• {{post.text}}
• {{post.url}}
• {{post.reading_time}} 
• {{post.publish_date}} *By default the publish date is not shown under the blog cards on your blog page, so if you wish to add this information, simply add this attribute to the template under the tag.
• {{post.categories}}
• {{post.cover_image_large}}  *The individual post cover image shown on the blog detail page is set as "large" as default, which is our recommended size.
• {{post.cover_image_medium}}
• {{post.cover_image_thumbnail}}

And categories attributes:

• {{category.title}}
• {{category.url}}
• {{category.description}} *By default the category description is not shown under the blog page, so if you wish to add this information, simply add this attribute to the template under the tag.

Blog Sidebar

This template controls the sidebar part of the blog page. By default here you'll find a list of other published posts and categories. If you wish to include the whole blog sidebar in another page of your Heights program (i.e. having the blog sidebar showing on your landing page) you can simply add the tag {% include 'blogs/liquid/blog_sidebar' %} to the custom code for that page.

Supported Liquid Tags:

• {{blog_title}} The title you previously set for the blog page. You can modify this under the Blog tab.
• {{blog_tagline}}  The tagline you previously set for the blog page. You can modify this under the Blog tab.
• {{blog_categories}} The categories you previously set for the blog page. You can modify this under the Blog tab.
• {{sidebar_posts}} A list of published blog posts that appear on the sideline.

• {{category.title}}
• {{category.url}}
• {{category.description}} *By default the category description is not shown under the blog page, so if you wish to add this information, simply add this attribute to the template under the tag.

Blog Category

This template controls the information that appears in the blog categories.

 Supported Liquid Tags:

• {{blog_title}} The title you previously set for the blog page. You can modify this under the Blog tab.
• {{blog_tagline}} The tagline you previously set for the blog page. You can modify this under the Blog tab.

• {{category.title}}
• {{category.url}}
• {{category.description}} *By default the category description is not shown under the blog page, so if you wish to add this information, simply add this attribute to the template under the tag.