Article
Configure an article page's media, metadata, sharing, comments, and related stories.
The Article template presents one blog post as a readable story with optional media, metadata, sharing, comments, and related articles. Use it when the same reading experience should apply across articles assigned to the template.
Open the Article template
- From Shopify admin, go to Online Store > Themes > Customize.
- Use the page selector to open Blogs > an article.
- Select the Article section.
- Preview an article with and without a featured image, with tags, and with comments enabled before saving.
Template order
The current saved Article template contains one section:
- Article
Media
Show featured image
- Controls: Shows or hides the article's featured image. The current default is on.
- Use it when: Keep it on when the image establishes the story before the article content; turn it off when the article is intentionally text-led.
Image ratio
- Controls: Sets the featured image ratio.
- Options:
Portrait,Square, orLandscape. The current default isLandscape. - Dependency: The image appears only when the article has a featured image and Show featured image is enabled.
Layout
Content width
- Controls: Sets the maximum reading width of the article header, content, and related reading areas.
- Options:
NarroworWide. The current default isNarrow. - Use it when: Use narrow for long-form reading comfort; use wide only after checking line length, embedded content, and mobile wrapping.
Features
Show date
- Controls: Shows the publication date in the article metadata. The current default is on.
Show author
- Controls: Shows the article author in the metadata. The current default is on.
Show tags
- Controls: Shows article tags beneath the metadata. The current default is on.
- Use it when: Enable it when tags are maintained as a useful route to related stories.
Show back to blog link
This field exists in the schema but is hidden from the current Theme Editor (visible_if: false). It is not a current merchant-facing control and is not documented as one.
Show comments when enabled
- Controls: Shows the comments section when Shopify comments are enabled for the article. The current default is on.
- Use it when: Keep it on when the store moderates and supports article comments.
- Dependency: The comments section does not appear when comments are disabled in Shopify, even if this setting is enabled.
Show related articles
- Controls: Shows the related-article area when other articles are available. The current default is on.
- Use it when: Keep it on when the article should provide a next reading path.
Related articles heading
- Controls: Heading for the related-article area. The current default is
Reading next.
Show social sharing
- Controls: Shows the social sharing controls. The current default is on.
- Use it when: Enable it when the store wants readers to share the current article.
- Verify later: Confirm the destination URLs, keyboard focus, and behavior in a private fixture before publishing a sharing screenshot.
Share label
- Controls: Text shown beside the sharing controls. The current default is
Share.
Spacing
Section spacing
- Controls: Sets the Article section spacing to
None,Small,Medium, orLarge. The current default isMedium.
Top spacing
- Controls: Adds or removes top spacing. The current default is on.
Bottom spacing
- Controls: Adds or removes bottom spacing. The current default is on.
Article content and comments
Article body content comes from the article record in Shopify. When comments are enabled, the section can show existing comments and the comment form fields Name, Email, and Comment, followed by the Post action. Verify moderation, error, success, and pagination states before publishing a support or troubleshooting conclusion.
Related articles
When enabled and available, the section presents up to two other articles as related reading. The current guide treats this as a template behavior requiring browser verification; it does not promise a particular selection algorithm.
Desktop and mobile behavior
A final guide should compare the same approved article at both sizes and verify:
- featured-image crop and reading width;
- metadata and tag wrapping;
- social-share control wrapping and focus order;
- comment list and form layout when comments are enabled;
- related-article cards when one or more other articles are available.
Exact breakpoints and unverified reading geometry are intentionally not stated here.
Media recommendations
Choose a featured image that remains legible in the selected ratio and preserves a clear focal point. Article body media belongs to the article content and should be tested separately from the template's featured image. Exact dimensions require approved fixture testing.
Accessibility and motion
Use meaningful alternative text for the featured image and any article body media. Keep headings in a logical order, keep sharing and comment controls keyboard reachable, and verify focus behavior for comment errors and success messages. Check reduced-motion behavior for image reveal before publishing a motion recommendation.
Common checks
- If comments are absent, confirm both Shopify's article comment setting and Show comments when enabled.
- If tags or metadata are absent, check the corresponding visibility setting and whether the article has that data.
- If related stories are not shown, confirm Show related articles and that other articles are available.
- If the featured image is missing, confirm the article record has an image and that Show featured image is enabled.
Related guides
[!NOTE] The setting labels, options, defaults, hidden-field status, and template order above come from the current Article template and section schema. Sharing, comments, responsive layout, and browser interaction remain pending accepted verification.