Image carousel for Shopify product images
There are a lot of out of the box apps for sliders on the Shopify App market but I wasn’t able to get one that just took the product images and wrapped them in a simple slider. This implementation uses the Slick image carousel created by @kenwheeler into a Shopify store.
Reference the Slick css and js files in your theme.liquid file.
<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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Create new file called product-image-slider.liquid
In your Shopify theme, create a new snippet called product-image-slider.liquid
Reference the new product-image-slider.liquid from your product template
From your product page template(product-template.liquid) remove the contents from <section class="primary-images"> and paste the include statement to the product-image-slider.liquid file.
<section class="primary-images">
{% include 'product-image-slider' %}
</section>
*Not all Shopify themes are the same so yours might not have a product-template.liquid file in the sections folder. If that’s the case look around for your product page template and insert this new code into that template file.