> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Lay out blog posts with Facet's article template > Arrange Facet's blog post page: order the title, author line, featured image, body, tags, share buttons, post links and comments, then add related posts. Every blog post in your store uses the article template. In Facet it is built from the **Article** section, where each part of the post (title, author line, picture, body, tags, share buttons, links to other posts and comments) is a block you can reorder, space out or remove. A **Related posts** section follows below. This page covers the Article section and its blocks. ![The Article section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=af3e48e7d5e63cdb49ecab927233bf13) ## What this section controls * The breadcrumb trail above the post. * Which parts of the post appear, and in what order. * The size and alignment of the title. * The crop of the featured image. * The share buttons and the comment list. * The colors, spacing and width of the post column. The post's title, text, picture, author and tags come from the post itself. Edit them in your Shopify admin under **Content**, then **Blog posts**. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Open a blog post** In the page selector at the top of the Customizer, choose **Blog posts**, then pick a post to preview. Click **Article** in the **Sections** panel. **3. Arrange the post** Drag the blocks to change their order, or hide the ones you don't need. Click **Add block** to bring back a block you removed. ![The theme editor with the Article section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=944dba802cc1a45210d3ceaf0268d096) ## Section settings ![Theme editor sidebar showing the Article section settings: Show breadcrumbs, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c21fea23704baca0ad08d1bacd3dac2e) * **Show breadcrumbs**: on by default. Shows the path to the post (home, blog, post) above it. ### Common settings These work the same in every section. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. * **Color scheme**: the colors of the post. * **Top padding**: None, Small, Medium (default), Large or Extra large. * **Bottom padding**: None, Small, Medium, Large (default) or Extra large. * **Page width**: Narrow, Narrower (default), Fluid or Full. Every block sits in one column at this width, so the picture, the post links and the comments line up with the text. ## Blocks Every block below has a **Bottom padding** setting that sets the space under it: **None**, **Extra small**, **Small**, **Medium**, **Large** or **Extra large**. The last block on the page adds no space, since the section's bottom padding closes the column. The section also accepts app blocks. ### Title ![Theme editor sidebar showing the Title block (in Article) settings: Size, Alignment, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-title-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=242d90155996ddcba88a04ad7462149b) The post title. It is always the page's main heading for search engines, whatever size you pick. * **Size**: **Display 1**, **Display 2**, **Heading 1**, **Heading 2** (default), **Heading 3** or **Heading 4**. * **Alignment**: left (default), center or right. * **Bottom padding**: default **Small**. ### Author and date ![Theme editor sidebar showing the Author and date block (in Article) settings: Show author, Show date, Show reading time, Alignment, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-author-and-date-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=abf2458e3ef34453c942e8026a3993f7) A line under the title. The block hides itself when all three items are off. * **Show author**: on by default. Shows "By" and the author's name. * **Show date**: on by default. Shows the date the post was published. * **Show reading time**: on by default. Estimates the minutes needed to read the body, at 200 words a minute, with a minimum of 1. * **Alignment**: left (default), center or right. * **Bottom padding**: default **Large**. ### Featured image ![Theme editor sidebar showing the Featured image block (in Article) settings: Aspect ratio, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-featured-image-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c5b8f7f27e5bcc281cd1f4dfe6c9a39b) The picture set on the post in your admin. A post without one shows nothing here on your store. In the Customizer you see a placeholder so you can still find and move the block. * **Aspect ratio**: **Natural**, **21:9**, **16:9** (default), **4:3**, **5:4**, **1:1**, **4:5** or **3:4**. **Natural** keeps the picture's own shape. The others crop it. * **Bottom padding**: default **Large**. ### Body ![Theme editor sidebar showing the Body block (in Article) settings: Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-body-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=7cdf9f086e92fecf894f3b8f108b8276) The text of the post, as written in your admin. * **Bottom padding**: default **Large**. ### Tags ![Theme editor sidebar showing the Tags block (in Article) settings: Label, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-tags-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=bdae8ac3a9b53d28e9b61b933735eaf1) The post's tags as small buttons. Each opens the blog filtered to that tag. The block shows nothing when the post has no tags. * **Label**: the text before the tags. Default: "Tags". Leave it blank to show the tags alone. * **Bottom padding**: default **Large**. ### Share ![Theme editor sidebar showing the Share block (in Article) settings: Label, Facebook, X, Pinterest, WhatsApp, Email, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-share-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=6ba310f79e267baf997e28510d545d49) Buttons that let readers share the post. * **Label**: the text before the buttons. Default: "Share". Leave it blank to show the buttons alone. * **Facebook**: on by default. * **X**: on by default. * **Pinterest**: on by default. Shares the post's featured image when it has one. * **WhatsApp**: off by default. * **Email**: off by default. Opens the reader's email app with the post title and link filled in. * **Copy link**: on by default. Copies the post's address. The button hides itself in browsers that don't allow copying. * **Bottom padding**: default **Large**. The block hides itself when every button is off. ### Previous and next posts ![Theme editor sidebar showing the Previous and next posts block (in Article) settings: Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-previous-and-next-posts-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=7b4227ad46a6bf62c6af27aa240b1c2b) Links to the previous and next post in the same blog, with their titles. The block shows nothing when the blog has only one post. * **Bottom padding**: default **Extra large**. ### Comments ![Theme editor sidebar showing the Comments block (in Article) settings: Comments per page, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/article/article-block-comments-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=f9005fe63f251571c3538f17672a8daa) The comment count, the comments and a form for new ones. The block only shows when the blog accepts comments. Turn comments on in your Shopify admin under **Content**, then **Blog posts**, then **Manage blogs**: open the blog and choose a **Comments** option. * **Comments per page**: from 5 to 50, in steps of 5. Default: 10. Longer lists get page numbers. * **Bottom padding**: default **Extra large**. When the blog holds comments for approval, readers see a message that their comment appears once approved. ## Related posts Below the Article section, Facet's blog post template has a **Related posts** section with more posts from the same blog. Its settings are described in [Related posts](https://docs.shopify.lightsout.agency/themes/facet/sections/related-posts.md). ## Best practices * **Pick one image shape for the whole blog.** The same **Aspect ratio** on every post keeps the blog page and related posts tidy. * **Use tags as categories.** A short, fixed list of tags makes the tag buttons on posts and the tag filter on the blog page useful. * **Choose a narrow width for long posts.** **Narrow** or **Narrower** keeps lines short enough to read comfortably. * **Keep share buttons to the networks your readers use.** Two or three buttons are easier to scan than six. ## Related guides > [card] [Blog page](https://docs.shopify.lightsout.agency/themes/facet/pages-templates/blog.md) > > Set up the page that lists your posts. > [card] [Related posts](https://docs.shopify.lightsout.agency/themes/facet/sections/related-posts.md) > > Choose how many posts show under each article. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.