Blog

Follow Below steps to create product slider in shopify dawn theme:

1. Go to theme -> Action -> Edit Code -> Sections
2. Create section and name it product-slider
3. Paste below code in this new file product-slider.liquid
4. Save changes.

<style>
  .dawn-product-slider {
    max-width: 1600px;
    margin: auto;
    padding: 0 20px;
    padding-bottom: 32px;
    margin-top: 55px;
  }
  .dawn-product-slider img {
      width: 100%;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 16px;
    margin: auto;
    padding: 18px;
    margin: 12px;
    width: calc(32% - 10px);
  }
  .product-btn {
      width: 100%;
  }
  .dawn-product-slider a {
    color: black;
   	text-decoration: none;
  }
  .dawn-product-slider a .title:hover {
   	text-decoration: underline;
  }
  .dawn-product-slider a .title, .dawn-product-slider a .price {
   	margin: 0px;
  }
  .dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
  .dawn-product-slider .flickity-button.flickity-prev-next-button.next {
  	background: red;
    color: white;
  }
  .dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
   	outline: unset;
    outline-offset: unset;
    box-shadow: unset;
  }
  @media only screen and ( max-width: 767px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(50% - 10px);
    }
  }
  @media only screen and ( max-width: 479px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(100% - 10px);
    }
  }
</style>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div>
  <div>
	<h2>{{ section.settings.title | escape }}</h2>
  </div>
</div>
<div>
   <div>
      {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product_item] %}
      <div>
         <a href="{{ product.url }}">
            <img data-flickity-lazyload="{{ product.featured_image | img_url: 'master' }}"  border="0" />
            <p>{{ product.title }}</p>
            <p>{{ product.price | money }}</p>
         </a>
      </div>
      {% endfor %}
   </div>
   <!--- Coded by keiwords.com --->
</div>
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
	@media only screen and ( min-width: 1201px ) {
		{% if nav_range == 2 %}
        .dawn-product-slider .carousel-cell {
            width: calc(49% - 10px);
        }
		{% elsif nav_range == 3 %}
        .dawn-product-slider .carousel-cell {
          width: calc(32% - 10px);
        }
		{% elsif nav_range == 4 %}
        .dawn-product-slider .carousel-cell {
          width: calc(24% - 10px);
         }
		{% endif %}
    }
    .flickity-page-dots .dot {
    	background: {{ section.settings.navigation_color }};
    }
    .flickity-button-icon {
    	color: {{ section.settings.navigation_color }};
    }
{% endstyle %}
<script>
   var elem = document.querySelector('.dawn-product-slider .carousel');
   var flkty = new Flickity( elem, {
     contain: true,
     imagesLoaded: true,
     lazyLoad: 2,
     wrapAround: true,
     pageDots: false,
   });
   {% if request.design_mode %}
   document.addEventListener("shopify:section:load", function(event) {
     var elem = document.querySelector('.dawn-product-slider .carousel');
     var flkty = new Flickity( elem, {
       contain: true,
       imagesLoaded: true,
       lazyLoad: 2,
       wrapAround: true,
       pageDots: false,
     });
   });
   {% endif %}
</script>
{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of cards in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
	{
      "type": "text",
      "id": "title",
      "default": "Products slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ] ,
  	"blocks": [
	{
        "type": "card",
        "name": "Product card",
        "settings": [
          {
            "type": "product",
            "id": "product_item",
            "label": "Choose the product you want to displayed"
          }
    	]
	}
  ] ,
  "presets": [
    {
      "name": "Product slider",
      "category":"Custom"
    }
  ]
}
{% endschema %}