How to Add Product Image Slider in Shopify?

Looking to add a Shopify product page image slider? 

In this blog, I will show you how to add product image slider in Shopify step-by-step using a liquid code. 

What is a Slick Slider?

Shopify Slick Slider is often used to improve the user experience by turning product images into scrollable sliders.

Like the image below. 

They not only improve the visual appeal but also help customers quickly browse through product variations or detail shots.

By default, Shopify themes might just stack all product images vertically or show only the main image.

But when you use Slick Slider, the process is more streamlined. 

Shopify Product Image Slider Code Section

Here is the liquid code for adding the Shopify product image slider code

{% comment %}
  Meetanshi Product Image Slider Section
  Developed by Meetanshi (https://meetanshi.com)
  A customizable, responsive slider for Shopify product images using Slick Slider and Font Awesome icons.
  Features: Customizable arrows, dots, autoplay, and image sizes.
{% endcomment %}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Slide product image slider by Meetanshi -->
<div class="product-image-slider">
  {% for image in product.images %}
    <div class="slide">
      <img src="{{ image.src | img_url: section.settings.image_size }}" alt="{{ image.alt | escape }}" class="product-slide-image">
    </div>
  {% endfor %}
</div>

<style>
  /* Meetanshi Product Image Slider Styles */
  .product-image-slider {
    max-width: {{ section.settings.max_width }}px;
    margin: 0 auto;
    position: relative;
  }
  .product-slide-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: {{ section.settings.max_height }}px;
  }
  /* Navigation Arrows */
  .product-image-slider .slick-prev,
  .product-image-slider .slick-next {
    z-index: 100 !important;
    width: 40px;
    height: 40px;
    background: {{ section.settings.arrow_color }} !important;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .product-image-slider .slick-prev:hover,
  .product-image-slider .slick-next:hover {
    opacity: 1;
  }
  .product-image-slider .slick-prev:before,
  .product-image-slider .slick-next:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    font-size: 20px;
    color: #fff !important;
    line-height: 1;
  }
  .product-image-slider .slick-prev:before {
    content: '\f053' !important; /* Font Awesome fa-chevron-left */
  }
  .product-image-slider .slick-next:before {
    content: '\f054' !important; /* Font Awesome fa-chevron-right */
  }
  .product-image-slider .slick-prev {
    left: -50px !important;
  }
  .product-image-slider .slick-next {
    right: -50px !important;
  }
  /* Pagination Dots */
  .product-image-slider .slick-dots {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    z-index: 100;
    padding: 0;
    margin: 0;
  }
  .product-image-slider .slick-dots li {
    display: inline-block;
    margin: 0 5px;
  }
  .product-image-slider .slick-dots li button:before {
    font-size: {{ section.settings.dot_size }}px !important;
    color: {{ section.settings.dot_color }} !important;
    opacity: 0.5;
    content: '•';
    line-height: 1;
  }
  .product-image-slider .slick-dots li.slick-active button:before,
  .product-image-slider .slick-dots li button:hover:before {
    color: {{ section.settings.dot_color }} !important;
    opacity: 1;
  }
  /* Mobile Adjustments */
  @media (max-width: 768px) {
    .product-image-slider .slick-prev {
      left: 10px !important;
    }
    .product-image-slider .slick-next {
      right: 10px !important;
    }
  }
</style>

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
  // Meetanshi Product Image Slider Initialization
  $(document).ready(function(){
    $('.product-image-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: {{ section.settings.show_arrows | json }},
      dots: {{ section.settings.show_dots | json }},
      infinite: {{ section.settings.loop | json }},
      autoplay: {{ section.settings.autoplay | json }},
      autoplaySpeed: {{ section.settings.autoplay_speed }},
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: {{ section.settings.show_arrows_mobile | json }},
            dots: {{ section.settings.show_dots | json }}
          }
        }
      ]
    });
  });
</script>

{% schema %}
{
  "name": "MIT Product Images Slider",
  "settings": [
    {
      "type": "select",
      "id": "image_size",
      "label": "Image Size",
      "options": [
        { "value": "512x512", "label": "Small (512x512)" },
        { "value": "1024x1024", "label": "Medium (1024x1024)" },
        { "value": "1500x1500", "label": "Large (1500x1500)" }
      ],
      "default": "1024x1024",
      "info": "Choose the resolution for product images. Smaller sizes improve performance."
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Slider Maximum Width (px)",
      "min": 300,
      "max": 1200,
      "step": 10,
      "default": 800,
      "info": "Set the maximum width of the slider."
    },
    {
      "type": "range",
      "id": "max_height",
      "label": "Image Maximum Height (px)",
      "min": 200,
      "max": 800,
      "step": 10,
      "default": 500,
      "info": "Set the maximum height of product images."
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show Navigation Arrows",
      "default": true,
      "info": "Display navigation arrows on desktop."
    },
    {
      "type": "checkbox",
      "id": "show_arrows_mobile",
      "label": "Show Arrows on Mobile",
      "default": true,
      "info": "Display navigation arrows on mobile devices."
    },
    {
      "type": "checkbox",
      "id": "show_dots",
      "label": "Show Pagination Dots",
      "default": true,
      "info": "Display pagination dots below the slider."
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "Enable Infinite Loop",
      "default": true,
      "info": "Allow the slider to loop continuously."
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable Autoplay",
      "default": true,
      "info": "Automatically cycle through images."
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "label": "Autoplay Speed (milliseconds)",
      "min": 1000,
      "max": 9500,
      "step": 500,
      "default": 3000,
      "info": "Time between slides when autoplay is enabled."
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow Background Color",
      "default": "#000000",
      "info": "Set the background color for navigation arrows."
    },
    {
      "type": "color",
      "id": "dot_color",
      "label": "Dot Color",
      "default": "#333333",
      "info": "Set the color for pagination dots."
    },
    {
      "type": "range",
      "id": "dot_size",
      "label": "Dot Size (px)",
      "min": 8,
      "max": 20,
      "step": 1,
      "default": 12,
      "info": "Set the size of pagination dots."
    }
  ],
  "presets": [
    {
      "name": "Meetanshi Product Image Slider",
      "category": "Meetanshi"
    }
  ]
}
{% endschema %}

How to Use Shopify Product Page Images Slider?

Follow these 3 simple steps to add a Shopify product image slider. 

Step 1: Create a New Section 

From your Shopify admin panel head Online Store > Themes. Then click on the three dot > Edit code on your current theme. 

Step 2: Create liquid File 

Now, create a new section, in the Sections folder. click Add a new section, and give it a name like product-slider.liquid.

Then, add the provided image slider code in this section and Save it.

Step 3: Edit the Product Image Slider 

Now, navigate to Online Store > Customize Theme > Product Page template from the top dropdown.

Click Add Section, select Meetanshi Product Image Slider, and position it as needed on the product page.

Customize the Slider Settings like image size, transition speed, arrows, or dots based on what your theme or code supports.

Save the changes — and you’re done. Now click, preview to see the product images slider in Shopify frontend.

Frequently Asked Questions

Why is Slick Slider Not Working in Shopify?

Slick Slider may not work if jQuery or the Slick files aren’t properly loaded, if the slider is initialized before the page finishes loading, or if the selector is incorrect.

Does this Slider Code work with Dawn Theme?

Yes, this product image slider code works with the Dawn theme.

How to Change Product Images Slider Speed?

Open the templates folder > product.liquid file. Find the parameter that controls the slider’s animation speed (e.g., transitionDuration or slideshowSpeed) and adjust its value.

How to Change Slider Background Color?

To change the background color of a slider section in Shopify, you’ll typically need to edit the theme’s CSS files

Get Help From Shopify Experts

Image sliders enhance the user experience by allowing customers to easily browse through multiple product views, helping them better understand the look, features, and quality of the product. Shopify offers a wide range of product slider apps, each with its own unique features designed to enhance the customer shopping experience and increase your sales.

If you’re still facing issues with sliders, don’t hesitate to reach out to our Meetanshi Shopify Experts. They can help you fine-tune design, speed, and functionality to make your store stand out and perform seamlessly.