Why horizon Theme missing blog Grid section for home page?

Ask & Offer

Topic summary

A user noticed that Shopify’s Horizon theme lacks a blog grid section for the homepage, a feature that was available in the Dawn theme.

Solution provided:

  • A complete code snippet was shared for creating a custom blog grid section
  • The code includes Liquid templating for displaying blog posts in a grid layout
  • Features customizable settings: heading, blog selection, post limit (3-12), date display toggle, and “View all” button option
  • Includes responsive CSS styling with card-based design and hover effects

Additional context:

  • Horizon is described as a new theme with features being regularly added
  • Users are advised to keep the theme update-able by avoiding direct code edits
  • Recommendation to monitor the official release notes for new feature additions

Status: Workaround provided; the missing feature may be added in future theme updates.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

it was there on dawn theme but basic feature is missing

2

If you want custom blog grid section for this theme here is code – enjoy–

{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %}

{%- assign blog = blogs[section.settings.blog] -%}

{% if blog.articles_count > 0 %}

{% for article in blog.articles limit: section.settings.post_limit %}

{% if article.image %}

{% endif %}

      <div class="blog-card-content">
        <h3 class="blog-card-title">
          <a href="{{ article.url }}">{{ article.title }}</a>
        </h3>

        {% if section.settings.blog_show_date %}
          <p class="blog-card-date">
            {{ article.published_at | date: "%B %d, %Y" }}
          </p>
        {% endif %}

        <p class="blog-card-excerpt">
          {% if article.excerpt.size > 0 %}
            {{ article.excerpt }}
          {% else %}
            {{ article.content | strip_html | truncate: 120 }}
          {% endif %}
        </p>

        <a href="{{ article.url }}" class="blog-card-readmore">
          Read more →
        </a>
      </div>
    </div>
  {% endfor %}
</div>

{% else %}
No blog posts found.
{% endif %}

{% if section.settings.show_view_all %}

View all

{% endif %}

/* === Blog Grid Styling === */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .blog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .blog-card-image img { width: 100%; height: 200px; object-fit: cover; display: block; } .blog-card-content { padding: 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; } .blog-card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .blog-card-title a { color: #111; text-decoration: none; } .blog-card-title a:hover { color: var(--color-primary, #007bff); } .blog-card-date { font-size: 0.85rem; color: #777; margin-bottom: 0.75rem; } .blog-card-excerpt { font-size: 0.95rem; color: #444; margin-bottom: 1rem; flex-grow: 1; } .blog-card-readmore { font-weight: 500; font-size: 0.95rem; color: var(--color-primary, #007bff); text-decoration: none; } .blog-card-readmore:hover { text-decoration: underline; } .blog-grid-heading { font-size: 2rem; font-weight: 700; } .blog-viewall-btn { display: inline-block; background: var(--color-primary, #007bff); color: #fff; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; transition: background 0.25s ease; } .blog-viewall-btn:hover { background: #0056b3; } .blog-empty { color: #666; font-size: 1rem; padding: 2rem; }

{% schema %}
{
“name”: “Blog grid”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Latest blog posts”
},
{
“id”: “blog”,
“type”: “blog”,
“label”: “Blog”
},
{
“type”: “range”,
“id”: “post_limit”,
“label”: “Number of posts”,
“min”: 3,
“max”: 12,
“step”: 3,
“default”: 3
},
{
“type”: “checkbox”,
“id”: “blog_show_date”,
“label”: “Show date”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_view_all”,
“label”: “Show ‘View all’ button”,
“default”: true
}
],
“presets”: [
{
“name”: “Blog grid”,
“category”: “Blog”
}
]
}
{% endschema %}

3

Still Confuse DM me www.renowebtech.com

4

Because it’s a new theme and they are regularly adding new features and blocks to it.
So keep it update-able (means avoid editing theme code) and check https://themes.shopify.com/themes/horizon/presets/horizon#ReleaseNotes often