Explore two ways to display multiple blog articles on a single page. One method uses Liquid programming. The other requires no coding at all.
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.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
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 responsiveness for mobile devices, and highlighting 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. Correspondingly 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).
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 whatever phrase you like. (ClinicalPosters.com: blogs).
