In this tutorial, you'll learn how to create a modern Post Card Grid Section that displays featured posts, articles, or product highlights over a beautiful background with a parallax-style header. This layout is perfect for lifestyle brands, event highlights, or content-driven stores.
🧱 Step 1: Create a New Section
In your Shopify admin, go to:
Online Store → Themes → Edit Code → Sections → Add a new section and name it zhd-post-card-grid.liquid.
Then, paste the following complete code:
<style>
.zhd-post-card-grid {
position: relative;
overflow: hidden;
color: #000;
text-align: center;
}
/* Background area with heading */
.zhd-post-card-grid__bg {
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.zhd-post-card-grid__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.zhd-post-card-grid__text {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem;
margin-top: -286px;
}
.zhd-post-card-grid__subtitle {
font-size: 0.9rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.zhd-post-card-grid__title {
font-size: 2rem;
font-weight: 700;
color: #fff;
}
/* Card container */
.zhd-post-card-grid__inner {
max-width: 1200px;
margin: -300px auto 70px;
padding: 4rem 2rem;
position: relative;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Cards grid */
.zhd-post-card-grid__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.zhd-post-card-grid__card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.zhd-post-card-grid__card:hover {
transform: translateY(-5px);
}
.zhd-post-card-grid__image {
width: 100%;
height: auto;
display: block;
}
.zhd-post-card-grid__card-title {
font-size: 1.1rem;
font-weight: 700;
margin: 1rem 0 0.5rem;
}
.zhd-post-card-grid__card-desc {
font-size: 0.95rem;
color: #555;
padding: 0 1rem;
margin-bottom: 1rem;
}
.zhd-post-card-grid__read-more {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0.6rem 1.5rem;
background: #f7b500;
color: #000;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s;
}
.zhd-post-card-grid__read-more:hover {
background: #ffc233;
}
/* Responsive */
@media (max-width: 768px) {
.zhd-post-card-grid__title {
font-size: 1.5rem;
}
.zhd-post-card-grid__bg {
height: 30vh;
}
.zhd-post-card-grid__text {
margin-top: 0;
}
.zhd-post-card-grid__inner {
margin: -10px auto 70px;
}
}
</style>
{% raw %}{% schema %}{% endraw %}
{
"name": "ZHD Post Card Grid",
"settings": [
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image"
},
{
"type": "text",
"id": "section_subtitle",
"label": "Subtitle",
"default": "TRADE SHOW TIPS AND TRICKS"
},
{
"type": "text",
"id": "section_heading",
"label": "Main Heading",
"default": "Make the Most of Your Next Event"
}
],
"blocks": [
{
"type": "post_card",
"name": "Post Card",
"settings": [
{ "type": "image_picker", "id": "card_image", "label": "Card Image" },
{ "type": "text", "id": "card_title", "label": "Card Title" },
{ "type": "text", "id": "card_description", "label": "Card Description" },
{ "type": "url", "id": "card_link", "label": "Read More Link" }
]
}
],
"max_blocks": 3,
"presets": [
{ "name": "ZHD Post Card Grid" }
]
}
{% raw %}{% endschema %}{% endraw %}
<section class="zhd-post-card-grid">
{% raw %}{% if section.settings.background_image != blank %}{% endraw %}
<div
class="zhd-post-card-grid__bg"
style="background-image: url({{ section.settings.background_image | image_url: width: 2000 }});"
>
<div class="zhd-post-card-grid__overlay"></div>
<div class="zhd-post-card-grid__text">
{% raw %}{% if section.settings.section_subtitle != blank %}{% endraw %}
<p class="zhd-post-card-grid__subtitle">{{ section.settings.section_subtitle }}</p>
{% raw %}{% endif %}{% endraw %}
{% raw %}{% if section.settings.section_heading != blank %}{% endraw %}
<h2 class="zhd-post-card-grid__title">{{ section.settings.section_heading }}</h2>
{% raw %}{% endif %}{% endraw %}
</div>
</div>
{% raw %}{% endif %}{% endraw %}
<div class="zhd-post-card-grid__inner page-width">
<div class="zhd-post-card-grid__cards">
{% raw %}{% for block in section.blocks %}{% endraw %}
<div class="zhd-post-card-grid__card" {{ block.shopify_attributes }}>
{% raw %}{% if block.settings.card_image != blank %}{% endraw %}
<img
src="{{ block.settings.card_image | image_url: width: 600 }}"
alt="{{ block.settings.card_title | escape }}"
class="zhd-post-card-grid__image"
>
{% raw %}{% endif %}{% endraw %}
<h3 class="zhd-post-card-grid__card-title">{{ block.settings.card_title }}</h3>
<p class="zhd-post-card-grid__card-desc">{{ block.settings.card_description }}</p>
{% raw %}{% if block.settings.card_link != blank %}{% endraw %}
<a href="{{ block.settings.card_link }}" class="zhd-post-card-grid__read-more">Read More</a>
{% raw %}{% endif %}{% endraw %}
</div>
{% raw %}{% endfor %}{% endraw %}
</div>
</div>
</section>
🎨 Step 2: Customize the Section
After saving, go back to your Shopify Theme Editor → Add Section → ZHD Post Card Grid.
- Upload a beautiful background image
- Change the subtitle and main heading
- Add up to 3 post cards with images, titles, and “Read More” links
- Use it as a featured blog or event showcase section
✨ Step 3: Result Preview
The section creates a visually appealing, layered design: - Parallax-style hero background - Floating card grid with subtle hover lift effects - Fully responsive for mobile users
💡 Pro Tip: Use bright accent colors in your “Read More” buttons and add consistent imagery for a professional magazine-style layout.