The `article` template renders the article page, which contains the full content of the article, as well as an optional comments section for customers. This template is used for items like individual posts in a blog.

> Tip:
> Refer to the [article template](https://github.com/Shopify/dawn/blob/main/templates/article.json) and its [main section](https://github.com/Shopify/dawn/blob/main/sections/main-article.liquid) in Dawn for an example implementation.

<figure class="figure">
  <img src="/assets/themes/templates/article.png" style="width: 100%; max-width: 550px;" alt="An example of the article template in Dawn">
</figure>

## Location

The `article` template is located in the `templates` directory of the theme:

```text
└── theme
    ├── layout
    ├── templates
    |   ├── 404.json
    |   ├── article.json
    |   ...
    ...
```

## Content

You should include the following in your `article` template or a section inside of the template:

- [The article object](#the-article-object)
- [The comment form](#the-comment-form)

### The article object

You can access the Liquid [`article` object](/docs/api/liquid/objects/article) to display the article details.

### The comment form

The comment form can be added with the Liquid [`form` tag](/docs/api/liquid/tags/form#form-new_comment) and accompanying `'new_comment', article` parameter. Within the form tag block, you need to include the following:

<table>
  <thead>
    <tr>
      <th>Input</th>
      <th><code>type</code></th>
      <th><code>name</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td><code>text</td>
      <td><code>comment[author]</code></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><code>email</td>
      <td><code>comment[email]</code></td>
    </tr>
    <tr>
      <td>Comment</td>
      <td><code>textarea</td>
      <td><code>comment[body]</code></td>
    </tr>
  </tbody>
</table>

For example:

```liquid

{% form 'new_comment', article %}
  {{ form.errors | default_errors }}

  <div class="name">
    <label for="name">Name</label>
    <input type="text" name="comment[author]" value="{{ form.author }}">
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="comment[email]" value="{{ form.email }}">
  </div>

  <div class="comment">
    <label for="comment">Comment</label>
    <textarea name="comment[body]">{{ form.body }}</textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Post">
  </div>
{% endform %}

```

> Tip:
> When a customer posts a comment, your code should provide feedback indicating whether it was posted successfully, or if there were any errors.

## Usage

When working with the `article` template, you should familiarize yourself with [paginating article comments](#paginate-article-comments).

> Tip:
> If you're using a JSON template, then any HTML or Liquid code needs to be included in a [section](/docs/storefronts/themes/architecture/sections) that's referenced by the template.


### Paginate article comments

Article comments can be accessed through the [article object](/docs/api/liquid/objects/article#article-comments), and have a limit of 50 per page. For this reason, you should [paginate](/docs/api/liquid/tags/paginate) article comments to ensure that they’re all accessible:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% paginate article.comments by 20 %}
  {% for comment in article.comments %}
    <!-- comment info -->
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

END_RAW_MD_CONTENT</script>

</div>
</p>