<aside> 🛠 Implementation Time: 15 Min.
</aside>
I dont want you to lose time, so preview the Slider and decide if you want something like this:
<aside> ➡️ Live Preview: **Preview** Password: slider
</aside>
On the Shopify admin page, navigate to Online Store > Themes and find the Debut theme and click on "Edit Code".
First we want to add the libraries that we need for our Slider.
Copy this lines of code and paste it right before your </head> tag in your theme.liquid file and click save.
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js>" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="<https://pro.fontawesome.com/releases/v5.10.0/css/all.css>" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
We want to comment out those lines of code that we want to replace with our own.
Direct yourself in your product-template.liquid file and search for a line that begins with <div class="grid__item product-single__media-group...
It should be around the lines 30-50.
One line after this you place this Liquid-comment snippet tag: {% comment %}
Now scroll down until the line with the content: <div class="grid__item {{ product_description_width }}"> . Right above the line is a closing </div> tag.
You want to place the closing comment Tag above it: {% endcomment %}
Like this:
Now save the file.
🎉The hardest part is done! Lets get to into Step 3.
Let's structure our Slider.
Right after your {%endcomment%} tag you just added, insert this Code:
<div class="product-image-slider">
<div class="product-image-slider-item">
{% for image in product.images %}
<div class="product-image-slider-items">
<img src="{{ image | img_url: "1200x"}}">
</div>
{% endfor %}
</div>
</div>