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:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Modify your theme's Javascript file

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Which version of Pipeline am I using?

Pipeline 4 - If you're working with a draft theme, open this file:

assets/theme.js

Quick link if your theme is live/published Pipeline 4:  
assets/theme.js

Earlier versions of Pipeline, you'll be opening this file:

assets/shop.js.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/shop.js.liquid

After you've opened the correct file for your version of the theme:

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. 

2

Modify the style code

Code to use:

/* -- 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: #dddddd;
        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 -- */

Where do I add the code?

From the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file after adding your code.

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