# Blog posts
**Blog posts** element lets you showcase articles in a visually appealing card layout. This element is ideal for sharing news, tips, stories, or tutorials while keeping your store engaging and informative. With customizable styles, Blog post cards can be tailored to match your brand’s design and improve the overall browsing experience.
{% hint style="info" %}
Learn how to [add and manage blog posts in Shopify](https://help.shopify.com/manual/online-store/blogs/writing-blogs/working-with-blog-posts)
Learn how to publish blog post template: [Create a Blog post](https://docs.foxecom.com/foxify-app/page-management/page-creation/create-a-blog-post)
{% endhint %}
## How to add a Blog posts element
{% hint style="success" %}
Steps:
1. From the editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Quick add**, select **Blog posts.**
3. Drag the **Blog posts** onto your canvas.
{% endhint %}
## How to edit a Blog posts element
Once you’ve added the Blog posts, the next step is to edit it to match your desired action.
{% hint style="success" %}
**Steps:**
1. **Select** the relevant Blog posts element in the editor.
2. Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided **Inspector** panel.
{% endhint %}
### General settings
* **Select blog:** Choose the blog collection you want to display posts from.
* **Number of posts:** Set number of posts are displayed in the section using the slider, with a **maximum of 24 posts**.
* **Columns:** Select number of columns of posts to display.
* **Gap:** Adjust the spacing between posts horizontally and vertically.
* **Enable carousel on desktop:** Toggle to display the posts as a carousel on desktop devices.
* **Enable swipe on mobile:** Toggle to allow swipe navigation for posts on mobile devices.
## How to edit an Article card element
Inside the Blog Posts section, each post is displayed as an Article card element.
{% hint style="success" %}
**Steps:**
1. **Select** the relevant Blog posts element in the editor.
2. Click on a blog post to edit the article card element.
3. Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided **Inspector** panel.
{% endhint %}
### Preset card style
* **Card style:** Choose styling for your article cards.
{% tabs %}
{% tab title="Use global" %}
* Apply the product card styles defined in **Theme settings > Product cards**, ensuring consistent design across your store.
{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}
{% tab title="Style 1" %}
{% endtab %}
{% tab title="Style 2" %}
{% endtab %}
{% tab title="Custom" %}
{% endtab %}
{% endtabs %}
* **Image ratio:** Defines the ratio of article images.
{% tabs %}
{% tab title="Use global" %}
* Apply the image ratio defined in **Theme settings > Product cards**, ensuring consistent design across your store.
{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}
{% tab title="Adapt to image" %}
{% endtab %}
{% tab title="Square (1:1)" %}
{% endtab %}
{% tab title="Portrait (3:4)" %}
{% endtab %}
{% tab title="Landscape (4:3)" %}
{% endtab %}
{% endtabs %}
* **Text align:** Controls the alignment of text within the article card element.
{% tabs %}
{% tab title="Left" %}
{% endtab %}
{% tab title="Center" %}
{% endtab %}
{% tab title="Right" %}
{% endtab %}
{% endtabs %}
### Custom card style
**Manage article card's elements:**
* **Add new elements**: Insert additional fields or information into the article card.
* **Reorder elements**: Rearrange the order of elements in the article card to prioritize important content.
* **Post image:**
* **Image ratio:** Defines the ratio of article images.
* **Post meta:**
* **Format:** Define how post meta information is displayed. You can use placeholders like {{ date }} and {{ author }}.
* **Date format:** Choose the display format for dates.
* **Post title:** Define the HTML tag (e.g., span, h2, h3) for the product titles.
* **Post excerpt:**
* **Show post content as fallback:** Display the post content if no excerpt is provided.
* **Word limit:** Set the maximum number of words shown in the excerpt.
* **Read more:** Direct customers to the blog post details when clicked.
---
# 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/foxify-app/foxstudio/add-and-edit-elements/blog-posts.md?ask=
```
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.
