loading...
loading...
Get Started
Home / Blog

How To Show Different Banner Images On Mobile & Desktop In Shopify

Shopify Liquid
  1. 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.
  2. It allows separate desktop/mobile images, customizable buttons with links, and three transition effects to showcase content beautifully across devices.
  3. 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">
        &larr;
      </button>
      <button class="banner-slider__arrow banner-slider__arrow--next" aria-label="Next slide">
        &rarr;
      </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:

  1. Multiple Transition Effects:

    • Fade (smooth opacity transition)

    • Pull (sliding effect with momentum)

    • Slide (traditional horizontal slide)

  2. Enhanced Settings:

    • Transition effect selection

    • Adjustable transition duration

    • All previous settings maintained

  3. Smooth Animations:

    • CSS transitions with custom timing

    • Bezier curves for natural movement

    • No jerky movements

  4. Improved Performance:

    • Transition state management

    • No overlapping animations

    • Clean JavaScript implementation

  5. Fully Responsive:

    • Works on all devices

    • Mobile-specific optimizations

Shahrukh Miya
Latest posts by Shahrukh Miya (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *