Learn how to build a stunning flip card section that shows front and back images with text animations when hovered — all using Liquid, HTML, and CSS.
🧠 What You’ll Learn
- Create an animated card that flips on hover.
- Add customizable front and back images with text overlays.
- Control section padding and heading size using Shopify settings.
💻 Step 1: Create the Flip Card Section
In your Shopify dashboard, go to Online Store → Themes → Edit code, then open the Sections folder and click “Add a new section.” Name it zhd-flip-card.liquid. Paste the following code inside:
{% raw %}
{% style %}
#zhd--flip_card{{ section.id }} .card-container {
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:1450px;
margin:0 auto;
}
#zhd--flip_card{{ section.id }} .sec__heading {
text-align:center;
margin-bottom:20px;
}
#zhd--flip_card{{ section.id }} .card {
width:450px;
height:350px;
perspective:1000px;
margin:10px;
}
#zhd--flip_card{{ section.id }} .card-inner {
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
transition:transform 0.6s;
}
#zhd--flip_card{{ section.id }} .card:hover .card-inner {
transform:rotateX(-180deg);
}
#zhd--flip_card{{ section.id }} .card-front,
#zhd--flip_card{{ section.id }} .card-back {
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:24px;
font-weight:600;
text-align:center;
background-size:cover;
background-position:center;
}
#zhd--flip_card{{ section.id }} .card-back {
transform:rotateX(180deg);
}
#zhd--flip_card{{ section.id }} .card-content {
background:rgba(0,0,0,0.5);
padding:20px;
border-radius:8px;
}
{% endstyle %}
<section id="zhd--flip_card{{ section.id }}">
<div class="card-container">
{% if section.settings.sec_heading %}
<div class="sec__heading">
<h2>{{ section.settings.sec_heading }}</h2>
</div>
{% endif %}
{% for block in section.blocks %}
<div class="card">
<div class="card-inner">
<div class="card-front" style="background-image:url('{{ block.settings.front_image | image_url }}');">
<div class="card-content">{{ block.settings.front_txt }}</div>
</div>
<div class="card-back" style="background-image:url('{{ block.settings.back_image | image_url }}');">
<div class="card-content">{{ block.settings.back_txt }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% schema %}
{
"name":"ZHD Flip Card",
"settings":[
{"type":"text","id":"sec_heading","label":"Section Heading","default":"Section Heading"}
],
"blocks":[
{"type":"block","name":"Card Item","settings":[
{"type":"image_picker","id":"front_image","label":"Front Image"},
{"type":"text","id":"front_txt","label":"Front Text","default":"Front Text"},
{"type":"image_picker","id":"back_image","label":"Back Image"},
{"type":"text","id":"back_txt","label":"Back Text","default":"Back Text"}
]}
],
"presets":[{"name":"ZHD Flip Card"}]
}
{% endschema %}
{% endraw %}
🎨 Step 2: Customize Your Section
Once saved, go to your Theme Editor (Customize), and add the “ZHD Flip Card” section. You can upload front and back images for each card and add your own text overlay. The section will automatically flip on hover.