article / articles

Blog article picker fields. Use article for a single article or articles for a list. Returns the article object(s) from the store.

Properties

Property	Type	Required	Description
type	"article" or "articles"	Yes	Single or multiple articles
label	string	Yes	Label shown in the builder
default	string or array	No	"" for article, [] for articles

Usage

schema.json

{
  "featured": {
    "type": "article",
    "label": "Featured article",
    "default": ""
  },
  "items": {
    "type": "articles",
    "label": "Articles",
    "default": []
  }
}

Template

{# Single article #}
{% if widget.settings.featured %}
  <div class="featured-article">
    <img src="{{ widget.settings.featured.image.fileUrl }}" alt="{{ widget.settings.featured.title }}">
    <h3>{{ widget.settings.featured.title }}</h3>
    <p>{{ widget.settings.featured.excerpt }}</p>
  </div>
{% endif %}

{# Articles list #}
{% for article in widget.settings.items %}
  <div class="article-card">
    <h3>{{ article.title }}</h3>
    <span>{{ article.publishedAt | date: "%b %d, %Y" }}</span>
  </div>
{% endfor %}

Output

Each article object includes:

{
  "_id": "69248443e2f94be6c3772ecc",
  "title": "How to Style Your Store",
  "handle": "how-to-style-your-store",
  "excerpt": "Learn the best practices for...",
  "content": "<p>Full article content...</p>",
  "image": {
    "_id": "67ffd1927f7cd6da2d12bfdd",
    "fileUrl": "https://cdn.qumra.cloud/media/..."
  },
  "author": "Admin",
  "publishedAt": "2025-01-15T10:00:00Z"
}

Article object

The returned article object includes title, handle, excerpt, content, image, author, and publishedAt.

Interactive Preview

Interactive Preview

Featured article

How to Style Your Store

by Admin

Live Output

{
  "featured": {
    "_id": "69248443e2f94be6c3772ecc",
    "title": "How to Style Your Store",
    "handle": "how-to-style-your-store",
    "excerpt": "Learn the best practices for...",
    "author": "Admin",
    "publishedAt": "2025-01-15T10:00:00Z"
  }
}