Shopify Theme Development Part 2 – Search & Blog Setup

Welcome back to our Shopify Theme Development series!

If you haven't yet, make sure to read Part 1: Setup and Code Version Control to get your development environment ready: Shopify Theme Development - Part 1: Setup and Code Version Control.

In this second part, we’re diving into two essential features for any e-commerce site: a functional search bar and a full blog system. You'll be surprised how quickly you can integrate these using Shopify's powerful Liquid templating language.

🔍 Simple and Effective Search Integration

Integrating a store-wide search in Shopify is incredibly straightforward. It requires minimal markup, as Shopify automatically handles the routing and processing for the /search endpoint.

Below is the simple HTML/Liquid code for the search form. The markup here uses the daisyUI component library for styling (often used with Tailwind CSS), but the core functionality remains the same regardless of your styling framework.

<form action="/search">
  <input
    type="text"
    name="q"
    placeholder="Search your favorite products..."
    class="input focus:outline-0 focus:border-primary focus:border-2 input-bordered w-24 md:w-auto"
  >
</form>

That's it By using the action="/search" attribute on the form and including an input field (which defaults to a name="q" if not specified, but it's best practice to add it explicitly), you have a working search feature on your Shopify store. 🤯

✍️ Creating the Shopify Blog and Article Templates

Before you can display blog posts, you need to set up the foundational files that Shopify requires for its templating system.

1 The Blog Listing Page (blogs.liquid)

First, we need a section file to handle the main content for the blog listing.

Create sections/blogs.liquid:

<section>
  <h1>Blog</h1>
</section>

Next, create the corresponding template file in the templates directory. This tells Shopify to use the blogs section as the main content area for any URL that loads a blog index.

Create templates/blog.json:

{
  "sections": {
    "main": {
      "type": "blogs",
      "settings": {}
    }
  },
  "order": ["main"]
}

After adding a blog post via the Shopify Admin, you can now view the basic template on your theme

Note on Categories: The Blog Category (or Handle) is crucial. In this example, we’ll assume the default blog handle is news. If your blog is named 'Updates,' the handle would be updates. Ensure you check your Shopify Admin settings

2 Displaying All Posts on the Blog Page

Now, let's update sections/blogs.liquid to iterate through and display the available articles. We'll use the Liquid object blogs to access our posts.

<section class="p-5">
  <h2 class="text-3xl font-semibold mb-6">Latest Articles</h2>

  <div class="flex gap-5 flex-col py-5">
    {%- for article in blogs.news.articles -%}
      <div class=" bg-gray-400 p-5 rounded-lg shadow-md">
                <a href="{{ article.url | escape }}">
          <h3 class="text-xl font-bold hover:text-primary transition-colors">{{ article.title }}</h3>
        </a>
        <div class="text-sm text-gray-600 my-1">
          <span>Article ID: {{ article.id }} </span> |
          <span>By: {{ article.author }}</span>
        </div>
                <p class="py-2 text-gray-700">{{ article.excerpt_or_content | strip_html | truncate: 200 }}</p>

        <div class="pt-2">
          <a href="{{ article.url | escape }}" class="btn btn-outline btn-neutral">Read More →</a>
        </div>
      </div>
    {%- endfor -%}
  </div>
</section>

Key Liquid Detail: We access all articles using blogs.news.articles, where news is the blog's handle.

Pro Tip: To explore all the properties and filters available for articles (and other Liquid objects), always refer to the official Shopify Liquid documentation on their developer site.

After testing locally and deploying to your theme, you can navigate to your blog URL, typically structured as https://[yourShopifyDomain]/blogs/news/

📄 The Single Blog Post Page

The final piece of the puzzle is creating the template for a single article.

1 Article Template JSON

Create templates/article.json in the templates directory:

{
  "sections": {
    "main": {
      "type": "article",
      "settings": {}
    }
  },
  "order": ["main"]
}

2 Article Section Liquid

Now, create sections/article.liquid to define how the single article content will be displayed. This file uses the article Liquid object, which is available on the article-specific page.

<section class="p-5 max-w-4xl mx-auto">
  {% if article.title %}
        <h1 class="text-4xl font-extrabold mb-3">{{ article.title }}</h1>
   
    <div class="flex flex-wrap gap-2 pt-1 mb-6">
      {%- for badge in article.tags -%}
        <div class="badge badge-neutral hover:badge-primary badge-outline cursor-pointer">
          <a href="[[SUGGESTED_INTERNAL_LINK_URL: /collections/all?tag={{ badge | handle }}]]">{{ badge }}</a>
        </div>
      {% endfor %}
    </div>

        {% if article.image %}
      <div class="flex justify-center py-5">
        <img
          width="auto"
          height="auto"
          class="w-full max-w-lg rounded-lg shadow-xl"
          src="{{ article.image | image_url }}"
          alt="{{ article.image.alt | default: article.title | escape }}"
        >
      </div>
    {% endif %}

        <div class="prose max-w-none text-lg leading-relaxed mb-8">
      {{ article.content }}
    </div>

    <hr class="mt-5 border-gray-300">
   
        <div class="italic text-right text-sm text-gray-500 pt-3">
      <span>Posted by: **{{ article.author }}**</span> |
      <span>Published on: **{{ article.published_at | date: '%B %d, %Y' }}**</span>
    </div>
  {% else %}
    <p>This article doesn't seem to exist! 🧐</p>
  {% endif %}
</section>

This updated code block includes the full content, the featured image, the article tags, and all the relevant metadata. You now have a complete, fully functional blog system for your custom Shopify theme 🎉