How to Add a Vertical Card Slider in Shopify (No App Required) – Ready-to-Use Code Snippet with GSAP Animation
Adding interactive and visually appealing elements to your Shopify store can significantly enhance user engagement and improve the overall shopping experience. One such element is a Vertical Card Slider, which allows you to showcase products, collections, or promotional content in a sleek, animated format. The best part? You don’t need any paid apps to achieve this! In this blog post, I’ll walk you through how to add a Vertical Card Slider to your Shopify store using a ready-to-use code snippet powered by GSAP (GreenSock Animation Platform).
What is a Vertical Card Slider?
A Vertical Card Slider is a dynamic UI component that displays content (like images, headings, and buttons) in a stacked, card-like format. Users can interact with the slider by clicking or tapping to reveal the next card, creating a smooth and engaging animation effect. This type of slider is perfect for highlighting featured products, promotions, or key messages on your Shopify store.
Why Use a Vertical Card Slider?
Here are some benefits and advantages of adding a Vertical Card Slider to your Shopify store:
- Enhanced User Experience:
- The smooth GSAP animations make the slider visually appealing and interactive, keeping users engaged.
- Space Efficiency:
- Vertical sliders take up less horizontal space, making them ideal for mobile-responsive designs.
- No App Required:
- By using custom code, you can avoid monthly app fees and have full control over the design and functionality.
- Customizable:
- Easily customize the slider’s colors, text, and animations to match your store’s branding.
- Improved Conversions:
- Highlight key products or promotions in an eye-catching way, encouraging users to click through and explore.
- Lightweight and Fast:
- GSAP is a high-performance animation library, ensuring smooth animations without slowing down your site.
How to Add the Vertical Card Slider to Your Shopify Store
To make the process even easier, I’ve created a video guideline and provided a ready-to-use code snippet below. Follow along step-by-step to integrate the Vertical Card Slider into your Shopify store without any hassle.
Video Guideline
Watch this quick video tutorial to see how to add the Vertical Card Slider to your Shopify store:
(Replace VIDEO_ID with the actual YouTube video ID once you upload the tutorial video.)
Ready-to-Use Code Snippet
Below is the complete code snippet for the Vertical Card Slider. Simply copy and paste it into your Shopify theme as described in the steps.
{% schema %}
{
"name": "Vertical Card Slider",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#dfe1c8"
},
{
"type": "color",
"id": "button_color",
"label": "Button Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "heading_text_color",
"label": "Heading Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "subtitle_text_color",
"label": "Subtitle Text Color",
"default": "#e0e0e0"
},
{
"type": "checkbox",
"id": "enable_button",
"label": "Enable Button",
"default": true
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"limit": 5,
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "Slide Image"
},
{
"type": "text",
"id": "slide_heading",
"label": "Slide Heading",
"default": "eCommerce Thesis"
},
{
"type": "text",
"id": "slide_subtitle",
"label": "Slide Subtitle",
"default": "Your Trusted eCommerce Partner"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
}
]
}
],
"presets": [
{
"name": "Vertical Card Slider",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
<div class="featured-cards-container">
<div class="featured-cards-slider">
{% for block in section.blocks %}
<div class="featured-card" {{ block.shopify_attributes }}>
{% if block.settings.slide_image %}
{{ block.settings.slide_image | image_url: width: 2000 | image_tag }}
{% endif %}
<div class="card-copy">
<h1>{{ block.settings.slide_heading }}</h1>
<p class="subtitle">{{ block.settings.slide_subtitle }}</p>
{% if block.settings.button_link and section.settings.enable_button %}
<div class="card-button-wrapper">
<a href="{{ block.settings.button_link }}" class="card-button">
{{ block.settings.button_text }}
</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="authority-text">
This slider developed by <strong>Foysal Ahmed</strong> - Shopify Developer and SEO Expert | Presented by <strong>eCommerce Thesis</strong>
</div>
</div>
<style>
.featured-cards-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: {{ section.settings.background_color }};
}
.featured-cards-slider {
position: absolute;
top: 15vh;
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 300px;
perspective-origin: 50% 50%;
}
.featured-card {
position: absolute;
top: 35%;
left: 50%;
width: 50%;
height: 400px;
border-radius: 10px;
overflow: hidden;
transform: translate3d(-50%, -50%, 0);
background-color: #000;
opacity: 1;
visibility: visible;
cursor: pointer;
}
.featured-card img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.75;
}
.card-copy {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
text-align: center;
}
.card-copy h1 {
position: relative;
text-align: center;
font-size: 6vw;
font-weight: 300;
letter-spacing: -0.05em;
text-transform: uppercase;
color: {{ section.settings.heading_text_color }};
margin-bottom: 10px;
}
.card-copy .subtitle {
position: relative;
text-align: center;
font-size: 2vw;
font-weight: 300;
color: {{ section.settings.subtitle_text_color }};
margin-bottom: 20px;
}
.card-copy h1 span {
position: relative;
display: inline-block;
opacity: 1;
visibility: visible;
}
.card-button-wrapper {
position: relative;
margin-top: 40px;
opacity: 1; /* Always visible */
transform: translateY(0); /* No animation */
}
.card-button {
display: inline-block;
padding: 12px 30px;
background-color: {{ section.settings.button_color }};
color: {{ section.settings.button_text_color }};
text-decoration: none;
border-radius: 25px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.authority-text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 14px;
color: #000000;
opacity: 0.8;
}
@media(max-width: 500px) {
.featured-cards-slider {
top: 27vh;
}
.featured-card {
height: 300px;
width: 80%;
}
.card-copy h1 {
font-size: 8vw;
}
.card-copy .subtitle {
font-size: 4vw;
}
.card-button {
padding: 10px 20px;
font-size: 14px;
}
.card-button-wrapper {
margin-top: 30px;
}
.authority-text {
font-size: 12px;
bottom: 10px;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" defer></script>
<script defer>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(initializeSlider, 100);
});
function initializeSlider() {
if (typeof gsap === 'undefined' || typeof CustomEase === 'undefined') {
setTimeout(initializeSlider, 100);
return;
}
CustomEase.create("cubic", "0.83, 0, 0.17, 1");
let isAnimating = false;
function splitTextIntoSpans() {
const headings = document.querySelectorAll('.card-copy h1');
headings.forEach(heading => {
if (!heading.querySelector('span')) {
const text = heading.textContent;
heading.innerHTML = text.split('').map(char =>
`<span>${char === ' ' ? ' ' : char}</span>`
).join('');
}
});
}
function initializeCards() {
const cards = Array.from(document.querySelectorAll('.featured-card'));
cards.forEach(card => {
card.style.visibility = 'visible';
card.style.opacity = '1';
});
gsap.to(cards, {
y: (i) => -15 + 15 * i + '%',
z: (i) => 15 * i,
duration: 1,
ease: 'cubic',
stagger: -0.1,
clearProps: 'visibility,opacity'
});
}
function handleCardAnimation(event) {
// Don't trigger animation if clicking the button
if (event.target.closest('.card-button')) {
return;
}
if (isAnimating) return;
isAnimating = true;
const slider = document.querySelector('.featured-cards-slider');
const cards = Array.from(slider.querySelectorAll('.featured-card'));
const lastCard = cards.pop();
const nextCard = cards[cards.length - 1];
gsap.to(lastCard.querySelectorAll('.card-copy h1 span'), {
y: 200,
duration: 0.75,
ease: 'cubic'
});
gsap.to(lastCard, {
y: '+=150%',
duration: 0.75,
ease: 'cubic',
onComplete: () => {
slider.prepend(lastCard);
initializeCards();
gsap.set(lastCard.querySelectorAll('.card-copy h1 span'), { y: -200 });
setTimeout(() => {
isAnimating = false;
}, 1000);
}
});
gsap.to(nextCard.querySelectorAll('.card-copy h1 span'), {
y: 0,
duration: 1,
ease: 'cubic',
stagger: 0.05
});
}
splitTextIntoSpans();
gsap.set('.card-copy h1 span', { y: -200 });
gsap.set('.featured-cards-slider .featured-card:last-child .card-copy h1 span', { y: 0 });
setTimeout(initializeCards, 100);
const cards = document.querySelectorAll('.featured-card');
cards.forEach(card => {
card.addEventListener('click', handleCardAnimation);
});
}
</script>Conclusion
Adding a Vertical Card Slider to your Shopify store is a fantastic way to showcase your products or promotions in a visually engaging way. With the ready-to-use code snippet provided in this post, you can implement this feature without relying on any paid apps. Plus, the GSAP animations ensure a smooth and professional user experience.
If you have any questions or need further assistance, feel free to reach out! Happy coding! 🚀
Developed by Foysal Ahmed – Shopify Developer & SEO Expert | Presented by eCommerce Thesis