Key Takeaways<\/div>

1<\/div>

Customize the theme\u2019s `settings_schema.json` to add the Slick Slider code.<\/div><\/div>

2<\/div>

Use judgment to place the code where it fits best within the theme\u2019s JSON structure.<\/div><\/div>

3<\/div>

Customization options allow sliders to match brand aesthetics, improving the overall store design.<\/div><\/div><\/div><\/p>\n

Step 1 - Backup Your Store<\/h2>\n
The first step is to ensure that you\u2019ve backed up your store. You can use one of these apps to help.<\/p>\n

Step 2 - Download Slick Library<\/h2>\n
Next go and download the latest copy of the Slick library.<\/p>\n
Once downloaded, extract the files to somewhere on your local drive.<\/p>\n

Step 3 - Login<\/h2>\n
Login to your Shopify store.<\/p>\n

Step 4 - Edit HTML\/CSS<\/h2>\n
Now you need to go to your \u2018Online Store\u2019, then \u2018Themes\u2019 and then \u2018Edit HTML\/CSS\u2019.<\/p>\n

Step 5 - Assets<\/h2>\n

Find the \u2018Assets\u2019 option and click on the option that reads \u2018Upload Asset\u2019 and then find your extracted files and upload these one at a time.<\/p>\n

The files should be labeled as:<\/p>\n

slick.min.js<\/li>\n
slick.css<\/li>\n
slick-theme.css<\/li>\n
fonts\/slick.woff<\/li>\n
fonts\/slick.ttf<\/li>\n
fonts\/slick.svg<\/li>\n

fonts\/slick.eot<\/li>\n<\/ul>\n

Step 6 - Modify slick-theme.css<\/h2>\n

You need to now modify the slick-themes.css and change the font path. To do this remove the .\/font\/ that will look like<\/p>\n

src: url('.\/fonts\/slick.eot');<\/pre>\nThis will become:<\/p>\n
src: url('.\/slick.eot');<\/pre>\nStep 7 - Theme.liquid<\/h2>\nOpen up your theme.liquid file and in the header section (that is the content between the  and <\/head> tags.) and copy in the following code.<\/p>\n
{% if template == 'index' %}\r\n{% if settings.home_vendor_carousel_enable %} \r\n{{ 'slick.css' | asset_url | stylesheet_tag }}\r\n{{ 'slick-theme.css' | asset_url | stylesheet_tag }}\r\n{% endif %}\r\n{% endif %}<\/pre>\nStep 8 - More Code<\/h2>\nScroll down to the bottom of the page. Before the closing body tag (<\/body>) you should place the following code:<\/p>\n
{% if template == 'index' %}\r\n{% if settings.home_vendor_carousel_enable %} \r\n\r\n{{ 'slick.min.js' | asset_url | script_tag }}\r\n

Step 1 - Backup Your Store<\/h2>\nThe first step is to ensure that you\u2019ve backed up your store. You can use one of these apps to help.<\/p>\n

Step 2 - Download Slick Library<\/h2>\nNext go and download the latest copy of the Slick library.<\/p>\nOnce downloaded, extract the files to somewhere on your local drive.<\/p>\n

Step 3 - Login<\/h2>\nLogin to your Shopify store.<\/p>\n

Step 4 - Edit HTML\/CSS<\/h2>\nNow you need to go to your \u2018Online Store\u2019, then \u2018Themes\u2019 and then \u2018Edit HTML\/CSS\u2019.<\/p>\n

Step 1 - Backup Your Store<\/h2>\n
The first step is to ensure that you\u2019ve backed up your store. You can use one of these apps to help.<\/p>\n

Step 2 - Download Slick Library<\/h2>\n
Next go and download the latest copy of the Slick library.<\/p>\n
Once downloaded, extract the files to somewhere on your local drive.<\/p>\n

Step 3 - Login<\/h2>\n
Login to your Shopify store.<\/p>\n

Step 4 - Edit HTML\/CSS<\/h2>\n
Now you need to go to your \u2018Online Store\u2019, then \u2018Themes\u2019 and then \u2018Edit HTML\/CSS\u2019.<\/p>\n