List Multiple Blog Articles On One 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.

Roll Up Your Sleeves

Method 1: Liquid Coding

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes: Actions: Duplicate.

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 }}"></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. Pay attention that Blog1 is the case-sensitive blog title (with spaces), whereas /blog1/ is “handleized” (lowercase with hyphens for spaces).

View Example

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). Are you interested in more tips like this? Please indicate so within the comment field.

Main photo by Ola Dapo from Pexels.

Join Discussion