# Blog posts

<figure><img src="/files/OmCnc1Xm4Dc928jsLr3P" alt=""><figcaption></figcaption></figure>

A blog acts as your brand’s direct voice to the outside world. It helps build, reaffirm, and strengthen your brand name online while attracting more traffic to your website.&#x20;

This article will show you how to add and customize your blog posts section in Sleek.

## How to add a Blog post

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click the **Add section**
2. Locate **Blog posts**
3. **Save**
   {% endhint %}

To know more about how to add a blog to your online store, see [Blogs](https://help.shopify.com/en/manual/online-store/blogs).

This article shows you how to display your blog posts on your website using **Sleek** theme.

## How to edit a Blog post

### **Section header**

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

<figure><img src="/files/2xpxzrdPQeiGJdczIqDN" alt=""><figcaption></figcaption></figure>

### Highlight text

[How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Text**.

* Leave them blank if you do not want to display them

<figure><img src="/files/Eo9pXMoKo8cF42FKmrbb" alt=""><figcaption></figcaption></figure>

### **Blog settings**

This section is for adding preferable blog posts. You can use the slider to adjust the **Number of blog posts to show** (between 2 and 8).

<figure><img src="/files/FBQK16HIzXce4Di0DHCm" alt=""><figcaption></figcaption></figure>

### **Grid settings**

Use the slider to adjust the **Number of columns on desktop** (between 1 and 4).

<figure><img src="/files/0EA3aehX8b7dO8shYazG" alt=""><figcaption></figcaption></figure>

You can also modify the **Column gap** as Extra large/ Large/ Medium/ Small/ Extra small/ None.

<figure><img src="/files/TbYeJtiVSr5aoTmFMv7w" alt=""><figcaption></figcaption></figure>

### **Carousel settings**

Toggle the option **Enable carousel on desktop** to display blog posts in the carousel layout.&#x20;

To use a carousel, the number of blog posts to show must be larger than the number of columns.

You can also control the position of the arrow navigation.

<figure><img src="/files/itZUXWNETlzlfnVUngep" alt=""><figcaption></figcaption></figure>

### **Mobile layout**

You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

<figure><img src="/files/WNy1kbE1MuIOmadcky2x" alt=""><figcaption></figcaption></figure>

### **Card settings**

Change the **Heading size** of the card to **Heading 3**/ **Heading 4**. Furthermore, you can also enable/disable the card elements if needed:

* **Show date**: Display the date that the blog is issued
* **Show excerpt**: Display a short summary of the post
* **Show button**: Lead the customers to the full blog post

<figure><img src="/files/BnfewBMiylPFFTdd8Rhz" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/sleek-theme/theme-sections/blog-posts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
