> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/blog/blog-posts.md). # Blog posts **Blog posts** shows the most recent articles from one of your blogs as a row of cards, so writing that would otherwise sit behind a menu link appears where shoppers already are. Each card carries the featured image and the title, and you decide whether it also shows the category, tags, date, author, and a short excerpt. Shoppers usually meet the section low on the homepage or on a landing page, under the product rows, where it signals that the store is active and gives people a reason to keep reading. The list is filled automatically from the blog you select, so once it is set up new articles appear without you touching the theme again.
### Where to find it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. Open the template where the articles should appear, for example the homepage. 3. Click **Add section** and choose **Blog posts** from the **Blog** group. 4. Under **Blog**, select which blog the posts come from. 5. Set how many posts to show, then turn off any card details you do not need. {% endhint %} *Result:* the newest articles from that blog appear as cards, refreshed automatically each time you publish. ### Section settings #### General settings | Setting | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Section width** |

How far the row of articles spreads across the screen.

| | **Color scheme** | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, and a different scheme here is a simple way to mark where the shopping part of the page ends and the reading part begins. | #### Section header | Setting | Description | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Subheading** | A short line above the title, often a label such as `Journal` that tells shoppers what kind of content follows. | | **Heading** | The title shoppers read first, for example `From the blog`. It is what makes the row of cards read as articles rather than products. | | **Description** | A sentence under the title, usually the promise of what the writing covers. | | **Heading size** |

How large the title is rendered.

| | **Alignment** |

Where the title and its supporting line sit above the cards.

| | **Show view all button** | Adds a button that takes shoppers to the whole blog rather than the handful of posts shown here. Turn it on whenever the blog has more articles than the row displays. | | **Button label** | The words on that button. Something specific such as `Read all articles` sets a clearer expectation than a generic label. | | **Button link** | Where that button leads, normally the blog the posts are drawn from. | #### Blog post | Setting | Description | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Blog** | Which blog the articles come from. If you leave it alone the theme uses the first blog in alphabetical order on your [Blogs page](https://shopify.com/admin/blogs), which is rarely the one you meant. | | **Image ratio** |

The shape every featured image is cropped to, so cards of different photo sizes still line up.

| | **Maximum items to show** | How many articles appear, from 2 to 12. Three or four is enough on a homepage, more turns the section into a page of its own. | | **Items per row on desktop** | How many cards sit side by side on a wide screen, from 2 to 4. More per row means smaller images and shorter titles before they wrap. | | **Column gap** |

The space between cards.

| | **Show category** | Shows which blog the article belongs to on the card, useful when you run more than one blog and readers need to tell them apart. | | **Show tags** | Shows the article's tags on the card. Helpful when tags are real topics, noise when they are internal keywords. | | **Show date** | Shows when the article was published. Turn it off for evergreen guides, where an old date makes good advice look stale. | | **Show author** | Shows who wrote the article, which adds credibility to expert advice and clutter to a short styling note. | | **Show excerpts** | Shows the opening lines of the article under the title, so shoppers can judge whether it is worth a click. It also makes each card considerably taller. | #### Carousel settings | Setting | Description | | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Enable carousel** | Turns the grid into a swipeable row instead of stacking cards down the page. Use it when you want more articles available without making the page longer. | | **Show navigation** | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture. | | **Show pagination** | Shows the dots under the row, which tell shoppers how many articles are in the carousel and where they are in it. | | **Reveal next slide** | Leaves part of the following card peeking in at the edge, a visual hint that there is more to swipe to. | | **Items per row on mobile** | How many cards fit across a phone screen. One gives large, readable cards; two lets shoppers compare titles but shrinks the images. | #### Section padding | Setting | Description | | ---------- | ---------------------------------------------------------------------------------------------------- | | **Top** | Space added above the section. Increase it when the heading sits too close to the section before it. | | **Bottom** | Space added below the section. Increase it when the footer or the next section crowds the cards. | #### Section divider | Setting | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show divider** | Draws a thin horizontal line at the section edge, useful when the articles and the section above share a background colour and run into each other. | ### What changes on the storefront * Shoppers see the newest articles from the selected blog, and clicking a card opens that article. * Every detail you enable makes the cards taller, so turning on category, tags, date, author, and excerpt at once leaves very little room for the images. * With **Enable carousel** off the cards wrap onto more rows on narrow screens instead of scrolling sideways. ### Related pages * [Blog](/velare/customize-your-pages/blog.md): the group this section belongs to * [Blog page](/velare/customize-your-pages/blog-page.md) and [Blog post page](/velare/customize-your-pages/blog-post-page.md): where the **View all** button and the cards lead * [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets come from * [Layout](/velare/set-up-your-store/layout.md): the page width that **Fixed width** follows --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://uxsmart.gitbook.io/velare/customize-your-pages/blog/blog-posts.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.