Shopify Article List Setting: Build a Merchant-Curated Blog Section

Shopify introduced the article_list theme setting on January 26, 2026. It gives merchants a multi-select picker populated with published blog articles, making it a natural fit for featured posts, related reading, buying guides, and editorial galleries.

Previously, a section often used several separate article settings or selected an entire blog and displayed its latest entries. The new list gives the merchant explicit control over both the chosen content and its order through one setting.

The schema setting

Add article_list to a section or block schema:

{
  "type": "article_list",
  "id": "featured_articles",
  "label": "Featured articles",
  "limit": 6
}

The limit controls how many articles a merchant can select. If you omit it, Shopify uses 50; 50 is also the maximum allowed value. Set a smaller limit that matches the design instead of exposing capacity the section cannot present well.

Only published articles appear in the picker. In Liquid, the setting returns an array of article objects, or blank when nothing is selected, the selection is unavailable, or the selected resources no longer exist.

Render a resilient article grid

Start by guarding the resource setting. Then render each card as a complete link target with optional image and excerpt:

{% if section.settings.featured_articles != blank %}
  <div class="featured-articles">
    {% for article in section.settings.featured_articles %}
      <article class="article-card">
        <a href="{{ article.url }}" class="article-card__link">
          {% if article.image != blank %}
            {{ article.image
              | image_url: width: 900
              | image_tag:
                widths: '360, 540, 720, 900',
                sizes: '(min-width: 990px) 33vw, (min-width: 750px) 50vw, 100vw',
                loading: 'lazy',
                class: 'article-card__image'
            }}
          {% endif %}

          <div class="article-card__content">
            <p class="article-card__meta">
              {{ article.published_at | time_tag: format: 'date' }}
            </p>
            <h3>{{ article.title }}</h3>
            {% if article.excerpt != blank %}
              <p>{{ article.excerpt | strip_html | truncatewords: 24 }}</p>
            {% endif %}
          </div>
        </a>
      </article>
    {% endfor %}
  </div>
{% endif %}

The image guard is important because a valid article does not have to include a featured image. The excerpt is optional too. Let the card close the space naturally rather than rendering broken image frames or empty paragraphs.

Use image_url and image_tag so Shopify can generate appropriate image candidates. The responsive Shopify images guide covers widths, sizes, aspect ratios, focal points, and eager-versus-lazy loading in detail.

A complete featured-articles section

Here is a compact section you can expand with your own design system:

<section class="featured-reading page-width">
  {% if section.settings.heading != blank %}
    <h2>{{ section.settings.heading }}</h2>
  {% endif %}

  {% if section.settings.featured_articles != blank %}
    <div class="featured-reading__grid">
      {% for article in section.settings.featured_articles %}
        <article class="featured-reading__card">
          <a href="{{ article.url }}">
            {% if article.image != blank %}
              {{ article.image
                | image_url: width: 720
                | image_tag: widths: '360, 540, 720', loading: 'lazy'
              }}
            {% endif %}
            <h3>{{ article.title }}</h3>
          </a>
        </article>
      {% endfor %}
    </div>
  {% elsif request.design_mode %}
    <p>Select articles to display in this section.</p>
  {% endif %}
</section>

{% schema %}
{
  "name": "Featured articles",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Featured reading"
    },
    {
      "type": "article_list",
      "id": "featured_articles",
      "label": "Articles",
      "limit": 6
    }
  ],
  "presets": [
    {
      "name": "Featured articles"
    }
  ]
}
{% endschema %}

The editor-only empty state helps the merchant understand why a new section is blank without showing setup instructions to customers. For a more polished theme, render placeholder cards in request.design_mode so spacing and controls remain easy to preview.

Use the list count when layout depends on content

Shopify supports .count on the setting key:

{% assign article_count = section.settings.featured_articles.count %}

<div class="featured-reading__grid" data-count="{{ article_count }}">
  <!-- article cards -->
</div>

Use the count to choose a sensible layout, not to create dozens of one-off CSS rules. A two-card selection may work better in a two-column grid, while three to six can use a responsive three-column layout.

The returned array also supports Shopify's paginate tag. Pagination is rarely appropriate for a small featured section, but it can help an editorial gallery that intentionally allows a larger selection.

article_list versus blog

Choose based on the merchant's editorial intent:

Setting	Best when
article_list	The merchant should curate individual articles, including items from different blogs
article	The design needs exactly one highlighted post
blog	The section should automatically follow a blog's feed or newest entries

Curated lists need manual maintenance. Automatic blog feeds stay fresh but give less control. A helpful section label and info text should tell the merchant which behavior they are choosing.

Common mistakes

• Setting limit to 50 for a layout designed for four cards.
• Assuming every article has an image or excerpt.
• Rendering an empty wrapper when no articles remain available.
• Hard-coding image dimensions without responsive candidates.
• Showing editor guidance on the live storefront.
• Using several numbered article settings instead of one ordered list.
• Sorting the returned array and unexpectedly discarding the merchant's curated order.

The order selected by the merchant is editorial content. Preserve it unless the section explicitly offers a sort control.

Shipping checklist

1. Choose a limit that fits every supported breakpoint.
2. Guard the setting and every optional article field.
3. Keep the entire card's accessible name clear and avoid nested links.
4. Render responsive images without layout shift.
5. Add an editor-only empty state.
6. Test unpublished and deleted selections.
7. Test long titles, missing excerpts, mixed blogs, and translated headings.
8. Validate the section schema before copying it into a theme.

Shopify's January 2026 announcement introduces the picker, and the article_list setting reference documents its limit, return value, count, and pagination behavior.

Build the rest of the section configuration with the Schema Builder, or compare every resource picker in the Shopify input setting reference.