Slideshow: Add link dots at the bottom of your slideshow

If you'd like to add the link dots at the bottom of your slideshow to indicate how many images are in the slider and also to use as navigation, you can try this modification. 

Result:

Step 1 - Modify assets/shop.js

https://myshopify.com/admin/themes/current?key=assets/shop.js.liquid

Use the Find feature (1) in the right pane where the code is: Command-F on Mac or Control-F in Windows.

Search for:

dots: false

Modify the value (2) to

dots: true

Example:

Save the file. 

Step 2 - Modify styles.scss.liquid

Add the following code to the very bottom of the file:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

Code:

/* -- code to add homepage slider dots -- */
.template-index .slick-slider {
  margin-bottom: -30px;
}

  .slick-dots {
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    li {
      position: relative;
      display: inline-block;
      height: 20px;
      width: 20px;
      margin: 10px 0px 0px 0px;
      padding: 0;
      cursor: pointer;
    }
  }

.slick-dots {
  li {
    button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer;
      &:hover, &:focus {
        outline: none;
        &:before {
          opacity: $slick-opacity-on-hover;
        }
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: $slick-dot-character;
        width: 20px;
        height: 20px;
        font-size: $slick-dot-size;
        line-height: 20px;
        text-align: center;
        color: $slick-dot-color;
        opacity: $slick-opacity-not-active;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
    &.slick-active button:before {
      color: #555555;
      opacity: $slick-opacity-on-hover;
    }
  }
}

/* -- end -- */

Save the file.

Notes:

This modification works with sectioned versions of Pipeline 2.x and higher. The slideshow dots are designed to work when there is another section below the slideshow. Move the section higher if it's at the bottom of all your sections (should not be last section before footer). 

Always make a duplicate of your theme when making code modifications before you begin. 

Still need help? Contact Us Contact Us