Cacher is the code snippet organizer for pro developers

What you want

You want a pager below the slideshow à la Supply theme, with an active color set to the Link color in the theme.

How to get it

1. Open your theme JavaScript file scripts.js.liquid in the Template Editor, look for this line of code:

   controlNav: false,
   

   Set that to true:

   controlNav: true,
   

   This will add numbered links below the slideshow, but what you want are dots, so move on to step 2.

2. Open your theme stylesheet styles.scss.liquid file, scroll down all the way to the bottom, and add that CSS:

   .flex-control-nav {
     text-align: center;
     margin: 15px 0;
     list-style: none;
   
     li {
       margin: 0 4px;
       display: inline-block;
   
       a {
         width: 12px;
         height: 12px;
         display: block;
         background-color: #ececec;
         cursor: pointer;
         text-indent: -9999px;
         border-radius: 20px;
         border: 2px solid #ffffff;
         -webkit-transition: all 0.1s ease-in-out;
         -moz-transition: all 0.1s ease-in-out;
         -ms-transition: all 0.1s ease-in-out;
         -o-transition: all 0.1s ease-in-out;
         transition: all 0.1s ease-in-out;
   
         &:hover {
           background-color: #d3d3d3;
         }
   
         &.active {
           background-color: {{ settings.shop_bg_color }};
           border-color: {{ settings.link_color }};
           cursor: default;
         }
       }
     }
   }