# Blog Feed Section

### What You'll Learn

* How to display recent blog posts in Plain Jane or Interactive
* How to customize layout, typography, and styling

***

The **Blog Feed Section** lets you display a list of recent blog posts from a selected blog. This section is useful for showcasing updates, news, lookbooks, or editorial content directly on your homepage or any page that supports sections.

> 💡 Tip: This section pulls from the "Blog posts" you've created in your Shopify admin under `Online Store > Blog posts`. You must have posts published for them to appear.

### How To Add the Blog Feed Section

1. From your Shopify Admin, go to **Online Store > Themes**
2. Click **Customize** next to your active theme
3. Use the dropdown at the top to select the page you want to add it to
4. In the left sidebar, click **Add section**
5. Select **Blog Feed Section**
6. Click **Save**

***

### Blog Feed Settings

#### 📁 Content & Data

* **Blog**: Select which blog (from Shopify admin) to display posts from
* **Blog Header Title**: Customize the title that shows above the blog feed (e.g. "From Our Journal")

#### 🖥️ Layout & Display

* **Posts to Show – Desktop**: Number of articles to show on larger screens
* **Posts to Show – Mobile**: Number of articles to show on smaller screens

#### ✍️ Typography

* **Title Size – Desktop / Mobile**: Control the size of your blog header text
* **Bold Section Title**: Toggle to make the blog title bold

#### 🎨 Colors

Customize the appearance of each blog article's components:

* **Background Color**
* **Blog Title Color**
* **Article Row Background Color**
* **Article Border Color**
* **Author Text Color**
* **Article Title Color**
* **Article Date Color**
* **Article Tag Background/Text/Border Color**

#### 💅 Styling

* **Article Tag Border Radius**: Round the corners of the article tag background

#### 📏 Spacing

Set how much padding appears above/below the section:

* **Top/Bottom Spacing – Desktop**
* **Top/Bottom Spacing – Mobile**

#### 🧑‍💻 Custom CSS

Use the **Custom CSS** field to fine-tune the section with your own styles.

***

> ⚠️ Warning: If no blog posts are published in the selected blog, this section will appear empty in the live store.

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# 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.openspaces.design/readme-1/sections-and-features/blog-feed-section.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.