Shopify Custom Blog Posts – Responsive Blog Grid Display
Add a customizable blog post grid to your Shopify store with flexible layout options, hover effects, and responsive design. Features configurable image ratios, excerpts, and metadata for elegant content presentation.
Liquid Code
<!--
========================================
Section Name: Custom Blog Posts
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays blog posts in a responsive grid layout with customizable columns.
- Features animated hover effects, customizable image aspect ratios, and post metadata.
- Includes options for showing/hiding date, author, and post excerpts.
- Fully responsive design with adaptive sizing for mobile, tablet, and desktop.
Promotion:
Showcase your blog content with an elegant, customizable grid layout. Engage readers with attractive post previews and smooth animations. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="custom-blog-posts-section" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px;">
<div class="custom-blog-posts-container page-width">
{% if section.settings.title != blank %}
<h2 class="custom-blog-posts-title" style="color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px; text-align: {{ section.settings.title_alignment }};">
{{ section.settings.title }}
</h2>
{% endif %}
{% if section.settings.subtitle != blank %}
<div class="custom-blog-posts-subtitle" style="color: {{ section.settings.subtitle_color }}; text-align: {{ section.settings.title_alignment }};">
{{ section.settings.subtitle }}
</div>
{% endif %}
<div class="custom-blog-posts-grid" style="gap: {{ section.settings.posts_gap }}px;">
{% for block in section.blocks %}
{% if block.settings.blog_post != blank %}
{% assign article = articles[block.settings.blog_post] %}
<div class="custom-blog-post-item" {{ block.shopify_attributes }}>
<a href="{{ article.url }}" class="custom-blog-post-link">
<div class="custom-blog-post-image-wrapper">
{% if article.image %}
<img src="{{ article.image | img_url: '600x' }}"
alt="{{ article.title | escape }}"
class="custom-blog-post-image">
{% else %}
{{ 'image' | placeholder_svg_tag: 'custom-blog-post-image placeholder' }}
{% endif %}
</div>
<div class="custom-blog-post-meta">
{% if article.author %}
<span class="custom-blog-post-author">By {{ article.author }}</span>
{% endif %}
{% if section.settings.show_date %}
<span class="custom-blog-post-date">
{% if article.author %} • {% endif %}
{{ article.published_at | date: "%b %d, %Y" }}
</span>
{% endif %}
</div>
<h3 class="custom-blog-post-title" style="color: {{ section.settings.post_title_color }};">
{{ article.title }}
</h3>
{% if section.settings.show_excerpt %}
<div class="custom-blog-post-excerpt" style="color: {{ section.settings.text_color }};">
{% if article.excerpt != blank %}
{{ article.excerpt | strip_html | truncatewords: 20 }}
{% else %}
{{ article.content | strip_html | truncatewords: 20 }}
{% endif %}
</div>
{% endif %}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
<style>
.custom-blog-posts-section {
overflow: hidden;
position: relative;
}
.custom-blog-posts-container {
max-width: {{ section.settings.container_width }}px;
margin: 0 auto;
}
.custom-blog-posts-title {
margin-bottom: 15px;
font-weight: {{ section.settings.title_weight }};
line-height: 1.2;
}
.custom-blog-posts-subtitle {
margin-bottom: 30px;
font-size: {{ section.settings.subtitle_size }}px;
line-height: 1.5;
}
.custom-blog-posts-grid {
display: grid;
grid-template-columns: repeat({{ section.settings.columns }}, 1fr);
margin-top: {{ section.settings.grid_top_margin }}px;
}
.custom-blog-post-item {
margin-bottom: {{ section.settings.item_bottom_margin }}px;
transition: transform 0.3s ease;
}
.custom-blog-post-item:hover {
transform: translateY(-5px);
}
.custom-blog-post-link {
text-decoration: none;
color: inherit;
display: block;
}
.custom-blog-post-image-wrapper {
margin-bottom: 15px;
border-radius: {{ section.settings.image_border_radius }}px;
overflow: hidden;
aspect-ratio: {{ section.settings.image_aspect_ratio }};
}
.custom-blog-post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.custom-blog-post-item:hover .custom-blog-post-image {
transform: scale(1.03);
}
.custom-blog-post-meta {
font-size: 14px;
color: {{ section.settings.meta_color }};
margin-bottom: 10px;
}
.custom-blog-post-title {
font-size: {{ section.settings.post_title_size }}px;
margin-bottom: 12px;
font-weight: 600;
line-height: 1.3;
}
.custom-blog-post-excerpt {
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 990px) {
.custom-blog-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.custom-blog-posts-title {
font-size: {{ section.settings.title_size | minus: 6 }}px;
}
.custom-blog-posts-subtitle {
font-size: {{ section.settings.subtitle_size | minus: 2 }}px;
}
.custom-blog-post-title {
font-size: {{ section.settings.post_title_size | minus: 2 }}px;
}
}
@media (max-width: 480px) {
.custom-blog-posts-grid {
grid-template-columns: 1fr;
}
}
</style>
{% schema %}
{
"name": "Custom Blog Posts",
"settings": [
{
"type": "range",
"id": "pad_top",
"label": "Padding Top",
"min": 0,
"max": 200,
"step": 5,
"default": 40
},
{
"type": "range",
"id": "pad_bot",
"label": "Padding Bottom",
"min": 0,
"max": 200,
"step": 5,
"default": 40
},
{
"type": "color",
"id": "bg_color",
"label": "Background Color",
"default": "#FFFFFF"
},
{
"type": "range",
"id": "container_width",
"label": "Container Width",
"min": 800,
"max": 1600,
"step": 50,
"default": 1200
},
{
"type": "header",
"content": "Heading Settings"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Most Popular Blog Posts"
},
{
"type": "range",
"id": "title_size",
"label": "Heading Size",
"min": 20,
"max": 60,
"step": 2,
"default": 32
},
{
"type": "select",
"id": "title_weight",
"label": "Heading Weight",
"options": [
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi-Bold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "600"
},
{
"type": "color",
"id": "title_color",
"label": "Heading Color",
"default": "#333333"
},
{
"type": "select",
"id": "title_alignment",
"label": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Phasellus lorem malesuada ligula pulvinar commodo"
},
{
"type": "range",
"id": "subtitle_size",
"label": "Subtitle Size",
"min": 12,
"max": 24,
"step": 1,
"default": 16
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle Color",
"default": "#666666"
},
{
"type": "header",
"content": "Layout Settings"
},
{
"type": "range",
"id": "columns",
"label": "Columns (Desktop)",
"min": 1,
"max": 4,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "posts_gap",
"label": "Gap Between Posts",
"min": 10,
"max": 60,
"step": 5,
"default": 30
},
{
"type": "range",
"id": "grid_top_margin",
"label": "Grid Top Margin",
"min": 0,
"max": 100,
"step": 5,
"default": 20
},
{
"type": "range",
"id": "item_bottom_margin",
"label": "Item Bottom Margin",
"min": 0,
"max": 60,
"step": 5,
"default": 20
},
{
"type": "header",
"content": "Post Settings"
},
{
"type": "select",
"id": "image_aspect_ratio",
"label": "Image Aspect Ratio",
"options": [
{
"value": "1/1",
"label": "Square (1:1)"
},
{
"value": "4/3",
"label": "Landscape (4:3)"
},
{
"value": "16/9",
"label": "Widescreen (16:9)"
}
],
"default": "16/9"
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image Border Radius",
"min": 0,
"max": 20,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_date",
"label": "Show Date",
"default": true
},
{
"type": "checkbox",
"id": "show_excerpt",
"label": "Show Excerpt",
"default": true
},
{
"type": "range",
"id": "post_title_size",
"label": "Post Title Size",
"min": 14,
"max": 32,
"step": 1,
"default": 18
},
{
"type": "color",
"id": "post_title_color",
"label": "Post Title Color",
"default": "#333333"
},
{
"type": "color",
"id": "meta_color",
"label": "Meta Text Color",
"default": "#666666"
},
{
"type": "color",
"id": "text_color",
"label": "Excerpt Text Color",
"default": "#777777"
}
],
"blocks": [
{
"type": "blog_post",
"name": "Blog Post",
"settings": [
{
"type": "article",
"id": "blog_post",
"label": "Blog Post"
}
]
}
],
"presets": [
{
"name": "Custom Blog Posts",
"blocks": [
{
"type": "blog_post"
},
{
"type": "blog_post"
},
{
"type": "blog_post"
}
]
}
]
}
{% endschema %}