Or go to our Shopify Theme Detector directly
How To Add Slick Slider In Shopify : Step by Step Guide
Last modified: August 21, 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 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 <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.
-
What is Shopify Starter?
Shopify Starter is a low-cost plan designed for sellers who want to sell products through social media platforms, messaging apps, or a simple online store. It’s ideal for those just starting out with minimal requirements.
-
What is the Basic Shopify plan?
The Basic Shopify plan is a more comprehensive e-commerce solution that includes a full online store, the ability to sell on multiple channels, and access to more advanced features like discount codes, reports, and a wider range of payment options.
-
How much does Shopify Starter cost compared to Basic Shopify?
Shopify Starter costs $5 per month, while Basic Shopify costs $39 per month. The Starter plan is significantly cheaper but comes with fewer features.
-
Can I build a full online store with Shopify Starter? Answer:
No, Shopify Starter is designed for selling via social media and simple product links. It doesn’t include a full online store with a dedicated website, unlike the Basic Shopify plan.
-
Who is Shopify Starter best suited for?
Shopify Starter is best suited for small sellers who primarily want to sell through social media, existing websites, or messaging apps and don’t need a full-fledged online store.
-
Who is Basic Shopify best suited for?
Basic Shopify is ideal for small sellers who want to build a full online store, with a custom domain, multiple sales channels, and the ability to grow their business with more advanced tools.
-
What sales channels are available with Shopify Starter?
Shopify Starter supports sales through social media platforms like Facebook and Instagram, as well as direct product links you can share through messaging apps or embed on existing websites.
-
What sales channels are available with Basic Shopify?
Basic Shopify supports selling through a full online store, social media platforms, online marketplaces like Amazon and eBay, and in-person sales with Shopify POS.
-
Can I use Shopify POS with Shopify Starter?
No, Shopify POS is not available with the Starter plan. If you need POS functionality for in-person sales, you’ll need to upgrade to Basic Shopify or a higher plan.
-
Does Shopify Starter include a shopping cart?
No, Shopify Starter does not include a full-featured shopping cart. Customers can purchase individual products through shared links, but the cart functionality is limited compared to Basic Shopify.
-
Does the Basic Shopify plan include a custom domain?
Yes, with Basic Shopify, you can connect a custom domain to your online store, giving it a professional web presence. You can either buy a domain through Shopify or connect an existing one.
-
What payment options are available with Shopify Starter?
Shopify Starter allows you to accept payments through Shopify Payments, as well as PayPal and other external payment gateways. However, customization options are limited.
-
What payment options are available with Basic Shopify?
Basic Shopify offers a wider range of payment options, including Shopify Payments, PayPal, and other third-party gateways. It also supports multiple currencies and country-specific payment methods.
-
Does Shopify Starter support discount codes?
No, Shopify Starter does not support discount codes. This feature is available in the Basic Shopify plan and higher plans.
-
Does the Basic Shopify plan include shipping features?
Yes, Basic Shopify includes more robust shipping features, including the ability to set up shipping rates, print shipping labels, and integrate with third-party shipping apps.
-
Can I upgrade from Shopify Starter to Basic Shopify easily?
Yes, upgrading from Shopify Starter to Basic Shopify is simple and can be done directly from your Shopify dashboard. All your existing data will be retained, and you’ll gain access to additional features.
-
Does Shopify Starter have access to Shopify’s app store?
Shopify Starter has limited access to the Shopify app store. Some apps might be restricted or not fully functional compared to the Basic Shopify plan, which has full app store access.