All things Shopify and commerce
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.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025