Shopify Services Showcase – Interactive Animated Cards
Add a visually striking services showcase to your Shopify store with animated hover effects. Features customizable cards with background images, accent colors, and responsive design.
Liquid Code
<!--
========================================
Section Name: Services Showcase
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays an interactive grid of service cards with stunning hover animations.
- Features customizable background colors, accent colors, and content positioning.
- Includes animated background effects with circular reveals on hover.
- Fully responsive design that adapts from mobile to desktop layouts.
Promotion:
Showcase your services with eye-catching animated cards. Create visual impact with circular reveals and elegant typography. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="services-showcase-section" style="background-color: {{ section.settings.background_color }};">
<div class="services-showcase-container page-width">
<span class="services-showcase-subtitle">
{{ section.settings.subtitle_text }}
{% if section.settings.show_arrow %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="services-showcase-arrow">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
</svg>
{% endif %}
</span>
<h2 class="services-showcase-title">{{ section.settings.title }}</h2>
<div class="services-showcase-grid">
{% for block in section.blocks %}
<div class="services-showcase-card" {{ block.shopify_attributes }}>
<div class="services-showcase-card-bg"></div>
<div class="services-showcase-circle" {% if block.settings.background_image != blank %}style="background-image: url('{{ block.settings.background_image | img_url: 'master' }}');"{% endif %}></div>
<div class="services-showcase-content {% if block.settings.position == 'right' %}services-showcase-content-right{% else %}services-showcase-content-left{% endif %}">
<h3 class="services-showcase-card-title">{{ block.settings.title | newline_to_br }}</h3>
<p class="services-showcase-card-text">{{ block.settings.description }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap");
.services-showcase-section {
min-height: 100vh;
background-color: {{ section.settings.background_color }};
text-align: center;
padding: 5rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.services-showcase-subtitle {
color: {{ section.settings.subtitle_color }};
font-size: 1.125rem;
max-width: 32rem;
margin: 0 auto 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
}
.services-showcase-arrow {
color: {{ section.settings.accent_color }};
width: 1.5rem;
height: 1.5rem;
margin-left: 0.75rem;
}
.services-showcase-title {
color: {{ section.settings.title_color }};
font-size: clamp(2rem, 5vw, 3.75rem);
font-weight: 600;
max-width: 48rem;
margin: 0 auto 4rem;
line-height: 1.2;
}
.services-showcase-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 100rem;
margin: 0 auto;
text-align: left;
}
.services-showcase-card {
background-color: {{ section.settings.card_background }};
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.services-showcase-card:hover {
box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgba(0, 0, 0, 0.53);
}
.services-showcase-card-bg {
position: absolute;
content: "";
width: 100%;
height: 100%;
transition: 0.6s;
z-index: 0;
background-color: {{ section.settings.accent_color }};
}
.services-showcase-card:nth-child(1) .services-showcase-card-bg {
bottom: 0;
right: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}
.services-showcase-card:nth-child(2) .services-showcase-card-bg {
bottom: 0;
left: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}
.services-showcase-card:nth-child(3) .services-showcase-card-bg {
top: 0;
right: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}
.services-showcase-card:nth-child(4) .services-showcase-card-bg {
top: 0;
left: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}
.services-showcase-card:hover .services-showcase-card-bg {
clip-path: circle(110vw at 100% 100%);
}
.services-showcase-circle {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
display: none;
}
.services-showcase-card:nth-child(1) .services-showcase-circle {
bottom: 0;
right: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
}
.services-showcase-card:nth-child(2) .services-showcase-circle {
bottom: 0;
left: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
}
.services-showcase-card:nth-child(3) .services-showcase-circle {
top: 0;
right: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
}
.services-showcase-card:nth-child(4) .services-showcase-circle {
top: 0;
left: 0;
clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
}
.services-showcase-content {
position: relative;
z-index: 1;
}
.services-showcase-card-title {
font-family: "Playfair Display", serif;
color: {{ section.settings.title_color }};
margin-bottom: 1rem;
font-size: clamp(1.5rem, 3vw, 1.875rem);
font-weight: 400;
text-transform: capitalize;
line-height: 1.2;
}
.services-showcase-card-text {
color: {{ section.settings.text_color }};
transition: 0.8s;
}
.services-showcase-card:hover .services-showcase-card-text {
color: #fff;
}
.services-showcase-card-bg , .services-showcase-circle{
display: block!important;
}
@media screen and (min-width: 640px) {
.services-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1000px) {
.services-showcase-section {
padding: 5rem 0;
}
.services-showcase-circle {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.services-showcase-content-right {
padding-right: 13rem;
}
.services-showcase-content-left {
padding-left: 12rem;
}
}
</style>
</section>
{% schema %}
{
"name": "Services Showcase",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#111827"
},
{
"type": "color",
"id": "card_background",
"label": "Card Background Color",
"default": "#1f2937"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent Color",
"default": "#4f46e5"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle Color",
"default": "#9ca3af"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#9ca3af"
},
{
"type": "text",
"id": "subtitle_text",
"label": "Subtitle Text",
"default": "Lorem ipsum "
},
{
"type": "checkbox",
"id": "show_arrow",
"label": "Show Arrow Icon",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
}
],
"blocks": [
{
"type": "service",
"name": "Service",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Title",
"default": "UI/UX\nCreative Design"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames."
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image"
},
{
"type": "select",
"id": "position",
"label": "Content Position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "right"
}
]
}
],
"presets": [
{
"name": "Services Showcase",
"category": "Custom Content",
"blocks": [
{
"type": "service",
"settings": {
"title": "UI/UX\nCreative Design",
"position": "right"
}
},
{
"type": "service",
"settings": {
"title": "Visual\nGraphic Design",
"position": "left"
}
},
{
"type": "service",
"settings": {
"title": "Strategy &\nDigital Marketing",
"position": "right"
}
},
{
"type": "service",
"settings": {
"title": "Effective\nBusiness Growth",
"position": "left"
}
}
]
}
]
}
{% endschema %}