Spy on Your Competitors - Extended Free Trial!  GO!
How To Add Slick Slider In Shopify

How To Add Slick Slider In Shopify

Last modified: October 10, 2021

FAQ
Shopify Trial

2021/4 edit: 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 we 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.

Show More

* This button will show the rest of the post and open up an offer from Shopify

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.

Final Word: How To Add Slick Slider In Shopify

Adding a Slick Slider in Shopify is becoming popular. 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.

Recap:
29 thoughts on “How To Add Slick Slider In Shopify”
  1. Xena says:

    I need help figuring out step 11.

    1. avi says:

      We will look into this and post an update ASAP.

  2. banana says:

    Same problem with step 11

    1. avi says:

      We will look into this and post an update ASAP.

  3. banana says:

    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.

    1. avi says:

      Assuming you meant step 5. No. They need to be the exact same names.

  4. banana says:

    Awesome. Appreciate it Avi

  5. Team says:

    Can you tell me what your specific issue with step 11 is?
    What didn’t work?

  6. Dounia says:

    Can I use the slider for the product images on my product page?

    1. Team says:

      Sure. You just need to add products to the slider.

  7. Jem says:

    My Problem here is where to put the code in the Step 11?

    1. Team says:

      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.

  8. Elsa says:

    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.

    1. Team says:

      We don’t have specific instructions per template. We could recommend a Shopify dev service if you are interested in that…

  9. Sharath says:

    Assuming i did everything right, the images are coming as a list rather than a carousel. Please tell me what might be wrong.

  10. sharath says:

    Hey, My images are coming below one another like a list rather than a carousel. What might be wrong?

    1. Team says:

      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)

  11. Valery says:

    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?

  12. Heather says:

    Followed the steps and the information is showing in the settings but I am unable to place the section anywhere on the homepage. Thoughts?

  13. Heather says:

    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?

  14. Haether says:

    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.

  15. Mike says:

    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…

  16. Nazih Awada says:

    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 ?

    1. Team says:

      Your file might look a bit different, you will need to update while considering what your file currently looks like.

  17. jonah says:

    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.

  18. nicko says:

    I don’t understand step 9, any examples where should i paste it ?

    1. Team says:

      In the position you want the slider to be on the page.

  19. Marine says:

    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.

  20. Ben G says:

    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.

Got Something To Say?

Your email address will not be published. Required fields are marked *

Free Trial