How To Add Animated Product Slider In Shopify [Without APP]

Adding a unique animated product slider to your Shopify store can significantly enhance user engagement and improve the overall shopping experience. With smooth animations and dynamic transitions, customers can easily browse through products, making your store more interactive and visually appealing.

Note: Using transparent background images will enhance the design.

Create a new section named Unique-Product-Slider.liquid using the following code:

{% schema %}
{
  "name": "Unique Product Slider",
  "tag": "section",
  "class": "unique-product-slider",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "slider_title",
      "label": "Slider Title",
      "default": "Featured Products"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#232442"
    },
    {
      "type": "color",
      "id": "category_color",
      "label": "Category Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Description Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_bg_color_start",
      "label": "Button Background Start Color",
      "default": "#81baa0"
    },
    {
      "type": "color",
      "id": "button_bg_color_end",
      "label": "Button Background End Color",
      "default": "#46a39c"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "arrow_bg_color",
      "label": "Navigation Arrow Background",
      "default": "#232442"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Navigation Arrow Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "dot_active_color",
      "label": "Active Dot Color",
      "default": "#ffff00"
    },
    {
      "type": "color",
      "id": "dot_inactive_color",
      "label": "Inactive Dot Color",
      "default": "#659cdf"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "slide_image",
          "label": "Slide Image"
        },
        {
          "type": "text",
          "id": "category",
          "label": "Category",
          "default": "Sport Shoes"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "NIKE D.01"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "default": "Lorem ipsum dolor sit amet consectetur adipisicing elit."
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text",
          "default": "View Product"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Unique Product Slider",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}

<style>
/* Removed Google Fonts imports */
.unique-product-slider {
  --w-column: 200px;
  margin: 0;
  background-color: {{ section.settings.background_color }};
  color: #fff;
  font-size: 15px;
  font-family: var(--font-body-family);
}

.unique-product-slider * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unique-product-slider .ups-carousel {
  background-image: radial-gradient({{ section.settings.background_color | color_modify: 'lightness', '10%' }}, {{ section.settings.background_color | color_modify: 'lightness', '-10%' }});
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.unique-product-slider .ups-list {
  width: min(1200px, 90vw);
  margin: auto;
  height: 100%;
  position: relative;
}

.unique-product-slider .ups-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
  pointer-events: none;
}

.unique-product-slider .ups-item.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.unique-product-slider .ups-item .ups-figure {
  position: absolute;
  width: 70%;
  top: 50%;
  transform: translateY(-50%);
}

.unique-product-slider .ups-item .ups-figure img {
  width: 100%;
  transform: rotate(0deg);
  transition: transform 1s ease;
}

.unique-product-slider .ups-item.active .ups-figure img {
  transform: rotate(-20deg);
}

.unique-product-slider .ups-item .ups-figure::before {
  content: '';
  position: absolute;
  background-color: {{ section.settings.background_color | color_modify: 'lightness', '-15%' }};
  width: 100%;
  height: 100px;
  top: 150%;
  left: 50px;
  border-radius: 50%;
  filter: blur(50px);
}

.unique-product-slider .ups-content {
  position: absolute;
  z-index: 20;
  width: 70%;
  height: 100%;
  right: var(--w-column);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: 20px;
}

.unique-product-slider .ups-content .ups-category {
  font-weight: 500;
  color: {{ section.settings.category_color }};
  transform: translateX(200px);
  transition: transform 1.5s ease 0.3s, opacity 1.5s ease 0.3s;
  opacity: 0;
}

.unique-product-slider .ups-content .ups-title {
  font-family: var(--font-heading-family);
  font-size: 120px;
  line-height: 1em;
  color: {{ section.settings.title_color }};
  transform: translateX(200px);
  transition: transform 1.5s ease 0.5s, opacity 1.5s ease 0.5s;
  opacity: 0;
  
}

.unique-product-slider .ups-content .ups-description {
  max-width: 400px;
  font-size: 20px;
  text-align: right;
  color: {{ section.settings.description_color }};
  transform: translateX(200px);
  transition: transform 1.5s ease 0.7s, opacity 1.5s ease 0.7s;
  opacity: 0;
}

.unique-product-slider .ups-content .ups-more {
  display: flex;
  gap: 20px;
  transform: translateX(200px);
  transition: transform 1.5s ease 0.9s, opacity 1.5s ease 0.9s;
  opacity: 0;
}

.unique-product-slider .ups-item.active .ups-content .ups-category,
.unique-product-slider .ups-item.active .ups-content .ups-title,
.unique-product-slider .ups-item.active .ups-content .ups-description,
.unique-product-slider .ups-item.active .ups-content .ups-more {
  transform: translateX(0);
  opacity: 1;
}

.unique-product-slider .ups-more .ups-button {
  padding-top:10px;
  padding-bottom: 10px;
  padding-left:20px;
  padding-right: 20px;
  border-radius: 30px;
  font-family: var(--font-heading-family);
  text-transform: uppercase;
  color: {{ section.settings.button_text_color }};
  background-color: transparent;
  border: none;
  position: relative;
  cursor: pointer;
  font-size: 16px;
}

.unique-product-slider .ups-more .ups-button-primary {
  background-image: linear-gradient(to right, {{ section.settings.button_bg_color_start }}, {{ section.settings.button_bg_color_end }});
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

.unique-product-slider .ups-arrows {
  width: min(1200px, 90vw);
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -25px);
  pointer-events: none;
  z-index: 100;
}

.unique-product-slider .ups-arrows .ups-arrow-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #659cdf55;
  background-color: {{ section.settings.arrow_bg_color }};
  color: {{ section.settings.arrow_color }}77;
  font-size: large;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.5s;
}

.unique-product-slider .ups-arrows .ups-arrow-button:hover {
  border: 1px solid #659cdf;
  color: {{ section.settings.arrow_color }};
}

.unique-product-slider .ups-indicators {
  position: absolute;
  top: 52%;
  height: var(--w-column);
  width: min(1200px, 90vw);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  justify-content: end;
  gap: 10px;
}

.unique-product-slider .ups-number {
  font-family: var(--font-heading-family);
  font-size: 7vw;
}

.unique-product-slider .ups-indicators .ups-dots {
  display: flex;
  gap: 10px;
}

.unique-product-slider .ups-indicators .ups-dots .ups-dot {
  width: 50px;
  height: 5px;
  background-color: {{ section.settings.dot_inactive_color }};
  border-radius: 10px;
  pointer-events: auto;
  cursor: pointer;
  transition: 0.5s;
}

.unique-product-slider .ups-indicators .ups-dots .ups-dot.active {
  background-color: {{ section.settings.dot_active_color }};
}

/* Responsive */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .unique-product-slider {
    --w-column: 100px;
  }
  .unique-product-slider .ups-carousel {
    height: 60vh; /* Reduced height for tablet */
  }
  .unique-product-slider .ups-content .ups-title {
    font-size: 5em;
  }
}

@media screen and (max-width: 767px) {
  .unique-product-slider {
    --w-column: 50px;
  }
  .unique-product-slider .ups-carousel {
    height: 650px; /* Increased height for better spacing */
  }
  
  /* Improved mobile layout structure with clear separation */
  .unique-product-slider .ups-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Product image positioning */
  .unique-product-slider .ups-item .ups-figure {
    width: 80%;
    position: relative;
    top: 60px; /* Positioned at top with sufficient margin */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 30px;
  }
  
  /* Content area positioning - moved below the image */
  .unique-product-slider .ups-content {
    width: 100%;
    height: auto;
    position: absolute;
    top: auto;
    bottom: 140px; /* Position from bottom */
    left: 0;
    right: 0;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  
  .unique-product-slider .ups-content .ups-title {
    font-size: 3em;
    text-align: center;
    width: 100%;
  }
  
  .unique-product-slider .ups-content .ups-category,
  .unique-product-slider .ups-content .ups-description {
    text-align: center;
    width: 90%;
  }
  
  .unique-product-slider .ups-content .ups-description {
    max-width: 100%;
    font-size: 16px;
  }
  
  /* Navigation controls positioning */
  .unique-product-slider .ups-arrows {
    top: auto;
    bottom: 80px;
    width: 90%;
  }
  
  .unique-product-slider .ups-indicators {
    top: auto;
    bottom: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  .unique-product-slider .ups-number {
    font-size: 3em;
    margin-right: 20px;
  }
}
</style>

<div class="ups-carousel">
  <div class="ups-list">
    {% for block in section.blocks %}
      <div class="ups-item {% if forloop.first %}active{% endif %}" {{ block.shopify_attributes }}>
        <figure class="ups-figure">
          {% if block.settings.slide_image %}
            <img src="{{ block.settings.slide_image | img_url: 'master' }}" alt="{{ block.settings.title }}">
          {% else %}
            <img src="https://via.placeholder.com/600x400" alt="Placeholder">
          {% endif %}
        </figure>
        <div class="ups-content">
          <p class="ups-category">{{ block.settings.category }}</p>
          <h2 class="ups-title">{{ block.settings.title }}</h2>
          <p class="ups-description">{{ block.settings.description }}</p>
          <div class="ups-more">
            {% if block.settings.button_text != blank %}
              <a href="{{ block.settings.button_link }}" class="ups-button ups-button-primary">
                {{ block.settings.button_text }}
              </a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="ups-arrows">
    <button id="ups-prev" class="ups-arrow-button"><i class="fa-solid fa-chevron-left"></i></button>
    <button id="ups-next" class="ups-arrow-button"><i class="fa-solid fa-chevron-right"></i></button>
  </div>
  <div class="ups-indicators">
    <div class="ups-number">01</div>
    <ul class="ups-dots">
      {% for block in section.blocks %}
        <li class="ups-dot {% if forloop.first %}active{% endif %}"></li>
      {% endfor %}
    </ul>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  let prevBtn = document.getElementById('ups-prev');
  let nextBtn = document.getElementById('ups-next');
  let carousel = document.querySelector('.unique-product-slider .ups-carousel');
  let items = carousel.querySelectorAll('.ups-list .ups-item');
  let indicator = carousel.querySelector('.ups-indicators');
  let dots = indicator.querySelectorAll('.ups-indicators .ups-dots .ups-dot');
  
  let active = 0;
  let lastPosition = items.length - 1;
  let isAnimating = false;

  function showSlide(index) {
    if (isAnimating) return;
    isAnimating = true;

    let currentActive = items[index];
    let prevActive = carousel.querySelector('.ups-item.active');

    if (prevActive) {
      prevActive.classList.remove('active');
    }

    currentActive.classList.add('active');

    dots.forEach(dot => dot.classList.remove('active'));
    dots[index].classList.add('active');
    indicator.querySelector('.ups-number').innerText = '0' + (index + 1);

    setTimeout(() => {
      isAnimating = false;
    }, 1000);
  }

  if (items.length > 0) {
    items[0].classList.add('active');

    nextBtn.onclick = () => {
      if (!isAnimating) {
        active = active + 1 > lastPosition ? 0 : active + 1;
        showSlide(active);
      }
    };

    prevBtn.onclick = () => {
      if (!isAnimating) {
        active = active - 1 < 0 ? lastPosition : active - 1;
        showSlide(active);
      }
    };

    dots.forEach((dot, position) => {
      dot.onclick = () => {
        if (!isAnimating && position !== active) {
          active = position;
          showSlide(active);
        }
      };
    });
  }
});
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">