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 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 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
- Save all files
- Visit a product page with multiple images
- You should see a carousel with thumbnails below
- 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