# Blog posts

The blog post section is useful when you want to show new product launches, tips, or other news.

![image](https://docs-assets.foxecom.app/megamog-theme/blog-post_aYtZ0MGB.png)

<Hint type="success">

Steps

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

</Hint>

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 the **Megamog** theme.

### **1. General and layout:**

Use the color scheme to change the style for this section.

Additionally, enable the box layout and the color scheme to change the style of it.

![image](https://docs-assets.foxecom.app/megamog-theme/blog-post-general_1W09JP1z.png)

### 2. Section Header

Use the provided text fields to add a suitable heading and change the heading size. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center) along with the background color and container type on both mobile and desktop screens.

![image](https://docs-assets.foxecom.app/megamog-theme/blog-post-header_WwDRg99G.png)

### **3. Content**

This section is for adding preferable blog posts. You can use the slider to adjust the number of blog posts per row and the number of displayed posts (between 2 and 12).

Additionally, the gap between each post can also be changed here.

![image](https://docs-assets.foxecom.app/megamog-theme/blog-post-content_sOWoIGC6.png)

### **4. Card settings**

The card section is adjusting the blog image ratio and content alignment inside. Furthermore, you can enable/disable the card elements if needed:

* Show tags: Display relevant tags of the blog post
* Show published date: Display the date that the blog is issued
* Show excerpt: Display a short summary of the blog
* Show read more link: Lead the customers to the full blog post

![image](https://docs-assets.foxecom.app/megamog-theme/blog-posst-cart-setting_5nuuuVqm.png)

### **5. Button settings**

Display a call-to-action button to redirect customers to your desired pages. Add a **Label** and **Link** for one or both, then choose a **Button style** and adjust the **Button size.**

![image](https://docs-assets.foxecom.app/megamog-theme/image_UESLTLI4.png)

### 6. Mobile setting

This section lets you display your design for mobile view.

![image](https://docs-assets.foxecom.app/megamog-theme/image_1lb3fwPc.png)