product-slider's Introduction

product-slider

Quick and easy product slider, designed to be used as a section with Shopify themes.

This slider utilizes the 'Slick' Javascript library, so you will need to add a few snippets of code to your theme.liquid file before getting started.

First, add the following code before the closing <head> tag:

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>

Next, add the following code before the closing <body> tag:

  <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>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

Also, make sure to add the slick.js and slick.min.js files as assets.

Once that is done, you're ready to build your slider!

In this particular scenario, my client was using a modified version of the 'Debut' theme and wanted a customizable section that she could manage herself without any hard coding required. See the collection-slider.liquid and slider-styling.css files to see how I created and styled the slider to work as a section within the existing theme.

Recommend Projects