- This Shopify Liquid code creates a fully customizable shopify banner slider with smooth fade/pull/slide transitions, mobile-responsive design, and autoplay/navigation controls for engaging product displays.
- It allows separate desktop/mobile images, customizable buttons with links, and three transition effects to showcase content beautifully across devices.
- Need help implementing this? Contact a Shopify developer for professional customization and integration services to make it work perfectly for your store.
-- Shopify Schema Code --
{% schema %}
{
"name": "Advanced Banner Slider",
"settings": [
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show Navigation Arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show Pagination Dots",
"default": true
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Enable Autoplay",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": "Autoplay Speed (seconds)",
"min": 2,
"max": 10,
"step": 1,
"default": 5
},
{
"type": "range",
"id": "slide_height_desktop",
"label": "Slide Height (Desktop)",
"min": 300,
"max": 800,
"step": 10,
"default": 500,
"unit": "px"
},
{
"type": "range",
"id": "slide_height_mobile",
"label": "Slide Height (Mobile)",
"min": 200,
"max": 600,
"step": 10,
"default": 300,
"unit": "px"
},
{
"type": "select",
"id": "transition_effect",
"label": "Transition Effect",
"options": [
{
"value": "fade",
"label": "Fade"
},
{
"value": "pull",
"label": "Pull"
},
{
"value": "slide",
"label": "Slide"
}
],
"default": "fade"
},
{
"type": "range",
"id": "transition_duration",
"label": "Transition Duration (ms)",
"min": 300,
"max": 1000,
"step": 100,
"default": 600,
"unit": "ms"
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image_desktop",
"label": "Desktop Image",
"info": "Recommended size: 1800x800px"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile Image",
"info": "Recommended size: 800x1000px"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Slide Heading"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Slide description text goes here</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#ffffff"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "Advanced Banner Slider",
"category": "Image",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
-- Shopify Liquid Code --
<div class="banner-slider"
id="banner-slider-{{ section.id }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplay-speed="{{ section.settings.autoplay_speed | times: 1000 }}"
data-transition="{{ section.settings.transition_effect }}"
data-transition-duration="{{ section.settings.transition_duration }}">
<div class="banner-slider__slides-container">
{% for block in section.blocks %}
<div class="banner-slider__slide {% if forloop.first %}banner-slider__slide--active{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.image_desktop != blank %}
<picture>
<source media="(min-width: 768px)" srcset="{{ block.settings.image_desktop | img_url: '1800x' }}">
<source media="(max-width: 767px)" srcset="{% if block.settings.image_mobile != blank %}{{ block.settings.image_mobile | img_url: '800x' }}{% else %}{{ block.settings.image_desktop | img_url: '800x' }}{% endif %}">
<img decoding="async" class="banner-slider__image" src="{{ block.settings.image_desktop | img_url: '1800x' }}" alt="{{ block.settings.heading | escape }}" loading="lazy">
</picture>
{% endif %}
<div class="banner-slider__content" style="color: {{ block.settings.text_color }}; text-align: {{ block.settings.text_alignment }};">
{% if block.settings.heading != blank %}
<h2 class="banner-slider__heading">{{ block.settings.heading }}</h2>
{% endif %}
{% if block.settings.text != blank %}
<div class="banner-slider__text">{{ block.settings.text }}</div>
{% endif %}
{% if block.settings.button_text != blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}" class="banner-slider__button" style="background-color: {{ block.settings.button_bg_color }}; color: {{ block.settings.button_text_color }};">
{{ block.settings.button_text }}
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if section.blocks.size > 1 %}
{% if section.settings.show_arrows %}
<button class="banner-slider__arrow banner-slider__arrow--prev" aria-label="Previous slide">
←
</button>
<button class="banner-slider__arrow banner-slider__arrow--next" aria-label="Next slide">
→
</button>
{% endif %}
{% if section.settings.show_dots %}
<div class="banner-slider__dots">
{% for block in section.blocks %}
<button class="banner-slider__dot {% if forloop.first %}banner-slider__dot--active{% endif %}" data-index="{{ forloop.index0 }}" aria-label="Go to slide {{ forloop.index }}"></button>
{% endfor %}
</div>
{% endif %}
{% endif %}
</div>
-- CSS Code --
{% style %}
.banner-slider {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.banner-slider__slides-container {
position: relative;
width: 100%;
height: {{ section.settings.slide_height_desktop }}px;
}
/* Fade Transition */
.banner-slider[data-transition="fade"] .banner-slider__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity {{ section.settings.transition_duration }}ms ease-in-out;
z-index: 1;
}
.banner-slider[data-transition="fade"] .banner-slider__slide--active {
opacity: 1;
z-index: 2;
}
/* Pull Transition */
.banner-slider[data-transition="pull"] .banner-slider__slides-container {
overflow: hidden;
}
.banner-slider[data-transition="pull"] .banner-slider__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform {{ section.settings.transition_duration }}ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
.banner-slider[data-transition="pull"] .banner-slider__slide--next {
transform: translateX(100%);
}
.banner-slider[data-transition="pull"] .banner-slider__slide--prev {
transform: translateX(-100%);
}
.banner-slider[data-transition="pull"] .banner-slider__slide--active {
transform: translateX(0);
z-index: 2;
}
/* Slide Transition */
.banner-slider[data-transition="slide"] .banner-slider__slides-container {
display: flex;
transition: transform {{ section.settings.transition_duration }}ms ease-in-out;
}
.banner-slider[data-transition="slide"] .banner-slider__slide {
min-width: 100%;
height: 100%;
}
/* Common Slide Styles */
.banner-slider__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: {{ block.settings.text_alignment }};
padding: 2rem;
z-index: 2;
color: {{ block.settings.text_color }};
text-align: {{ block.settings.text_alignment }};
}
.banner-slider__heading {
font-size: 2.5rem;
margin-bottom: 1rem;
color: inherit;
}
.banner-slider__text {
font-size: 1.2rem;
margin-bottom: 1.5rem;
max-width: 600px;
color: inherit;
}
.banner-slider__button {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: {{ block.settings.button_bg_color }};
color: {{ block.settings.button_text_color }};
text-decoration: none;
border-radius: 4px;
font-weight: bold;
transition: opacity 0.3s ease;
}
.banner-slider__button:hover {
opacity: 0.9;
}
.banner-slider__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Navigation Arrows */
.banner-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
border: none;
}
.banner-slider__arrow--prev {
left: 20px;
}
.banner-slider__arrow--next {
right: 20px;
}
/* Pagination Dots */
.banner-slider__dots {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 3;
}
.banner-slider__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
margin: 0 5px;
cursor: pointer;
border: none;
padding: 0;
transition: background-color 0.3s ease;
}
.banner-slider__dot--active {
background-color: #fff;
}
/* Mobile Styles */
@media screen and (max-width: 767px) {
.banner-slider__slides-container,
.banner-slider__slide {
height: {{ section.settings.slide_height_mobile }}px;
}
.banner-slider__heading {
font-size: 1.8rem;
}
.banner-slider__text {
font-size: 1rem;
}
.banner-slider__dot {
width: 10px;
height: 10px;
}
}
{% endstyle %}
-- Java Script Code --
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.getElementById('banner-slider-{{ section.id }}');
if (!slider) return;
const slidesContainer = slider.querySelector('.banner-slider__slides-container');
const slides = slider.querySelectorAll('.banner-slider__slide');
if (slides.length <= 1) return;
const prevArrow = slider.querySelector('.banner-slider__arrow--prev');
const nextArrow = slider.querySelector('.banner-slider__arrow--next');
const dots = slider.querySelectorAll('.banner-slider__dot');
const autoplay = slider.dataset.autoplay === 'true';
const autoplaySpeed = parseInt(slider.dataset.autoplaySpeed) || 5000;
const transitionEffect = slider.dataset.transition || 'fade';
const transitionDuration = parseInt(slider.dataset.transitionDuration) || 600;
let currentIndex = 0;
let autoplayInterval;
let isTransitioning = false;
function showSlide(index) {
if (isTransitioning || index === currentIndex) return;
isTransitioning = true;
const direction = index > currentIndex ? 'next' : 'prev';
const newIndex = (index + slides.length) % slides.length;
// Prepare slides based on transition effect
if (transitionEffect === 'pull') {
slides[currentIndex].classList.add(`banner-slider__slide--${direction}`);
slides[newIndex].classList.add('banner-slider__slide--active');
}
else if (transitionEffect === 'fade') {
slides[currentIndex].classList.remove('banner-slider__slide--active');
slides[newIndex].classList.add('banner-slider__slide--active');
}
else if (transitionEffect === 'slide') {
slidesContainer.style.transform = `translateX(-${newIndex * 100}%)`;
}
// Update dots
if (dots.length) {
dots.forEach((dot, i) => {
dot.classList.toggle('banner-slider__dot--active', i === newIndex);
});
}
// Complete transition
setTimeout(() => {
if (transitionEffect === 'pull') {
slides[currentIndex].classList.remove('banner-slider__slide--active', `banner-slider__slide--${direction}`);
}
currentIndex = newIndex;
isTransitioning = false;
}, transitionDuration);
}
function nextSlide() {
showSlide(currentIndex + 1);
}
function prevSlide() {
showSlide(currentIndex - 1);
}
function startAutoplay() {
if (autoplay) {
autoplayInterval = setInterval(nextSlide, autoplaySpeed);
}
}
function stopAutoplay() {
clearInterval(autoplayInterval);
}
// Initialize
if (transitionEffect === 'slide') {
slidesContainer.style.width = `${slides.length * 100}%`;
slides.forEach(slide => {
slide.style.width = `${100 / slides.length}%`;
});
} else {
showSlide(0);
}
// Event listeners
if (nextArrow) nextArrow.addEventListener('click', nextSlide);
if (prevArrow) prevArrow.addEventListener('click', prevSlide);
dots.forEach(dot => {
dot.addEventListener('click', function() {
const index = parseInt(this.dataset.index);
showSlide(index);
});
});
// Keyboard navigation
slider.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
// Autoplay
if (autoplay) {
startAutoplay();
slider.addEventListener('mouseenter', stopAutoplay);
slider.addEventListener('mouseleave', startAutoplay);
}
});
</script>
Key Features:
Multiple Transition Effects:
Fade (smooth opacity transition)
Pull (sliding effect with momentum)
Slide (traditional horizontal slide)
Enhanced Settings:
Transition effect selection
Adjustable transition duration
All previous settings maintained
Smooth Animations:
CSS transitions with custom timing
Bezier curves for natural movement
No jerky movements
Improved Performance:
Transition state management
No overlapping animations
Clean JavaScript implementation
Fully Responsive:
Works on all devices
Mobile-specific optimizations
