Creating a Featured Blogs Section in Shopify

By Nick Drishinski | Published January 8, 2025

I am always trying to showcase my blogs and videos via my website and other mediums. One effective way to achieve this is by creating a reusable section for featured blog posts on your Shopify store. This approach not only highlights your most valuable articles but also enhances the overall aesthetic of your site. In this post, we will explore how to implement a stylish and functional featured blogs section using Liquid, a templating language used in Shopify. By the end of this guide, you'll have a clear understanding of how to set up this section, making it easy to keep your audience informed about your latest and greatest content.

Code: https://github.com/ndrishinski/blogs/commit/73c132aeaea2c25d13aa1cb42b2fc49760ef94cd

Prefer video?

Enjoy, otherwise read on!

Create our New File

In the 'sections' directory, we can create a new file. I am going to call it 'featured-blogs.liquid' but you can name it whatever you would like.

Add our Styles

At the top of the file, we can paste in our CSS like so:

<style>
      /* Featured Blogs Section */
  .featured-blogs {
    padding: 4rem 0;
    background-color: #f3f4f6;
}

.featured-blogs h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2937;
    text-align: center;
    margin-bottom: 2rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.blog-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 1.5rem;
}

.blog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.blog-excerpt {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 1rem;
}

.blog-link {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.blog-link:hover {
    text-decoration: underline;
}

.blog-link svg {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>

Now our styles are in place, so we can focus on adding our HTML and Liquid logic.

Add our HTML / Liquid

Below the closing style tag, we can paste the following code (NOTE there is one line you must change for your theme):

<section class="featured-blogs">
    <div class="container">
        <h2>Featured Blogs</h2>
        <div class="blog-grid">
            {% for article in blogs.shopify.articles %} {% comment %} change "shopify" to the category of your blogs {% endcomment %}
                <article class="blog-card">
                    <img src="{{ article.image | image_url }}" class="blog-image">
                    <div class="blog-content">
                        <h3 class="blog-title">{{ article.title }}</h3>
                        <p class="blog-excerpt">{{ article.content }}</p>
                        <a href="{{ article.url }}" class="blog-link">
                            Read More
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
                        </a>
                    </div>
                </article>
            {% endfor %}
        </div>
    </div>
</section>

Where out opening liquid tag begins "{% for article in ...." you need to update "shopify" to the name of your blog category. You can see this if you navigate in the Shopify Admin to Online Store -> Blog Posts and open a Blog.

Add the replace the "shopify" text with the name of your category type. Then, all we need to do is add our section schema!

Add our Section Schema

To be able to add this in the Theme Editor, we need to add our schema including a preset name. Below the HTML we just added, paste:

{% schema %}
{
    "name": "Featured-Blogs",
    "presets": [
        {
            "name": "Featured-Blogs"
        }
    ]
}
{% endschema %}

This simply gives our section a name that we can now find in the Theme Editor.

Conclusion

After saving our new file, you should be able to open the Theme Editor for your theme and add this section. Implementing a reusable featured blogs section is a powerful strategy to elevate your website's user experience and keep your audience engaged. By utilizing the provided Liquid code, you can effortlessly display your top articles in a visually appealing format that encourages readers to explore more of your content. This not only helps in promoting your best work but also contributes to a cohesive design across your site. As you continue to create and curate valuable content, this featured section will serve as a dynamic showcase, ensuring that your most important posts never go unnoticed.