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

# Featured blog

This block allows merchants to highlight content such as news, updates, tutorials, or stories to engage customers and drive traffic to the blog.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FVvpG0Kb8wUSbjySKal0r%2Fimage.png?alt=media&amp;token=3439f9cd-315f-4add-b984-9d92263ee6b5" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FGyYmY36hR1JUKSuWFZkm%2Fimage.png?alt=media&amp;token=07ad07c4-e98f-4741-bbc9-ba0c5c235c2e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr></tbody></table>

#### Section header settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FLtJPZtgtX9vyrkeLF9ep%2Fimage.png?alt=media&amp;token=06ba47b5-7c47-4571-864a-3710a72eb2c4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Enable heading underline animation</strong></td><td>Turn on an animated underline effect for headings. Switch off to keep a static look.</td></tr><tr><td><strong>Underline style</strong></td><td><p>Choose the underline’s look. Include:</p><ul><li><strong>Include</strong>: Simple underline – Clean straight line beneath the text.</li><li><strong>Curve stroke:</strong> Soft, hand-drawn curved stroke for a casual feel.</li><li><strong>Squiggle underline:</strong> Wavy line for a lively, attention-grabbing look.</li></ul><p><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></p></td></tr><tr><td><strong>Underline color</strong></td><td>Pick the color used for the underline.<br><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Heading size</strong></td><td><p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Blog post <a href="#blog-posts" id="blog-posts"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FaOTculNpX5jQBb484c4C%2Fimage.png?alt=media&amp;token=fe9e5bb5-9c4c-410f-aec4-92445573c101" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Blog</strong></td><td>Which 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><tr><td><strong>Image ratio</strong></td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td><strong>Desktop vertical alignment</strong></td><td><p>3 options for the desktop content position</p><ul><li><strong>Top</strong></li><li><strong>Middle</strong></li><li><strong>Bottom</strong></li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p>The position of the blog content.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Show category</strong></td><td>Display blog categories</td></tr><tr><td><strong>Show tags</strong></td><td>Display post tags</td></tr><tr><td><strong>Show date</strong></td><td>Display post creation date</td></tr><tr><td><strong>Show author</strong></td><td>Display post author</td></tr><tr><td><strong>Show excerpts</strong></td><td>Display a short post excerpt</td></tr></tbody></table>

#### Button <a href="#settings-for-carousel" id="settings-for-carousel"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FfZJGB1KYmoIqM1m01A39%2Fimage.png?alt=media&amp;token=ac9499e8-6d6f-4774-9553-e5092b32c0d4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Setting the placeholder for the button</td></tr><tr><td><strong>Type</strong></td><td>Button type</td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FM4UlWRdm5mwE2IPC67rS%2Fimage.png?alt=media&amp;token=15b4fe9d-b082-4595-94ac-54acb12b492c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>

#### Section divider

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FSGzzv1uhjPhWs5jVQYhi%2Fimage.png?alt=media&amp;token=3b23dc15-2f36-4f04-aa20-2c895eae60aa" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="341.8888854980469">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section.</td></tr></tbody></table>