Clickable Collection Slider - Custom Code

Store Design
, , ,

Topic summary

A user created custom code for a clickable collection slider but encountered design issues. The slider displays collection images in a grid format but needs to function as a swipeable carousel with pagination dots.

Technical Details:

  • The implementation uses Slick Carousel library with custom HTML/CSS/JavaScript
  • Initial problem: broken image URLs and missing pagination dots
  • Target behavior: display 3 images side-by-side with swipe/arrow navigation on both mobile and desktop

Solutions Provided:

Pagination dots: Add dots: true parameter to the Slick initialization code

Design styling: Custom CSS was added to style the slider, slides, and pagination dots (including active state indicators)

Image issues: Broken images traced to incorrect Shopify CDN URLs

Resolution:
The original poster successfully resolved the styling issues by implementing the suggested CSS code for dots and slider appearance. Additional resources for creating custom collection slider sections were shared as alternatives.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I have built a custom code for a clickable collection slider. Now I have a few design problems. The current slider looks like this. Does anyone have any ideas on what I need to change?

Roxolot_0-1711525719868.png
Roxolot_0-1711525719868.png568×288 4.47 KB

This should be the result with the slideable function. It would be nice to add pagination dots.

Roxolot_1-1711525758831.png
Roxolot_1-1711525758831.png536×197 8.67 KB

This is the code for the clickable collection slider:

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>

  <style>
    
    .mobile-collection-slider {
      max-width: 1600px;
      padding-top: 70px;
      padding-bottom: 12px;
      background: #f8f8f8;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
    }

    .mobile-collection-slider .carousel-cell {
      width: 100px !important; 
      height: 100px !important; 
      position: relative !important; 
    }

    .mobile-collection-slider .carousel-cell a {
      display: flex; 
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 15%;
      background: white;
    }

    .mobile-collection-slider img {  
      object-fit: cover;
      width: 75%; 
      height: 75%; 
      justify-content: center; 
      align-items: center; 
    }

    .carousel-cell:hover a {
      border: 3px solid #373737; 
    }

    .carousel-cell.clicked a {
      border: 3px solid #373737; 
    }

    @media only screen and (max-width: 479px) {
      .mobile-collection-slider .carousel-cell {
        width: 100px; 
        height: 100px; 
      }
      .mobile-collection-slider {
        gap: 15px; 
        padding-top: 40px;
      }
    }
  </style>
</head>
<body>

<div class="mobile-collection-slider slick-carousel">
  
  <div class="carousel-cell" data-url="https://stampforge.de/collections/geburtstag">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/hochzeit">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/neues-jahr">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/valentinstag">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/weihnachten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" defer></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var cells = document.querySelectorAll('.carousel-cell');
    var currentURL = window.location.href;

    cells.forEach(function(cell) {
      cell.addEventListener('click', function() {
        cells.forEach(function(c) {
          c.classList.remove('clicked');
        });
        this.classList.add('clicked');
        var url = this.getAttribute('data-url');
        window.location.href = url;
      });

      var cellURL = cell.getAttribute('data-url');
      if (currentURL.includes(cellURL)) {
        cell.classList.add('clicked');
      }
    });

    $('.mobile-collection-slider').slick({
      slidesToShow: 3, 
      slidesToScroll: 1,
    });
     
  });
</script>

</body>
</html>
2

Hello @Roxolot , Could you please share your store’s URL? It will help me better understand the issue.

3

The site URL is https://stampforge.de/collections/keksausstecher
password: newwave

4

Hello @Roxolot , Have you created this slide only for mobile or you want it for both mobile and desktop? Also, I can see you are using the slick slider for this which will affect your design so you have to design the section again.

The image URL(https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350) added to the src attribute is not found that’s why it is showing broken images.

To add the dots replace the below code in your code:

$('.mobile-collection-slider').slick({
      slidesToShow: 3, 
      slidesToScroll: 1,
      dots: true
    });
5

@Huptech-Web i want to build it for desktop and mobile, in both cases there should be three images next to each other and if you swipe (on desktop press the arrow left or right) it should show the next three images.

Do u have an idea how i can change the design of the slick slider. Thats the main problem i have.

6

I found a solution. I added the following code to the sytle section:

/* Custom styles for the slick slider */
.slick-slider {
  margin: 0 auto;
}

/* Style for slick slides */
.slick-slide {
  margin: 0 5px;
}

/* Style for slick dots */
.slick-dots {
  list-style: none;
  text-align: center;
  margin-top: 10px;
}

/* Style for individual slick dots */
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

/* Style for slick dots when active */
.slick-dots li button {
  font-size: 0; /* Remove the numbering */
  width: 10px; /* Set width for dot */
  height: 10px; /* Set height for dot */
  border-radius: 50%; /* Make it round */
  background-color: #373737; /* Dark color for dot */
}

/* Style for active slick dot */
.slick-dots li.slick-active button {
  background-color: #fff; /* Change background color as needed */
}
7

Hello @Roxolot , Great!

8

Add custom section for collection slider in your store:

9

You can create a custom section by just copy and paste code. Without using any App.