CODE

List Multiple Blog Articles On A Page

ESTIMATE 3-MINUTE READ

Use Liquid Code to Consolidate Blogs

There are plenty of how-did-he-do-that areas on the ClinicalPosters website. A reader in a Shopify forum asked how to consolidate multiple blogs on one page like this. It is not an option that Shopify includes for all users. Most people struggle to post regularly on one blog. Writing for two, three, or more blogs takes even more determination. It is easier to have one blog and tag articles for different interests.

With that said, ClinicalPosters manages four blogs on this site. The reason is that the subject matter is very different. A regular reader of one blog might lose interest when seeing another topic. For example, how do you justify posting an article about computer programming within a health blog?

Even product sales and site features distract from someone interested in health. Conversely, someone learning about blogging and coding may have little interest in an article about bunions. So individual blogs are split up, catering to different audiences. Within each, multiple interests are tagged.

By default, each blog has its own paginated section. But what if someone wants to see everything that has been published recently? An auxiliary page can list the 50 most recent articles of each blog.

There is a caveat. Page load speed can depreciate with many blogs. For example, 50 articles from five blogs amounts to 250 links with possible images.

Roll Up Your Sleeves

Method 1: Liquid Coding

Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.

Now you access the Liquid programming code with Actions: Edit code. Duplicate page.template.liquid. Give it a name like page-blogs.template.liquid. Right below the user.content you are going to build a table with Liquid programming code. Afterwards, navigate to Pages within the admin to create a new page, selecting the template you create.

What you type on the page is the optional user.content. You can provide a brief description of your blogs or leave it blank. You just need a page to make it accessible within your navigation menu.

The multi-blog page on this site has more styling like numbered lines, sortable columns, striped rows, column responsive­ness for mobile devices, and high­lighting of articles matching visitor interest when logged in. Below is a basic version.

{% comment %} // search and replace 'Blog1' with title of first blog and 'Blog2' with title of second... // {% endcomment %}
<table width="100%">
  <tbody>
    <tr>
    <th>Date</th>
    <th>Image</th>
    <th>Article Title</th>
    <th>Blog</th>
    </tr>
    {% assign featuredBlogs = 'Blog1,Blog2' | split:',' %}
    {%- for featuredBlog in featuredBlogs -%}
    {%- if blogs[featuredBlog].articles -%}
      {%- if featuredArticles != blank -%}
      {% assign featuredArticles = featuredArticles | concat:blogs[featuredBlog].articles %}
      {%- else -%}
      {% assign featuredArticles = blogs[featuredBlog].articles %}
      {%- endif -%}
    {%- endif -%}
    {%- endfor -%}
    {%- if featuredArticles -%}
    {%- assign featuredArticles = featuredArticles | sort:'published_at' | reverse -%}
    {%- assign whichblog = "Blog1" -%}{%- if article.url contains '/blog2/' -%}{%- assign whichblog = "Blog2" -%}{%- endif -%}
    {%- for article in featuredArticles -%}
      <tr>
        <td nowrap>{{ article.published_at | date: "%Y-%m-%d" }}</td>
        <td>{% if article.image %}<a href="{{ article.url }}"><img src="{{ article.image.src | img_url: '75x40' | crop: 'center' }}" alt="{{ article.image.alt }}" loading="lazy"></a>% endif %}</td>{
        <td><a href="{{ article.url }}">{{ article.title }}</a></td>
        <td><strong>{% if whichblog == "Blog1" %}<a href="/blogs/{{ 'Blog1' | handleize }}"></a>{% else %}<a href="/blogs/{{ 'Blog2' | handleize }}"></a>{% endif %}</strong></td>
      </tr>
    {%- endfor -%}
    {%- endif -%}
  </tbody>
</table>

Replace Blog1,Blog2 with the comma-separated names of your blogs. Corre­spond­ingly replace each instance of Blog1 and Blog2. If you have more than two blogs, you can include additional {%- elsif article.url contains "/blog3/" -%} preceding the final {% endif %} condition on line 22. Pay attention that Blog1 is the case-sensitive blog title (with spaces), whereas /blog1/ is “handleized” (lowercase with hyphens for spaces).

View Example

Each blog displays up to 50 titles. With more than two blogs, the image column can slow page loading on mobile devices. You could have 150, 200, or more images. Consider lazy loading or eliminating images. For simple Google Chrome specific lazy loading, include the loading="lazy" instruction.

Method 2: No Coding Required

Now I will share a method that includes no coding at all. Within the Admin, click Online store: Navigation. Then click “Main menu” (or whatever you named it). Create a menu item called something like “All articles.” To this, add the following link: /search?q=a*&type=article

This search query displays all articles, regardless of blog, that contain the letter “a.” With this quick-and-dirty method, you are not limited by the 50-article limit, but you lose ability to format results. The search template determines layout.

Did you know you can use Google to search any website? Just type the domain followed by colon and then what­ever phrase you like. (ClinicalPosters.com: blogs).

Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces (&nbsp;) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips like this? Please indicate so within the comment field.

Main photo by Ola Dapo from Pexels.

Kevin Williams is a Shopify Partner that has been program­ming data­base systems since 1990 and writing since 2010, before main­tain­ing an e-commerce site in Perl. Along with him, explore the Shopify platform and Liquid programming with marketing and writing tips.

Include Meaningful Comment