title: Slick slider dots not showing
body: <p>I'm very new to <code>liquid</code> and I've managed to add a product slider to a website that I'm building for a client but instead of the slider dots there are numbers and instead of being horizontal they are vertical.</p>
  
  <p><a href="https://i.stack.imgur.com/gLiAc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gLiAc.png" alt="enter image description here"></a></p>
  
  <p>I have no idea what I'm doing wrong.
  This is what I've done so far, If anyone can see what exactly I'm doing wrong please let me know, I really appreciate your time:</p>
  
  <p><strong>CSS (SASS):</strong></p>
  
  <pre><code>.all-container{
    padding-top: 50px;
    padding-bottom: 50px;
  
    .inner-container{
      padding: 0px 15px;
      width: 100%;
      margin: auto;
  /*     max-width: 1000px; */
      .title-container{
        display: -webkit-flex;
        flex-wrap: wrap;    
        .title_inner{
          padding: 15px;
          max-width: 100%;
          flex-basis: 100%;
          .title_wrapper{
            width: 100%;
            h3{
              text-align: center;
              font-family: Vollkorn;
              font-weight: 600;
              font-size: 35px;
              color: #232c3b;
  
              span{
                font-weight: inherit;
                vertical-align: baseline;
                word-break: break-word;
                display: inline-block;
              }
            }
          }
        }
      }
  
      .item-container{
        justify-content: center;
        align-items: center;
        display: -webkit-flex;
        flex-wrap: wrap;
  
        .item{
          padding: 15px;
          width:320px !important;
  
          .item-inner{
            text-align: center;
            position: relative;
  
            img{
              overflow: hidden;
              display: inline-flex;
              -webkit-box-pack: start;
              justify-content: flex-start;
              align-items: flex-start;
              vertical-align: middle;
              max-width: 100%;
            }
  
            .itm-title{
              text-align: center;
              font-family: Volkron;          
              font-size: 24px;
              font-weight: 600;
              padding-top: 15px ;
              span{
                font-weight: inherit;
                vertical-align: baseline;
                word-break: break-word;
                display: inline-block;
              }
            }
  
            .item-price{
              text-align: center;
              font-family: Lato;
              font-size: 18px;
              font-weight: 400;
              text-transform: uppercase;
              letter-spacing: 2px;
              padding-bottom:  15px;
  
              span{
                font-weight: inherit;
                vertical-align: baseline;
                word-break: break-word;
                display: inline-block;
              }
            }
  
            .shop-now{
              background-color: #232c3b;
              color: #fff;
              font-size: 11px;
              padding: 15px 40px;
              font-family: Lato;
              letter-spacing: 2px;
              text-transform: uppercase;
              font-weight: 700;
              display: inline-block;
              line-height: 1;
              text-align: center;
              text-decoration: none;
              outline: 0px;
              cursor:pointer;
  
  
  
              span{
                color: inherit;
                text-decoration: none;
                vertical-align: baseline;
                word-break: break-word;
                display: inline-block;
              }
  
              &amp;:hover{
                background-color: #fff;
                color: #232c3b;
              }
            }
          }
        }
  
        .slick-dots{
          bottom: -30px;
          .slick-active{
            button{
              &amp;:before{
                border-color: #000000 !important;
                background-color: #ffffff !important;
              }
            }
          }
          li{
             button{
               &amp;:before{
                  background-color: #000000 !important;
               }
            }
          }
        }
  
      }
    }
  
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>  $(function() {
        $('#slider-product').slick({
        dots: true,
        speed: 300,
        slidesToShow: 5,
        slidesToScroll: 5,
        autoplay: true,
        autoplaySpeed: 2000,
        variableWidth: true,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
    // ...
  </code></pre>