> For the complete documentation index, see [llms.txt](https://meowcart.gitbook.io/lilyth-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meowcart.gitbook.io/lilyth-theme/sections/blog-posts.md).

# Blog Posts

## Section settings

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></td></tr><tr><td>Choose a blog</td><td>The blog you want to display blog posts from. Defaults to the first blog alphabetically on your <a href="https://shopify.com/admin/blogs">Blogs page.</a></td></tr></tbody></table>

## Section header settings

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td>Add text to display as a caption.</td></tr><tr><td>Heading</td><td>Add text to display as a heading.</td></tr><tr><td>Heading size</td><td><p>Change the size of the heading:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Description</td><td>Add text to display as a description.</td></tr><tr><td>Enable "View all" button if blog includes more blog posts than shown</td><td>If the blog has more blog posts than set in the Blog post field, then this displays a "View all" button that takes the customers to the blog's page.</td></tr><tr><td>Button style</td><td><p>Change the style of the button:</p><ul><li><strong>Solid button</strong></li><li><strong>Outline button</strong></li><li><strong>Link</strong></li></ul></td></tr><tr><td>Alignment</td><td><p>Determine the section header alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Main section settings

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Number of blog posts to show</td><td>Determine the maximum of blog posts can be shown. Can be from 2 to 6, increasing arithmetically of 1.</td></tr><tr><td>Section layout</td><td><p>Change the section layout:</p><ul><li><strong>Grid</strong></li><li><strong>Slider</strong></li></ul></td></tr><tr><td>Number of columns</td><td>Determine the number of columns can be shown per row. Can be from 1 to 5, increasing arithmetically of 1.<br>(<em>Number of columns is automatically optimized for mobile</em>)</td></tr></tbody></table>

## Blog card settings

<table><thead><tr><th width="293">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show featured image</td><td>Display the featured image for the blog post.</td></tr><tr><td>Image ratio</td><td><p>The image ratio for the blog post images:</p><ul><li><strong>Adapt to image</strong>: use the aspect ratio of the featured image.</li><li><strong>Square</strong>: Crop the images to use a 1:1 ratio.</li><li><strong>Portrait</strong>: Crop the images to use a 2:3 ratio.</li></ul></td></tr><tr><td>Image border thickness</td><td>Set the width of an image's four borders. Can be from 0px to 10px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Image border opacity</td><td>Set the opacity level for an image's four borders. Can be from 0% to 100%, increasing arithmetically of 5%. </td></tr><tr><td>Image corner radius</td><td>Set the radius of the image's corners. Can be from 0px to 40px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Show date</td><td>For each blog post, display the date that the blog post was published.</td></tr><tr><td>Show author</td><td>For each blog post, display the author.</td></tr><tr><td>Content alignment</td><td><p>Determine the content alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>