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:

Start Here

Key Takeaways
1
Customize the theme’s `settings_schema.json` to add the Slick Slider code.
2
Use judgment to place the code where it fits best within the theme’s JSON structure.
3
Customization options allow sliders to match brand aesthetics, improving the overall store design.

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 extracted 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 and 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 () you should place the following code:

{% if template == 'index' %}
{% if settings.home_vendor_carousel_enable %} 

{{ 'slick.min.js' | asset_url | script_tag }}
 
{% 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 %}

{{ 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] %}
 
 {% endif %}
 {% endfor %}
 


 
 

{% 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.