Or go to our Shopify Theme Detector directly
How To Add Slick Slider In Shopify : Step by Step Guide
Last modified: April 1, 2024
FYI: Many people have had issues with implementing this, so please take into account that you might have to get your hands dirty here and it might not be a simple copy-paste solution. Not all templates are built the same, what works on one template, may work differently on another. Use this solution with caution.
A slick slider is a fresh jQuery-enabled feature that creates a fully customizable, responsive, and mobile-friendly slider that will work with any HTML element. You can get an app that will enable a slick slider on your Shopify store, but these will cost.
However, you can also add a slick slider to your website yourself using the steps listed below.
First:
- Step 1 – Backup Your Store
- Step 2 – Download Slick Library
- Step 3 – Login
- Step 4 – Edit HTML/CSS
- Step 5 – Assets
- Step 6 – Modify slick-theme.css
- Step 7 – Theme.liquid
- Step 8 – More Code
- Step 9 – Even More Code
- Step 10 – Slick-theme.css
- Step 11 – Final Changes
- Step 12 – Save & Add Images
- Conclusion
- FAQs
| # | Name | Image | |
|---|---|---|---|
| 1 |
|
Image Slider, Product Carousel
|
|
| 2 |
|
Quick View Slider on Hover
|
|
| 3 |
|
Slider Revolution
|
|
| 4 |
|
Collection Slideshow & Slider
|
|
| 5 |
|
Ada IQ: Image Slider Gallery
|
|
| 6 |
|
Enorm Image Slider
|
|
| 7 |
|
Layer Slider
|
|
| 8 |
|
Banner Slider by Secomapp
|
|
| 9 |
|
YouTube + Vimeo Video Slider
|
|
| 10 |
|
Master Slider ‑ Image Slider
|
|
|
Show More
|
|||
Step 1 – Backup Your Store
The first step is to ensure that you’ve backed up your store. You can use one of these apps to help.
Step 2 – Download Slick Library
Next go and download the latest copy of the Slick library.
Once downloaded, extract the files to somewhere on your local drive.
Step 3 – Login
Login to your Shopify store.
Step 4 – Edit HTML/CSS
Now you need to go to your ‘Online Store’, then ‘Themes’ and then ‘Edit HTML/CSS’.
Step 5 – Assets
Find the ‘Assets’ option and click on the option that reads ‘Upload Asset’ and then find your extract files and upload these one at a time.
The files should be labeled as:
- slick.min.js
- slick.css
- slick-theme.css
- fonts/slick.woff
- fonts/slick.ttf
- fonts/slick.svg
- fonts/slick.eot
Step 6 – Modify slick-theme.css
You need to now modify the slick-themes.css and change the font path. To do this remove the ./font/ that will look like
src: url('./fonts/slick.eot');
This will become:
src: url('./slick.eot');
Step 7 – Theme.liquid
Open up your theme.liquid file and in the header section (that is the content between the <head> and </head> tags.) and copy in the following code.
{% if template == 'index' %}
{% if settings.home_vendor_carousel_enable %}
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
{% endif %}
{% endif %}
Step 8 – More Code
Scroll down to the bottom of the page. Before the closing body tag (</body>) you should place the following code:
{% if template == 'index' %}
{% if settings.home_vendor_carousel_enable %}
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
{{ 'slick.min.js' | asset_url | script_tag }}
<script type="text/javascript">
$(document).ready(function() {
$('.autoplay').slick({
dots: false,
infinite: true,
speed: 500,
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
variableWidth: true
});
});
</script>
{% endif %}
{% endif %}
Note that if your theme doesn’t have the jquery and jquery migrate library, then you might need to delete the two lines that refer to this.
Step 9 – Even More Code
Scroll down to where you would like the slider, and then paste in this code.
{% if settings.home_vendor_carousel_enable %}
<center><h2>{{ settings.home_vendor_carousel_title }}</h2></center>
<div class="slider-container">
<div class="slider autoplay slider-custom">
{% for i in (1..12) %}
{% capture vendor %}home_vendor_enable_{{i}}{% endcapture %}
{% capture vendor_name %}home_vendor_name_{{i}}{% endcapture %}
{% capture vendor_logo %}vendor_logo_{{i}}.png{% endcapture %}
{% if settings[vendor] %}
<div>
<a href="{{ settings[vendor_name] }}" title="{{ settings[vendor_name] }}">
{{ vendor_logo | asset_url | img_tag: settings[vendor_name], "replace-2x img-responsive" }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<hr>
{% endif %}
Step 10 – Slick-theme.css
Then you need to enter the slick-theme.css file and then you can make any coding changes that you would like to in regards to the size of the slick slider.
.slider-container {
position: relative;
margin-top: 10px;
left: 0;
height: 100%;
width:100%;
}
.slider-custom {
width: 850px;
margin-left: auto;
margin-right: auto;
display: block;
height: 80px;
}
.slick-slide {
width: 170px;
padding-left: 10px;
padding-right: 10px;
}
Step 11 – Final Changes
Now you need to go back to the ‘Online Store’, ‘Themes’ and then ‘Customize Theme’. Scroll down to the config section and then open up the theme’s copy of ‘settings_schema.json. Then paste the following code in where it makes the most sense, you will have to use your judgment here.
{
"type": "header",
"content": "Vendor Logo Carousel"
},
{
"type": "text",
"id": "home_vendor_carousel_title",
"label": "Vendor Carousel Title"
},
{
"type": "checkbox",
"id": "home_vendor_carousel_enable",
"label": "Enable Vendor Carousel"
},
{
"type": "checkbox",
"id": "home_vendor_enable_1",
"label": "Enable Vendor 1"
},
{
"type": "text",
"id": "home_vendor_name_1",
"label": "Vendor link 1"
},
{
"type": "image",
"id": "vendor_logo_1.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_2",
"label": "Enable Vendor 2"
},
{
"type": "text",
"id": "home_vendor_name_2",
"label": "Vendor link 2"
},
{
"type": "image",
"id": "vendor_logo_2.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_3",
"label": "Enable Vendor 3"
},
{
"type": "text",
"id": "home_vendor_name_3",
"label": "Vendor link 3"
},
{
"type": "image",
"id": "vendor_logo_3.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_4",
"label": "Enable Vendor 4"
},
{
"type": "text",
"id": "home_vendor_name_4",
"label": "Vendor link 4"
},
{
"type": "image",
"id": "vendor_logo_4.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_5",
"label": "Enable Vendor 5"
},
{
"type": "text",
"id": "home_vendor_name_5",
"label": "Vendor link 5"
},
{
"type": "image",
"id": "vendor_logo_5.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_6",
"label": "Enable Vendor 6"
},
{
"type": "text",
"id": "home_vendor_name_6",
"label": "Vendor link 6"
},
{
"type": "image",
"id": "vendor_logo_6.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_7",
"label": "Enable Vendor 7"
},
{
"type": "text",
"id": "home_vendor_name_7",
"label": "Vendor link 7"
},
{
"type": "image",
"id": "vendor_logo_7.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_8",
"label": "Enable Vendor 8"
},
{
"type": "text",
"id": "home_vendor_name_8",
"label": "Vendor link 8"
},
{
"type": "image",
"id": "vendor_logo_8.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_9",
"label": "Enable Vendor 9"
},
{
"type": "text",
"id": "home_vendor_name_9",
"label": "Vendor link 9"
},
{
"type": "image",
"id": "vendor_logo_9.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_10",
"label": "Enable Vendor 10"
},
{
"type": "text",
"id": "home_vendor_name_10",
"label": "Vendor link 10"
},
{
"type": "image",
"id": "vendor_logo_10.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_11",
"label": "Enable Vendor 11"
},
{
"type": "text",
"id": "home_vendor_name_11",
"label": "Vendor link 11"
},
{
"type": "image",
"id": "vendor_logo_11.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
},
{
"type": "checkbox",
"id": "home_vendor_enable_12",
"label": "Enable Vendor 12"
},
{
"type": "text",
"id": "home_vendor_name_12",
"label": "Vendor link 12"
},
{
"type": "image",
"id": "vendor_logo_12.png",
"label": "Icon",
"max-width": 1000,
"max-height": 563
}
Step 12 – Save & Add Images
Now save the file. From here you can go to the ‘Customize Theme’ option and add images to the slider and the title, etc. When you’re finished, remember to save the changes.
Conclusion: How To Add Slick Slider In Shopify
Adding a Slick Slider in Shopify is becoming popular. If you’re comfortable in coding, Shopify advanced customizations offer the flexibility to implement custom solutions. Follow the steps above, or you could install this banner slider option. It is a more expensive option, but for those that don’t like to add code, this is a better option.
As you integrate a Slick Slider into your Shopify store, consider enhancing its functionality and appeal with additional features. You can add a countdown timer to create a sense of urgency and encourage customers to take action, and displaying customer reviews to build trust to your store.
This can be particularly effective when used in combination with a slick slider to showcase limited-time offers or special promotions and building credibility with potential buyers, ultimately increasing engagement and adding revenue for your Shopify store.
-
How do I make the Slick Slider responsive for different screen sizes?
The Slick Slider offers responsive settings, enabling you to customize slider behavior for different screen sizes (desktops, tablets, and mobile devices) by setting breakpoints in the JavaScript code during initialization.
-
Can I add multiple Slick Sliders on the same page in Shopify?
You can place multiple Slick Sliders on one page, but they must have unique IDs to prevent JavaScript conflicts. Customize the settings for each slider based on its individual requirements and position on the page.
-
Is it possible to add videos instead of images to the Slick Slider in Shopify?
Yes, Slick Slider supports video content; however, you will need to modify the slider’s HTML structure to include video elements and ensure that the slider’s settings are configured to handle video playback and controls properly.
PageFly Landing Page Builder 
Shopify 
SEMrush 
Website Maintenance 
UpPromote
I need help figuring out step 11.
We will look into this and post an update ASAP.
Same problem with step 11
We will look into this and post an update ASAP.
Is it ok to in step 3 to add the files without having the same file name? I tried adding the asset and it says I can’t add sub folders to themes.
Assuming you meant step 5. No. They need to be the exact same names.
Awesome. Appreciate it Avi
Can you tell me what your specific issue with step 11 is?
What didn’t work?
Can I use the slider for the product images on my product page?
Sure. You just need to add products to the slider.
My Problem here is where to put the code in the Step 11?
We explain how to get to the settings_schema.json. You will have to use some judgment here since every file can be quite different.
If you still have issues, we can refer you to a great Shopify development service. They can help out with the smallest things like these.
Hi, I am also struggling to find where to paste the code inside settings_shema.json . The theme is brooklyn. Would you have any clue? Thanks a lot.
We don’t have specific instructions per template. We could recommend a Shopify dev service if you are interested in that…
Assuming i did everything right, the images are coming as a list rather than a carousel. Please tell me what might be wrong.
Hey, My images are coming below one another like a list rather than a carousel. What might be wrong?
I would consult with a developer. It sounds like you are either missing something or the link to the slider JS isn’t in the correct place. (Also, check if there are any errors in the console)
Thanks for the detailed steps, i have a small problem, on my slide the items that duplicated by slick (class: slick-cloned ) are bigger than the original. i cant figure out the reason.
what can be the issue in this case?
Followed the steps and the information is showing in the settings but I am unable to place the section anywhere on the homepage. Thoughts?
Followed the steps and the information for the logo bar is showing in the theme settings but I am unable to place the section anywhere on the homepage (like through the customization of homepage section). So basically I can edit my “logo slider” (vendor logo carousel) all I want in the settings, but it can’t direct anywhere on my actual homepage. Thoughts?
Is it possible that the Json code being placed in the settings schema is the issue? There isn’t any liquid sections code allowing an option to place this vendor carousel section anywhere.
Lost a huge time trying to embed this but it’s just a waste of time when you want to help give people a good push, not bread crumbs…
In the beginning of the Json file, didn’t you forget to add the
“name”: “######”,
“settings”: []
Part ??? it is not specified what this code is for, can you please update that ?
Your file might look a bit different, you will need to update while considering what your file currently looks like.
to make edits to the json file, go to the end of the file and add:
{
“name”: “Slick Slider”,
“settings”: [
{
“type”: “header”,
“content”: “Vendor Logo Carousel”
},
… # Rest of the json data provided
]
}
BEFORE the last closing ] at the end of the file.
I don’t understand step 9, any examples where should i paste it ?
In the position you want the slider to be on the page.
For step 11, when I add the code the following message comes up “An error prevented settings_schema.json from being saved.” Why is this happening? It would be helpful if you could provide some suggestions as to where to put the code. An example would help a lot. Thanks.
I am trying to add this slider feature to the Dawn theme. I’ve followed all the steps outlined in the tutorial.
I’m using github to integrate code changes, and this has helped resolve validation errors I was getting from the settings_schema.json file.
Things got a little cloudy for me starting at step 9…
For step 9 I add the code provided to the theme.liquid file as it seemed to imply you should be working in the same file as step 8 ( the instructions say to “scroll down to where you want the slider” ) – Is this the correct file to add the code?
I was having issues with validation in the logs when on step 11, I was able to resolve this by adding the code to the bottom of the settings_schema.json file, and also by adding ”name”: “t:settings_schema.slick_slider.name”,
”settings”: [ paste code from step 11 in here ],
to step 11.
Still, I cannot find the slider anywhere in the settings from the Shopify dashboard. Not sure what I’m doing wrong here, any insight would be great.
I have also tried asking in the Shopify Dev forums and have not recieved any responses.
I am happy to share my code and communicate via email if that helps. Thanks.
How did you figure out the JSON?
Your JSON repeats itself three times… That’s why everyone is having issues. Also, wrap it with this:
{
“name”: “Slider”,
“settings”: [
CODE CODE CODE
]
}
It doesn’t seem like the JSON is repeating itself, if you can point it out that would be beneficial.
Where exactly do you paste Section 9?
In a custom liquid anywhere on a page?
Scroll down to where you would like the slider, and then paste in this code.
{% if settings.home_vendor_carousel_enable %}
{{ settings.home_vendor_carousel_title }}
{% for i in (1..12) %}
{% capture vendor %}home_vendor_enable_{{i}}{% endcapture %}
{% capture vendor_name %}home_vendor_name_{{i}}{% endcapture %}
{% capture vendor_logo %}vendor_logo_{{i}}.png{% endcapture %}
{% if settings[vendor] %}
{{ vendor_logo | asset_url | img_tag: settings[vendor_name], “replace-2x img-responsive” }}
(wrap a link around this)
{% endif %}
{% endfor %}
{% endif %}
Why would you need to do this? I am using a free theme and it provides slideshow as a section. This solution seems hacky