How can I display 2 blog posts on the left and 3 on the right?

ritikaaa
Shopify Partner
1 0 0

Hello, please let me know how to display shopify 2 blog posts without title on left side and 3 posts with title on right side basically it's a banner section of blog page  and remaining posts below this banner section. 

Reply 1 (1)

Xipirons
Shopify Partner
136 24 30

Hi @ritikaaa 

 

Here are the steps to create a custom blog page layout in Shopify with 2 posts without titles on the left and 3 posts with titles on the right in a banner section, followed by the remaining posts below:

 

1. Create a new template file for the custom blog layout:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, click Actions > Edit Code.
- Under Templates, click Add a new template.
- Select page as the template type.
- Name the template file something like page.custom-blog.liquid and click Create template.

2. Add the following code to the new page.custom-blog.liquid template file:

 

<div class="blog-banner">
<div class="left-posts">
{% for article in blog.articles limit:2 %}
<div class="post-item">
<a href="{{ article.url }}">
{% if article.image %}
<img src="{{ article.image | img_url: '600x' }}" alt="{{ article.title }}">
{% endif %}
</a>
</div>
{% endfor %}
</div>

<div class="right-posts">
{% for article in blog.articles limit:3 offset:2 %}
<div class="post-item">
<a href="{{ article.url }}">
{% if article.image %}
<img src="{{ article.image | img_url: '300x' }}" alt="{{ article.title }}">
{% endif %}
<h3>{{ article.title }}</h3>
</a>
</div>
{% endfor %}
</div>
</div>

<div class="blog-list">
{% for article in blog.articles offset:5 %}
<div class="post-item">
<a href="{{ article.url }}">
{% if article.image %}
<img src="{{ article.image | img_url: '600x' }}" alt="{{ article.title }}">
{% endif %}
<h3>{{ article.title }}</h3>
<p>{{ article.excerpt }}</p>
</a>
</div>
{% endfor %}
</div>

 

This code :
- Creates a `div` for the banner section with 2 posts on left and 3 on right
- Loops through first 2 articles and displays image only
- Loops through next 3 articles and displays image + title
- Creates another `div` to display remaining articles below banner with image, title, excerpt

3. Add some CSS to style the layout in your theme's main CSS file:

 

.blog-banner {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.left-posts, .right-posts {
display: flex;
flex-wrap: wrap;
}

.left-posts .post-item {
flex: 1 0 48%;
margin: 1%;
}

.right-posts .post-item {
flex: 1 0 31%;
margin: 1%;
}

.blog-list .post-item {
margin-bottom: 30px;
}



4. Create a new page in Shopify admin and select the new "page.custom-blog" template. Publish the page.

5. The custom blog page layout with banner and post list should now be live on your site!

In summary:
- Create custom page template
- Add Liquid code to display posts in banner layout
- Style with CSS
- Publish new page with custom template

 

This allows you to have a unique blog layout with featured posts in a banner section followed by a standard list of posts.

Best regards

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed