Skip to content
Home » Blog » How to add Blog Posts Filters to Shopify Dawn Theme

How to add Blog Posts Filters to Shopify Dawn Theme

Shopify introduced Online Store 2.0 (OS 2.0) in June 2021 with a bunch of new improvements to optimize user experience of Shopify.

To kickstart the OS2.0 evolution, Shopify has created the Dawn theme to help fellow Shopify developers and ecommerce entrepreneurs ease into this new OS2.0 experience.

If you are on the amazing Dawn theme (or other OS 2.0 themes), and are looking to boost your customers’ experience in browsing and discovering your Shopify blog content, the easiest way is to insert a blog posts filter into your blogs. A blog posts filter introduces an easy-to-understand and dynamic way to search for blog posts that matches the customers’ interest; without scrolling and clicking through pages of irrelevant content.


Note: If you are comfortable with code and want to create the filter yourself, you can check out the Shopify Forum and sought help from the community to help create the filter from scratch.


For the rest of us, here is a step-by-step guide on how to add a blog posts filter to your Dawn theme without coding:

Step 1: Install the Blog Posts Articles Filter PRO App

Install the Blog Posts Articles Filter PRO app here to your Shopify store, there is a 5-days free trial so you can try and see if you like it.

You won’t be charged until 5 days later.

You do, however, need to first pick a plan. You can always upgrade/downgrade at later stage, no stress!

Step 2: Setup the filters

Note: The app utilizes blog posts tags to configure the different filter options, so be sure that your blog posts have been tagged accordingly before this step.

Once you have installed the app and pick a plan, head over to the “Filters” tab and select the blog you want to add your filters too.

  • Start by setting the Filter name, this is what the storefront customers would see before expanding the filter to show its full list of option.
    • In an example of a recipes blog, a filter label could be “Cuisine type
  • Next, click on the Tags field, this is where you decide what filter options is available for this particular filter. The filter options shown in the dropdown list are your blog posts tags.
    • Continuing the above example of a recipes blog with a “Cuisine Type” filter, the Tags field can include the different cuisine type options like “Western“, “Japanese“, “Spanish” etc, taken directly from your blog post tags.

Once you are done, you can repeat the same process to add as many filters as you want.

Make sure the filter is set as “Published” and click Save.

Step 3: Setup App Block at Theme Editors

Head over to your theme editor via Admin > Online Store > Theme > Customize.

Within the theme editor, select “Blog > Default Blog” from the page dropdown list at the top of the page.

On the left bar showing the page section, click on Add Section, and scroll all the way down to spot Apps > Blog Filter. Click on it, and your filter should appear accordingly.

Take note that the Dawn theme has a not very considerate section structure for the blog page, you will notice the filter now appears on top of the blog title, which is an incorrect information hierarchy. The blog filter should appear BELOW the blog title.

Follow steps below to correct this.

Note: this only applies to Dawn theme, feel free to reach out if you have problems on other OS2.0 themes.

1. Insert The Blog Title above the Filter with Custom Liquid Section

Shopify Theme Editor Custom Liquid for Blog Filter

At the Theme Editor, add another section called “Custom Liquid“, paste the following code inside.

<div class="main-blog page-width"><h1 class="title--primary">{{ blog.title | escape }}</h1></div>

You should see another blog title appears right above the blog filter once you have done this.

2. Remove the original blog title from Liquid.

Next, save your changes and exit the Theme Editor.

Under current theme, click Actions and select “Edit code” from the dropdown list.

Search for main-blog.liquid, and at line 13, comment out the whole line <h1 class=”title–primary”>{{ blog.title | escape }}</h1> by adding comment tags below before and after the line

{%comment%}<h1 class="title--primary">{{ blog.title | escape }}</h1>{%endcomment%}

If you check your blog again now, the original blog title should have been hidden and there is only one blog title showing above the blog filter.

Reminder:

You can install the Blog Posts Articles Filter PRO app here with 5 days free trial!

Leave a Reply

Your email address will not be published. Required fields are marked *