loading...
loading...
Home / Blog

How to Create a 3-Column Slider Section with Auto-Slide in Shopify

Shopify Liquid
slider Auto slide

Here’s a complete solution for a responsive 3-column slider section where each column has its own independent auto-sliding carousel. This includes full schema settings for easy customization in the Shopify theme editor.

Step 1: Create the Section File

Create a new file called triple-column-slider.liquid in your theme’s sections directory and add this code:

				
					{%- style -%}
  .triple-column-slider {
    padding: {{ section.settings.section_padding }}px 0;
    background-color: {{ section.settings.background_color }};
  }
  
  .triple-column-slider__heading {
    text-align: center;
    margin-bottom: 30px;
    color: {{ section.settings.heading_color }};
  }
  
  .triple-column-slider__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .column-slider {
    width: calc(33.33% - 20px);
    position: relative;
    margin-bottom: 30px;
  }
  
  .column-slider__slides {
    position: relative;
    overflow: hidden;
    border-radius: {{ section.settings.slide_border_radius }}px;
    height: 400px; /* Fixed height for smooth transitions */
  }
  
  .column-slider__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateX(100%);
  }
  
  .column-slider__slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 1;
  }
  
  .column-slider__slide.prev {
    transform: translateX(-100%);
  }
  
  .column-slider__slide.next {
    transform: translateX(100%);
  }
  
  .column-slider__image-container {
    height: 100%;
    width: 100%;
    position: relative;
  }
  
  .column-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .column-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    transition: all 0.3s ease;
  }
  
  .column-slider__title {
    margin: 0 0 10px;
    color: {{ section.settings.text_color }};
    transition: transform 0.3s ease;
  }
  
  .column-slider__description {
    margin: 0 0 15px;
    color: {{ section.settings.text_color }};
    transition: transform 0.3s ease;
  }
  
  .column-slider__button {
    display: inline-block;
    padding: 8px 20px;
    background: {{ section.settings.button_color }};
    color: {{ section.settings.button_text_color }};
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .column-slider__button:hover {
    background: {{ section.settings.button_hover_color }};
    transform: translateY(-2px);
  }
  
  .column-slider__dots {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  
  .column-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .column-slider__dot.active {
    background: {{ section.settings.button_color }};
  }
  
  @media (max-width: 768px) {
    .column-slider {
      width: 100%;
    }
    
    .column-slider__slides {
      height: 350px; /* Adjusted height for mobile */
    }
    
    .triple-column-slider {
      padding: {{ section.settings.mobile_section_padding }}px 0;
    }
  }
{%- endstyle -%}

<div class="triple-column-slider">
  {%- if section.settings.heading != blank -%}
    <h2 class="triple-column-slider__heading">{{ section.settings.heading }}</h2>
  {%- endif -%}
  
  <div class="triple-column-slider__container">
    {%- for block in section.blocks -%}
      {%- if block.type == 'column' -%}
        <div class="column-slider" data-slider-id="{{ forloop.index }}" data-autoplay="{{ section.settings.auto_slide }}" data-autoplay-speed="{{ section.settings.slide_duration }}">
          <div class="column-slider__slides">
            {%- for i in (1..3) -%}
              {%- assign image_key = 'image_' | append: i -%}
              {%- assign title_key = 'title_' | append: i -%}
              {%- assign description_key = 'description_' | append: i -%}
              {%- assign button_text_key = 'button_text_' | append: i -%}
              {%- assign button_link_key = 'button_link_' | append: i -%}
              
              {%- if block.settings[image_key] != blank -%}
                <div class="column-slider__slide {% if forloop.first %}active{% endif %}" data-slide-index="{{ forloop.index0 }}">
                  <div class="column-slider__image-container">
                    <img decoding="async" class="column-slider__image" src="{{ block.settings[image_key] | img_url: '800x' }}" alt="{{ block.settings[title_key] | escape }}" loading="lazy">
                    
                    <div class="column-slider__content">
                      {%- if block.settings[title_key] != blank -%}
                        <h3 class="column-slider__title">{{ block.settings[title_key] }}</h3>
                      {%- endif -%}
                      
                      {%- if block.settings[description_key] != blank -%}
                        <p class="column-slider__description">{{ block.settings[description_key] }}</p>
                      {%- endif -%}
                      
                      {%- if block.settings[button_text_key] != blank -%}
                        <a href="{{ block.settings[button_link_key] }}" class="column-slider__button">
                          {{ block.settings[button_text_key] }}
                        </a>
                      {%- endif -%}
                    </div>
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>
          
          <div class="column-slider__dots">
            {%- for i in (1..3) -%}
              {%- assign image_key = 'image_' | append: i -%}
              {%- if block.settings[image_key] != blank -%}
                <div class="column-slider__dot {% if forloop.first %}active{% endif %}" data-slide-index="{{ forloop.index0 }}"></div>
              {%- endif -%}
            {%- endfor -%}
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sliders = document.querySelectorAll('.column-slider');
  
  sliders.forEach(slider => {
    const slides = slider.querySelectorAll('.column-slider__slide');
    const dots = slider.querySelectorAll('.column-slider__dot');
    const autoSlide = slider.dataset.autoplay === 'true';
    const slideDuration = parseInt(slider.dataset.autoplaySpeed) * 1000;
    let slideIndex = 0;
    let slideInterval;
    
    function showSlide(index) {
      // Update classes for smooth transition
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.classList.add('active');
          slide.classList.remove('prev', 'next');
        } else {
          slide.classList.remove('active');
          if (i < index) {
            slide.classList.add('prev');
            slide.classList.remove('next');
          } else {
            slide.classList.add('next');
            slide.classList.remove('prev');
          }
        }
      });
      
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
      
      slideIndex = index;
    }
    
    function nextSlide() {
      const newIndex = (slideIndex + 1) % slides.length;
      showSlide(newIndex);
    }
    
    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        showSlide(index);
        
        if (autoSlide) {
          clearInterval(slideInterval);
          startAutoSlide();
        }
      });
    });
    
    function startAutoSlide() {
      if (autoSlide && slides.length > 1) {
        slideInterval = setInterval(nextSlide, slideDuration);
      }
    }
    
    // Initialize first slide
    if (slides.length > 0) {
      showSlide(0);
    }
    
    startAutoSlide();
    
    // Pause on hover
    if (autoSlide) {
      slider.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
      });
      
      slider.addEventListener('mouseleave', () => {
        startAutoSlide();
      });
    }
  });
});
</script>

{% schema %}
{
  "name": "Triple Column Slider",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Featured Collections"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#ff5500"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#e04b00"
    },
    {
      "type": "range",
      "id": "slide_border_radius",
      "label": "Slide Border Radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "section_padding",
      "label": "Section Padding (Desktop)",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 50
    },
    {
      "type": "range",
      "id": "mobile_section_padding",
      "label": "Section Padding (Mobile)",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px",
      "default": 30
    },
    {
      "type": "checkbox",
      "id": "auto_slide",
      "label": "Enable Auto Slide",
      "default": true
    },
    {
      "type": "range",
      "id": "slide_duration",
      "label": "Slide Duration (seconds)",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "limit": 3,
      "settings": [
        {
          "type": "header",
          "content": "Slide 1"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_1",
          "label": "Title",
          "default": "Slide 1 Title"
        },
        {
          "type": "textarea",
          "id": "description_1",
          "label": "Description",
          "default": "Slide 1 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_1",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "Button Link"
        },
        {
          "type": "header",
          "content": "Slide 2"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_2",
          "label": "Title",
          "default": "Slide 2 Title"
        },
        {
          "type": "textarea",
          "id": "description_2",
          "label": "Description",
          "default": "Slide 2 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_2",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "Button Link"
        },
        {
          "type": "header",
          "content": "Slide 3"
        },
        {
          "type": "image_picker",
          "id": "image_3",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_3",
          "label": "Title",
          "default": "Slide 3 Title"
        },
        {
          "type": "textarea",
          "id": "description_3",
          "label": "Description",
          "default": "Slide 3 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_3",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_3",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Triple Column Slider",
      "category": "Custom"
    }
  ]
}
{% endschema %}

Step 2: Add the Section to Your Theme

  1. Go to your Shopify admin

  2. Navigate to Online Store > Themes

  3. Click “Edit code” on your current theme

  4. Create a new file in the sections folder called triple-column-slider.liquid

  5. Paste the code above and save

Step 3: Add the Section to a Template

  1. Go to the theme editor

  2. Add a new section and select “Triple Column Slider”

  3. Configure the settings and add your content

Key Features:

  1. Three Independent Sliders – Each column has its own auto-sliding carousel

  2. Fully Responsive – Stacks to single column on mobile

  3. Customizable Settings:

    • Colors for text, buttons, background

    • Slide duration control

    • Auto-slide toggle

    • Padding controls

  4. Rich Content Options:

    • Image, title, description and button for each slide

    • Up to 3 slides per column

  5. Visual Indicators – Dots navigation for each slider

  6. Pause on Hover – Auto-slide pauses when user hovers

Customization Tips:

  1. To change the number of slides per column, modify the {% for i in (1..3) %} loops and add corresponding schema settings

  2. To change the slide transition effect, modify the CSS transitions

  3. To add more columns, increase the block limit in the schema

Leave a Reply

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