This guide covers two related templates:
| Template | When customers see it |
|---|---|
| Blog | The list of articles for a blog (one page per blog: /blogs/news, /blogs/training-tips, and so on) |
| Article | The page for a single article |
Both templates have settings tailored to their purpose. They are documented together because they share the same content and follow each other in the customer journey.
Setting up blogs in Shopify admin
Before customizing the templates, set up your blogs in Shopify admin.
- In the Shopify admin, go to Online Store, Blog posts.
- Click Manage blogs to create or edit blogs. Each blog is a container for articles (similar to how a collection is a container for products).
- Click Add blog post to write articles. Each article belongs to one blog.
- Configure article fields: title, content, featured image, author, tags, excerpt, comments setting.
The theme reads whatever Shopify provides. Article ordering, publish dates, authors, and tags are all configured in the admin.
Blog template
The blog template renders the article list page for a single blog.
What ships on the blog page
The default template contains one section:
| # | Section | Purpose |
|---|---|---|
| 1 | Blog | Article grid plus toolbar (search, date filter, tag filter, view toggle) and pagination |
You can reorder, remove, or add sections from the theme editor. The Blog section is restricted to blog templates and cannot be used elsewhere.
Blog section settings
In the theme editor, navigate to a blog page (any blog with at least one article works as a preview), and click the Blog section.
Layout
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Articles per page | 6 to 24 in steps of 3 | 12 | How many articles to show before pagination |
| Columns on desktop | 2 to 4 | 3 | Article grid columns on screens 990px and wider |
| Padding top | 0 to 100 px in steps of 4 | 40 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 40 | Space below the section |
Toolbar
| Setting | Default | What it controls |
|---|---|---|
| Use search | On | A search box that submits an article-only search to the store search page (using type=article to scope the results) |
| Use date filter | On | A dropdown filter for narrowing articles by publish date (year and month) |
| Use tag filter | On | A tag filter dropdown next to the date filter. Customers select a tag from the list to navigate to that tag's archive URL. Tags come from the article's tag field in Shopify admin |
| Use view toggle | On | Grid and list view buttons. The customer's choice persists in local storage and is reapplied when they return to a blog page in the same browser |
Card content
| Setting | Default | What it controls |
|---|---|---|
| Show image | On | Display the article featured image |
| Show tags | On | Display tags as small pills on the card |
| Show date | On | Display the publish date |
| Show author | On | Display the author name |
| Show comments count | Off | Display "X comments" on the card. Off by default to keep cards clean. The card does not show the comments themselves |
| Show excerpt | On | Display a snippet of the article content |
| Excerpt length | 50 to 300 characters in steps of 10 | 150 |
Description
| Setting | Default | What it controls |
|---|---|---|
| Show blog description | Off | Display a blog description from the custom.description blog metafield above the article grid. Set this metafield in Shopify admin, Online Store, Blog posts, Manage blogs, by editing the blog and adding a custom metafield with namespace custom and key description. If the metafield is empty, the description does not appear regardless of this toggle |
Blog page filters and search
The toolbar offers three ways to navigate the blog, each with different submission behavior:
- Search: the search box submits to the store-wide search page (
routes.search_url) withtype=article, scoping results to articles only. This is a Shopify-routed search across all blogs, not a filter applied to the current blog page. - Date filter: the dropdown lists year-month combinations built from the articles in the current blog. Selecting one appends a
?month=YYYY-MMparameter to the URL, and the theme filters the rendered articles to that month within the current paginated set. This means a month may show fewer results if matching articles are on another pagination page. - Tag filter: the dropdown lists tags from articles in the current blog. Selecting a tag navigates the customer to Shopify's tag archive URL (
/blogs/<blog-handle>/tagged/<tag-handle>), which is a separate Shopify-routed page that lists articles with that tag.
The date filter operates on the rendered page; the tag filter navigates to a different URL; the search submits to a different page. Each is reflected in the URL where applicable.
Blog page pagination
Standard Shopify pagination via {% paginate blog.articles by N %}. Numbered pages with previous and next links appear at the bottom when articles exceed the per-page setting.
Blog page card display
Each article in the grid renders as a card with the elements you have enabled. The image uses the article's featured image (set in the admin). When Show excerpt is on, the excerpt is sourced from article.excerpt_or_content, meaning it uses the manually-set excerpt if you wrote one, otherwise it falls back to the start of the article content.
Article template
The article template renders a single article.
What ships on the article page
The default template contains one section:
| # | Section | Purpose |
|---|---|---|
| 1 | Article | The full article: header, image, content, table of contents, share, author bio, comments, related articles |
You can reorder, remove, or add sections from the theme editor. The Article section is restricted to article templates.
Article section settings
In the theme editor, navigate to any article and click the Article section.
Display
| Setting | Default | What it controls |
|---|---|---|
| Color scheme | Scheme 1 | Color scheme applied to the section |
| Show image | On | Display the article's featured image as a header |
| Show author | On | Display the author name in the meta line |
| Show date | On | Display the publish date in the meta line |
| Show tags | On | Display tags as small pills below the title |
| Show read time | On | Display estimated reading time in the meta line |
Reading time is calculated automatically from the article's word count, divided by 200 words per minute (the standard estimate for adult silent reading speed). The minimum displayed value is 1 minute.
Article features
| Setting | Default | What it controls |
|---|---|---|
| Show progress bar | On | A thin bar at the top of the screen that fills as the customer scrolls through the article |
| Show table of contents | On | An automatically-generated table of contents based on the H2 headings in the article body. Generated by JavaScript when the article loads. Customers can click an entry to jump to that section |
The table of contents only includes H2 headings. If you use only H1 (the article title), or only H3 and below, no table of contents will appear. Structure your article with at least three H2 headings for the table of contents to be useful.
Engagement
| Setting | Default | What it controls |
|---|---|---|
| Show share | On | Social share buttons below the article body |
| Show author bio | On | An author block at the bottom with the author's name. The avatar is a placeholder icon (Fitcore does not pull author photos automatically) |
| Show newsletter signup | Off | An inline newsletter signup CTA at the bottom of the article body. Off by default to avoid forcing a CTA on every article. Use for cornerstone content where signup is the goal |
| Show comments | On | Display comments and the comment form, when comments are enabled for the blog. Customers must comply with Shopify's spam moderation rules |
| Show related articles | On | A grid of related articles below the article. See "Related articles" below |
Related articles
The related articles grid shows up to three articles from the same blog. The selection is the first three articles from blog.articles limit: 10 that are not the current article.
This is a simple, predictable selection: it does not use AI relevance scoring, tag matching, or category similarity. If you want more sophisticated related-article logic, you would need to install an app or customize the section.
Comments
When Show comments is on AND the blog has comments enabled in Shopify admin, the article page shows:
- A heading with the comment count
- The list of approved comments (paginated 10 per page)
- A comment submission form
Comment moderation, approval workflow, and spam filtering are handled by Shopify, not by Fitcore. Configure comment settings in Shopify admin, Online Store, Blog posts, Manage blogs, then edit the blog and set Comments.
If comments are disabled for the blog in Shopify admin, the comments section does not render even if Show comments is on in the theme.
Author bio
The author bio block shows below the article body when Show author bio is on AND the article has an author set.
The block renders:
- A placeholder avatar icon (Fitcore does not automatically pull author photos from Shopify)
- The author's name (from
article.author) - A link back to the blog. Author-specific filtering is not currently supported
To add an author photo or biography paragraph beyond the auto-rendered name, customize the article-author block via theme code (developer task) or use a Shopify metafield approach.
Multi-language and multi-currency
- Article titles, content, and excerpts are translated through Shopify's translation system.
- Tag labels follow Shopify's localization.
- Date formats follow the customer's selected language (handled by Shopify's
datefilter with locale-aware formatting). - Reading time is calculated from the article content rendered by Shopify.
- Author names are not translated by default (they are stored as plain text in Shopify), but you can translate them through Shopify's translation system if needed.
See markets-localization.md for the full localization workflow.
Performance considerations
- The article page features (table of contents, progress bar) run on JavaScript that loads after first paint, so they do not block initial rendering.
- Featured images are not lazy-loaded on the article page (they are above the fold), but related article images are.
- The newsletter inline CTA, when on, adds a small additional form to every article. Disable it on articles where signup is not the conversion goal.
What to do next
| If you want to | Read |
|---|---|
| Set up your standard pages (About, Contact, custom pages) | template-page.md |
| Set up the gift card delivery template | template-gift-card.md |
| Configure the password page | template-password.md |
| Review reference image dimensions | image-sizes.md |
End of template-blog.md.