# Blog posts

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FdVk6fuHvOqtTC5wb87tD%2Fblog-post.png?alt=media&#x26;token=9d6debdc-015f-4945-a967-84bf7d5fe322" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **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 the **Megamog** theme.

### **1. General and layout:**&#x20;

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.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FVUsjjb96KcaeubOa2rup%2Fblog-post-general.png?alt=media&#x26;token=b73bfd1c-fef4-470b-87d7-ad68cbf3f241" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FAWYolfmKleOSXJ7U6ESK%2Fblog-post-header.png?alt=media&#x26;token=eb0ed7c6-5864-4b81-8d93-5e00dabdfe7a" alt=""><figcaption></figcaption></figure>

### **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.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F441rmEx4EelNgBxGPc8S%2Fblog-post-content.png?alt=media&#x26;token=cf4d602a-9f86-4f07-87fd-ac1d8ea35160" alt=""><figcaption></figcaption></figure>

### **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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fis8LluKl2ir9UsfG90Ra%2Fblog-posst-cart-setting.png?alt=media&#x26;token=832e16db-8dca-40a5-a6d5-0a988a543545" alt=""><figcaption></figcaption></figure>

### **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.**

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FgOFdMrVI949mNnFrceG0%2Fimage.png?alt=media&#x26;token=24d93d66-f200-4af1-b117-42a7c97e2ae8" alt=""><figcaption></figcaption></figure>

### 6. Mobile setting

This section lets you display your design for mobile view.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FecvEB7dp9WWjP3gLgudx%2Fimage.png?alt=media&#x26;token=e137fb93-7705-4ccb-a846-849986f0929c" alt=""><figcaption></figcaption></figure>