coding for carousel image

[GizmoGadgets]

Hello there,

i would like to change my product pages images into the carousel images (like the aliexpress) so it will be more organized instead of spreading all the images on the product page.

can someone provide the codes so i can add into the Feather theme? I would like to use the codes so the images i already uploaded do not need to re-select re-upload them, so whenever i need add a product image it will automatically become carousel. Thanks a lot for your help in advance. 

my site: www.gizmogadgets.biz 

Gizmo Gadgets

[TheUntechnickle]

Hey @GizmoGadgets!

I've got exactly what you need to transform your Dawn theme product images into a beautiful carousel like AliExpress. The best part? Your existing images will automatically work - no re-uploading needed!

Here's the complete solution:

Method 1: Simple Flickity-Based Carousel (Recommended)

This approach uses the popular Flickity library and is the easiest to implement:

Step 1: Add Flickity CSS & JS to your theme

Go to Online Store > Themes > Actions > Edit Code > Layout > theme.liquid

Find </head> and paste this code just above it:

<!-- Flickity CSS & JS for Product Image Carousel -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Step 2: Modify your product template

Go to Sections > main-product.liquid

Find the existing product media gallery code (usually around line 20-50) and replace it with this carousel code:

{% comment %} Product Image Carousel {% endcomment %}
{% if product.media.size > 0 %}
  <div class="product-carousel-wrapper">
    <!-- Main carousel -->
    <div class="carousel product__image-slider" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
      {%- for media in product.media -%}
        <div class="carousel-cell">
          {% if media.media_type == "video" %}
            {{ media | media_tag: image_size: "720x", autoplay: true, loop: loop, controls: true, preload: "none", height: "100%", width: "100%" }}
          {% else %}
            <img 
              data-flickity-lazyload-srcset="
                {{ media | image_url: width: 1440 }} 1440w,
                {{ media | image_url: width: 1080 }} 1080w,
                {{ media | image_url: width: 720 }} 720w,
                {{ media | image_url: width: 480 }} 480w"
              sizes="(min-width: 480px) 1440px, 1080px, 720px, 480px"
              data-flickity-lazyload-src="{{ media | image_url: width: 1200 }}"
              alt="{{ media.alt | escape }}"
              data-media-id="{{ media.id }}"
              style="width: 100%; height: auto;"
            />
          {% endif %}
        </div>
      {%- endfor -%}
    </div>

    <!-- Thumbnail navigation (if more than 1 image) -->
    {% if product.media.size > 1 %}
      <div class="carousel product__image-thumbnail">
        {%- for media in product.media -%}
          <div class="carousel-cell-thumb">
            {% if media.media_type == "video" %}
              {{ media | image_url: width: 150 | image_tag: alt: media.alt }}
            {% else %}
              {{ media | image_url: width: 150 | image_tag: alt: media.alt }}
            {% endif %}
          </div>
        {%- endfor -%}
      </div>
    {% endif %}
  </div>
{% endif %}

Step 3: Add the JavaScript

In the same main-product.liquid file, find {% schema %} and paste this code just above it:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize main carousel
  var elem = document.querySelector('.carousel.product__image-slider');
  if (elem) {
    var flkty = new Flickity(elem, {
      contain: true,
      imagesLoaded: true,
      lazyLoad: 1,
      wrapAround: true,
      pageDots: false,
      {% if product.media.size < 2 %}
      prevNextButtons: false,
      {% endif %}
      adaptiveHeight: true,
      cellAlign: 'center'
    });

    // Initialize thumbnail carousel
    var elemThumbnail = document.querySelector('.carousel.product__image-thumbnail');
    if (elemThumbnail) {
      var flktyB = new Flickity(elemThumbnail, {
        asNavFor: '.carousel.product__image-slider',
        contain: true,
        imagesLoaded: true,
        lazyLoad: 4,
        pageDots: false,
        prevNextButtons: false,
        cellAlign: 'left',
        groupCells: true
      });
    }

    // Handle variant changes
    if (typeof VariantSelects !== 'undefined') {
      // Update carousel when variant changes
      document.addEventListener('variant:change', function(event) {
        if (event.detail && event.detail.variant && event.detail.variant.featured_media) {
          var mediaId = event.detail.variant.featured_media.id;
          var slides = elem.querySelectorAll('.carousel-cell img');
          
          slides.forEach(function(slide, index) {
            if (slide.getAttribute('data-media-id') == mediaId) {
              flkty.select(index);
            }
          });
        }
      });
    }
  }
});
</script>

Step 4: Add CSS Styling

Go to Assets > base.css (or your main CSS file) and add this at the bottom:

/* Product Image Carousel Styles */
.product-carousel-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.carousel.product__image-slider {
  margin-bottom: 20px;
}

.carousel.product__image-slider .carousel-cell {
  width: 100%;
  margin-right: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel.product__image-slider .carousel-cell img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.carousel.product__image-thumbnail {
  max-width: 100%;
}

.carousel.product__image-thumbnail .carousel-cell-thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.carousel.product__image-thumbnail .carousel-cell-thumb:hover {
  border-color: rgba(var(--color-foreground), 0.3);
}

.carousel.product__image-thumbnail .carousel-cell-thumb.is-nav-selected {
  border-color: rgba(var(--color-foreground), 0.8);
}

.carousel.product__image-thumbnail .carousel-cell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flickity button styling */
.flickity-button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

.flickity-button:hover {
  background: rgba(255, 255, 255, 1);
}

.flickity-button-icon {
  fill: #333;
}

.flickity-button:disabled {
  display: none;
}

/* Mobile responsiveness */
@media screen and (max-width: 749px) {
  .carousel.product__image-thumbnail .carousel-cell-thumb {
    width: 60px;
    height: 60px;
  }
  
  .flickity-button {
    width: 36px;
    height: 36px;
  }
}

/* Focus styles for accessibility */
.carousel:focus-visible {
  outline: 2px solid rgba(var(--color-foreground), 0.5);
  outline-offset: 2px;
}

This solution transforms your product pages to look more like AliExpress with smooth image carousels, and all your existing product images will automatically work without any re-uploading!

---

Cheers!
Shubham | Untechnickle
If you want, we can implement this for you for free! Just let me know and I can walk you through each step or even help implement it directly.

[GizmoGadgets]

Dear Shubham,

Thanks for your feedback! But i am using Feather Theme, will above work? both for desktop and mobile? Thanks a lot!

Gizmo Gadgets

[TheUntechnickle · Accepted solution]

You're absolutely right to ask - the previous solution was specifically for Dawn theme. Feather theme has a different structure, so here's a customized solution that will work perfectly with your Feather theme on both desktop and mobile!

This approach uses the reliable Slick Carousel library which works with most Shopify themes and is specifically designed to take product images and wrap them in a simple slider.

Step 1: Add Slick Carousel Libraries to Your Theme

Go to Online Store > Themes > Actions > Edit Code > Layout > theme.liquid

Find </head> and paste this code just above it:

<!-- Slick Carousel for Product Images -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Step 2: Create the Product Image Slider Snippet

Go to Snippets > Add a new snippet

Name it: product-image-slider and paste this code:

{% comment %} Product Image Carousel for Feather Theme {% endcomment %}
<div class="product-image-carousel-wrapper">
  
  <!-- Main product image slider -->
  <div class="product-main-slider">
    {% for media in product.media %}
      <div class="slide-item">
        {% if media.media_type == 'video' %}
          {{ media | media_tag: image_size: "720x", autoplay: true, loop: loop, controls: true }}
        {% elsif media.media_type == 'external_video' %}
          {{ media | media_tag }}
        {% elsif media.media_type == 'model' %}
          {{ media | media_tag: image_size: "720x" }}
        {% else %}
          <img             src="{{ media | image_url: width: 800 }}"             srcset="{{ media | image_url: width: 400 }} 400w,                    {{ media | image_url: width: 600 }} 600w,                    {{ media | image_url: width: 800 }} 800w,                    {{ media | image_url: width: 1000 }} 1000w"
            sizes="(max-width: 767px) 100vw, 50vw"
            alt="{{ media.alt | escape }}"
            data-media-id="{{ media.id }}"
            class="product-carousel-image"
            loading="lazy"
          />
        {% endif %}
      </div>
    {% endfor %}
  </div>

  <!-- Thumbnail navigation slider (only show if more than 1 image) -->
  {% if product.media.size > 1 %}
    <div class="product-thumbnail-slider">
      {% for media in product.media %}
        <div class="thumbnail-item">
          {% if media.media_type == 'video' %}
            <img src="{{ media.preview_image | image_url: width: 100 }}" alt="{{ media.alt | escape }}" class="thumbnail-image">
            <div class="play-icon">▶</div>
          {% else %}
            <img               src="{{ media | image_url: width: 100 }}"               alt="{{ media.alt | escape }}"
              class="thumbnail-image"
              data-media-id="{{ media.id }}"
            />
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize main product slider
  $('.product-main-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    asNavFor: '.product-thumbnail-slider',
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: true,
          dots: true
        }
      }
    ]
  });

  // Initialize thumbnail slider (only if more than 1 image)
  if ($('.product-thumbnail-slider .thumbnail-item').length > 1) {
    $('.product-thumbnail-slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      asNavFor: '.product-main-slider',
      dots: false,
      arrows: true,
      centerMode: false,
      focusOnSelect: true,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        }
      ]
    });
  }

  // Handle variant changes (if your theme supports it)
  $(document).on('change', 'input[name="id"], select[name="id"]', function() {
    var variantId = $(this).val();
    // You can add logic here to change to variant-specific images
  });
});
</script>

Step 3: Add CSS Styling

Go to Assets > Add a new asset > Create a blank file

Name it: product-carousel.css and paste this code:

/* Product Image Carousel Styles for Feather Theme */
.product-image-carousel-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Main slider styles */
.product-main-slider {
  margin-bottom: 15px;
}

.product-main-slider .slide-item {
  outline: none;
  text-align: center;
}

.product-main-slider .slide-item img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 8px;
}

/* Thumbnail slider styles */
.product-thumbnail-slider {
  margin-top: 15px;
}

.product-thumbnail-slider .thumbnail-item {
  padding: 0 5px;
  cursor: pointer;
  outline: none;
  position: relative;
}

.product-thumbnail-slider .thumbnail-image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.product-thumbnail-slider .thumbnail-item:hover .thumbnail-image {
  border-color: #007acc;
}

.product-thumbnail-slider .slick-current .thumbnail-image {
  border-color: #007acc;
  opacity: 1;
}

/* Play icon for video thumbnails */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Slick carousel arrow customization */
.slick-prev, .slick-next {
  z-index: 1;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: 1px solid #ddd;
}

.slick-prev:hover, .slick-next:hover {
  background: rgba(255, 255, 255, 1);
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

.slick-prev:before, .slick-next:before {
  color: #333;
  font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .product-main-slider .slide-item img {
    max-height: 400px;
  }
  
  .product-thumbnail-slider .thumbnail-image {
    height: 60px;
  }
  
  .slick-prev, .slick-next {
    width: 36px;
    height: 36px;
  }
  
  .slick-prev:before, .slick-next:before {
    font-size: 14px;
  }
  
  /* Show dots on mobile for easier navigation */
  .slick-dots {
    bottom: -45px;
  }
  
  .slick-dots li button:before {
    font-size: 12px;
    color: #007acc;
  }
}

/* Hide default theme image gallery if it exists */
.product-single__photos,
.product__photos,
.product-images,
.product-gallery {
  display: none !important;
}

Step 4: Include the CSS in your theme

Go back to Layout > theme.liquid

Find </head> and add this line just above it:

{{ 'product-carousel.css' | asset_url | stylesheet_tag }}

Step 5: Replace Your Product Template

This is the tricky part - you need to find your product template. In Feather theme, it's likely:

• Templates > product.liquid OR
• Sections > product-template.liquid OR
• Sections > product.liquid

Look for the existing product images section (it might have classes like .product-single__photos, .product__photos, or similar) and replace it with:

{% comment %} Replace existing product images with carousel {% endcomment %}
<div class="product-photos-carousel">
  {% render 'product-image-slider' %}
</div>

Step 6: Test and Adjust

1. Save all files
2. Visit a product page with multiple images
3. You should see a carousel with thumbnails below
4. Test on mobile - swipe should work perfectly

This should work! Please do all the changes in the copy of live theme and once you've tested them well then you can publish it. If you need any help, feel free to reach out.

Cheers!
Shubham | Untechnickle