Code Snippet: List all collections within a Shopify Page

list-all-products-from-all-collections.liquid

<div class="grid-container">
   {% for collection in collections %}
   <div class="grid-item">
      <div class="grid-item-photo">
         <a href="{{ collection.url }}">
         {% for image in collection.images limit:1 %}<img src="{{ image }}" alt="{{ image.alt | escape }}">{% endfor %}
         </a>
      </div>
      <div class="grid-item-title">    
         <a href="{{ collection.url }}">{{ collection.title }}</a>
      </div>
   </div>
   {% endfor %}
</div>
<style>
   @media (min-width: 480px){
   .grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 20px;
   gap: 20px;
   }
   .grid-item {
   display: flex;
   flex-direction:column;
   align-items: center;
   height: 100%;;
   transition:  0.2s;
   transition-timing-function: ease;
   border-radius: 2px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
   }
   .grid-item:hover {
   box-shadow: 0 3px 8px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.22);
   }
   .grid-item-photo:hover + .grid-item-title a{
   color:#303f9f !important; 
   }
   .grid-item-photo{
   margin:auto;        
   width:150px;
   }
   .grid-item-photo img{
   width: 100%;
   }
   .grid-item-title{
   font-size:17px;
   font-weight:900;
   margin-top:20px;
   margin-bottom:30px;
   text-align: center;
   margin-left:5px;
   margin-right:5px;
   }
   .grid-item:hover {
   text-decoration: underline;
   }
   .grid-item-title a {
   color:black !important;
   text-decoration: none !important;
   }
   }
   @media (max-width: 480px){
   .grid-container {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   }
   .grid-item {
   display: flex;
   flex-direction:row;
   align-items: center;
   text-align: left;
   width: 100%;
   padding-top:5px;
   padding-bottom:5px;
   font-size:15px;
   border-bottom: solid 1px #c8cbcf;
   transition:  0.2s;
   transition-timing-function: ease;
   }
   .grid-item:first-of-type{
   border-top: solid 1px #c8cbcf;
   }
   .myarrow {
   width:15px;
   margin-left:auto;
   opacity:0.4;
   }
   .myarrow img {
   width:100%;
   }
   .grid-item-photo{
   width:60px;
   padding: 4px;
   margin-right:8px;
   }
   .grid-item-photo img{
   width:100%;
   }
   .grid-item-photo:hover + .grid-item-title a{
   color:#303f9f !important; 
   }
   .grid-item-title a {
   font-size:15px;
   font-weight:500;
   color:black !important;
   text-decoration: none !important;
   }
   .grid-item-title a:hover {
   color:#303f9f !important; 
   }
   }
</style>