How to create a mobile-only slideable collection list in Dawn theme?

[Roxolot]

Hello,
I am currently trying to build my own Slideable Collection List in Shopify by building my own section. I have already finished a large part of it, but I would like to add a slider without changing the design. This should only be displayed on mobile devices. Three images should be displayed next to each other and then you should be able to slide and the next three should be displayed. In the picture you can see the current status and the corresponding code is here:

 <style>
  /* CSS styles */
  .dawn-collection-slider {
    max-width: 1600px;
    padding-top: 70px;
    padding-bottom: 12px;
    background: #efefef;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; /* Center the images horizontally */
  }

  .dawn-collection-slider .carousel-cell {
    width: 160px; /* Set a fixed width for the round container */
    height: 160px; /* Set a fixed height for the round container */
    
    position: relative; /* Add position relative for absolute positioning */
  }

.dawn-collection-slider .carousel-cell a {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%;
  height: 100%;
  border-radius: 15%; /* Make the link round */

  background: white;
}

  .dawn-collection-slider img {  
    object-fit: cover;
    width: 75%; /* Ensure the image fills the rounded container */
    height: 75%; /* Ensure the image fills the rounded container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center the image */
  }

  .carousel-cell:hover a {
      border: 3px solid #373737; /* Change color to #373737 on hover */
    }
  .carousel-cell.clicked a {
    border: 3px solid #373737; /* Change color as desired */
  }
  
  @media only screen and (max-width: 479px) {
    .dawn-collection-slider .carousel-cell {
      width: 100px; /* Adjust size for smaller screens */
      height: 100px; /* Adjust size for smaller screens */
    }
    .dawn-collection-slider {
      gap: 15px; /* Adjust gap for smaller screens */
      padding-top: 40px;
    }
  }
</style>

<div class="dawn-collection-slider">
  <!-- Sample images, replace with your actual image URLs -->
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-grundschule">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Grundschule_Icon_101b3d85-01fc-441b-8229-c645d5500db4.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-grundschule">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Grundschule_Icon_101b3d85-01fc-441b-8229-c645d5500db4.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-grundschule">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Grundschule_Icon_101b3d85-01fc-441b-8229-c645d5500db4.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-grundschule">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Grundschule_Icon_101b3d85-01fc-441b-8229-c645d5500db4.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-grundschule">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Grundschule_Icon_101b3d85-01fc-441b-8229-c645d5500db4.png?v=1703149147" border="0" />
    </a>
  </div>
  <!-- Add more carousel-cell divs for additional images -->
</div>

<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');
      }
    });
  });

</script>

{% schema %}
{
  "name": "Collection View",

  "presets": [
    {
      "name": "Collection View",
      "category": "Custom"
    }
  ]
}
{% endschema %}

[zaczee]

Hi,

Can you share your store url

[Roxolot]

https://stampforge.de/collections/all

[DitalTek]

I checked your store by url, you just make style for collection list, you don't integrate carousel library for it yet. The carousel library by js.

[Roxolot]

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

  <style>
     /* CSS styles */
  .dawn-collection-slider {
    max-width: 1600px;
    padding-top: 70px;
    padding-bottom: 12px;
    background: #efefef;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; /* Center the images horizontally */
  }

  .dawn-collection-slider .carousel-cell {
    width: 160px; /* Set a fixed width for the round container */
    height: 160px; /* Set a fixed height for the round container */
    
    position: relative; /* Add position relative for absolute positioning */
  }

.dawn-collection-slider .carousel-cell a {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%;
  height: 100%;
  border-radius: 15%; /* Make the link round */

  background: white;
}

  .dawn-collection-slider img {  
    object-fit: cover;
    width: 75%; /* Ensure the image fills the rounded container */
    height: 75%; /* Ensure the image fills the rounded container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center the image */
  }

  .carousel-cell:hover a {
      border: 3px solid #373737; /* Change color to #373737 on hover */
    }
  .carousel-cell.clicked a {
    border: 3px solid #373737; /* Change color as desired */
  }
  
  @media only screen and (max-width: 479px) {
    .dawn-collection-slider .carousel-cell {
      width: 100px; /* Adjust size for smaller screens */
      height: 100px; /* Adjust size for smaller screens */
    }
    .dawn-collection-slider {
      gap: 15px; /* Adjust gap for smaller screens */
      padding-top: 40px;
    }
  }

  </style>
</head>
<body>

<div class="dawn-collection-slider slick-carousel">
  <!-- Your carousel cells here -->
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://taskslider.de/collections/taskslider-kindergarten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0758/2911/7261/files/Kindergarten_Icon_6b7d9de5-bc8e-4281-90a6-d7d5cfcdf8d8.png?v=1703149147" border="0" />
    </a>
  </div>
  <!-- Add more carousel-cell divs for additional images -->
</div>

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

<!-- Your existing 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');
      }
    });

    // Initialize Slick carousel
    $('.dawn-collection-slider').slick({
      slidesToShow: 3, // Number of slides to show at a time
      slidesToScroll: 1, // Number of slides to scroll at a time
      autoplay: true, // Autoplay option
      autoplaySpeed: 2000, // Autoplay speed in milliseconds
      // Add more settings/options based on your requirement
    });
  });
</script>

</body>
</html>

[DitalTek]

hi,

you can try add defer attribute to links, as like this.

<!-- Slick JS and jQuery -->
<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>

[MRamzan]

You can create a beautiful slider in your shopify DAWN theme or any of the Shopify free themes without any App.

Without using any third party library.

Here is the solution:

[MRamzan]

In your DAWN theme you can add collection slider: