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

Roxolot
Explorer
66 4 13

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 %}

Roxolot_0-1703575143104.png

 

 

 

Replies 6 (6)

zaczee
Globetrotter
848 46 42

Hi,

 

Can you share your store url

Roxolot
Explorer
66 4 13

VIEKIN
Shopify Partner
660 79 93

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.

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
Roxolot
Explorer
66 4 13
<!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>
VIEKIN
Shopify Partner
660 79 93

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>

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513

MRamzan
Shopify Partner
165 1 21

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:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112