Solved

Request to Modify Product Slider Section Layout Code - Dawn Theme

-Charlo-007
Excursionist
25 0 0

Hi

I have attached a screenshot for reference, highlighting the desired layout that I would like to achieve.

 

https://bookshop.org/

Screenshot 2024-04-25 034344.png

Currently, the collection is displayed differently from what I envision. Below, I have included the code snippet responsible for generating the collection layout. Could you please assist me in modifying this code to match the layout shown in the screenshot?

 

Current Layout

Screenshot 2024-04-25 033851.png

Snippet Code

 

<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {
      width: 55%;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    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);
    }
  }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</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 class="collection page-width">
    
  <div class="title-wrapper-with-link">
	<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
  </div>
</div>
<div class="dawn-product-slider">
   <div class="carousel">
      {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product_item] %}
      <div class="carousel-cell">
         <a href="{{ product.url }}">
            <img data-flickity-lazyload="{{ product.featured_image | img_url: 'master' }}"  border="0" />

{% comment %}
           <p class="title">{{ product.title }}</p>
            <p class="price">{{ product.price | money }}</p>
{% endcomment %}
           
         </a>
      </div>
      {% endfor %}
   </div>
  
</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": 6,
      "step": 1,
      "default": 6,
      "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 %}  



Accepted Solution (1)
EBOOST
Shopify Partner
971 263 303

This is an accepted solution.

You can replace code below:

<style>

  .dawn-product-slider {
    position: relative;
    margin: 0 auto;
  }
  .carousel-cell {
    scroll-snap-align: start;
  }
  .carousel-cell a img {
    max-width: 100%;
    width: 100%;
  }
  .carousel {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  a.next,
  a.previous{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
  }
  a.next {
    left: auto;
    right: -50px;
  }
  a.next svg,
  a.previous svg {
    width: 20px;
    height: auto;
  }  
</style>
<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {

      margin: 0 auto;
      display: block;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    width: 200px;
    min-width: 200px;
  }
  .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(max-width: 1300px){
    a.next{ right: 0;}
    a.previous{ left: 0;}
 }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</style>
<div class="collection page-width">
    <div class="title-wrapper-with-link">
        <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="dawn-product-slider">
       <div class="carousel" id="slider">
          {% for block in section.blocks %}
              {% assign product = all_products[block.settings.product_item] %}
              <div class="carousel-cell">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'master' }}"  border="0" />
                    {% comment %}
                               <p class="title">{{ product.title }}</p>
                                <p class="price">{{ product.price | money }}</p>
                    {% endcomment %}
                </a>
              </div>
          {% endfor %}
       </div>
        <a href="javascript&colon;void(0);" class="previous" onclick="prevClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
        </a>
        <a href="javascript&colon;void(0);" class="next" onclick="nextClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
        </a>
    </div>
</div>  
<script>
    function nextClickHandler() {
     
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft + 250,
        behavior: 'smooth'
      });
    }
    function prevClickHandler() {
      
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft - 250,
        behavior: 'smooth'
      });
    }
    </script>
{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 6,
      "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 %}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 12 (12)

EBOOST
Shopify Partner
971 263 303

Hi @-Charlo-007,

May I suggest you code below:

<style>

  .dawn-product-slider {
    position: relative;
    margin: 0 auto;
  }
  .carousel-cell {
    scroll-snap-align: start;
  }
  .carousel-cell a img {
    max-width: 100%;
  }
  .carousel {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  a.next,
  a.previous{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
  }
  a.next {
    left: auto;
    right: -50px;
  }
  a.next svg,
  a.previous svg {
    width: 20px;
    height: auto;
  }  
</style>
<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {
      width: 55%;
      margin: 0 auto;
      display: block;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    width: calc(32% - 10px);
    min-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(max-width: 1300px){
    a.next{ right: 0;}
    a.previous{ left: 0;}
 }
  @media only screen and ( max-width: 767px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(50% - 10px);
      min-width: calc(50% - 10px);
    }
  }
  @media only screen and ( max-width: 479px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(100% - 10px);
      min-width: calc(100% - 10px);
    }
  }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</style>
<div class="collection page-width">
    <div class="title-wrapper-with-link">
        <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="dawn-product-slider">
       <div class="carousel" id="slider">
          {% for block in section.blocks %}
              {% assign product = all_products[block.settings.product_item] %}
              <div class="carousel-cell">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'master' }}"  border="0" />
                    {% comment %}
                               <p class="title">{{ product.title }}</p>
                                <p class="price">{{ product.price | money }}</p>
                    {% endcomment %}
                </a>
              </div>
          {% endfor %}
       </div>
        <a href="javascript&colon;void(0);" class="previous" onclick="prevClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
        </a>
        <a href="javascript&colon;void(0);" class="next" onclick="nextClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
        </a>
    </div>
</div>  
<script>
    function nextClickHandler() {
     
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft + 250,
        behavior: 'smooth'
      });
    }
    function prevClickHandler() {
      
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft - 250,
        behavior: 'smooth'
      });
    }
    </script>
{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 6,
      "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 %}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
-Charlo-007
Excursionist
25 0 0

Thanks for code! can we remove padding between two product images in collection check @EBOOST 

 

https://060ef5-5.myshopify.com/

Screenshot 2024-04-25 100029.png

EBOOST
Shopify Partner
971 263 303

Hi,

You can refer the screenshot below to remove code.

EBOOST_1-1714023305759.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
-Charlo-007
Excursionist
25 0 0

@EBOOST  padding did not reduce

 

Screenshot 2024-04-25 105909.png

EBOOST
Shopify Partner
971 263 303

Hi,

You try to add code below:

width: 100%;

EBOOST_0-1714025239077.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
-Charlo-007
Excursionist
25 0 0

now images look bigger 🙂 can we reduce size of image ? @EBOOST 

 

Screenshot 2024-04-25 111441.png

 

EBOOST
Shopify Partner
971 263 303

Hi @-Charlo-007,

would you like to show the same screenshot below?

EBOOST_0-1714026092408.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
-Charlo-007
Excursionist
25 0 0

yes! 

EBOOST
Shopify Partner
971 263 303

This is an accepted solution.

You can replace code below:

<style>

  .dawn-product-slider {
    position: relative;
    margin: 0 auto;
  }
  .carousel-cell {
    scroll-snap-align: start;
  }
  .carousel-cell a img {
    max-width: 100%;
    width: 100%;
  }
  .carousel {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  a.next,
  a.previous{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
  }
  a.next {
    left: auto;
    right: -50px;
  }
  a.next svg,
  a.previous svg {
    width: 20px;
    height: auto;
  }  
</style>
<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {

      margin: 0 auto;
      display: block;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    width: 200px;
    min-width: 200px;
  }
  .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(max-width: 1300px){
    a.next{ right: 0;}
    a.previous{ left: 0;}
 }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</style>
<div class="collection page-width">
    <div class="title-wrapper-with-link">
        <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="dawn-product-slider">
       <div class="carousel" id="slider">
          {% for block in section.blocks %}
              {% assign product = all_products[block.settings.product_item] %}
              <div class="carousel-cell">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'master' }}"  border="0" />
                    {% comment %}
                               <p class="title">{{ product.title }}</p>
                                <p class="price">{{ product.price | money }}</p>
                    {% endcomment %}
                </a>
              </div>
          {% endfor %}
       </div>
        <a href="javascript&colon;void(0);" class="previous" onclick="prevClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
        </a>
        <a href="javascript&colon;void(0);" class="next" onclick="nextClickHandler()">
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
        </a>
    </div>
</div>  
<script>
    function nextClickHandler() {
     
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft + 250,
        behavior: 'smooth'
      });
    }
    function prevClickHandler() {
      
      const el = document.getElementById('slider');
       el.scrollTo({
        top: 0,
        left: el.scrollLeft - 250,
        behavior: 'smooth'
      });
    }
    </script>
{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 6,
      "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 %}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
-Charlo-007
Excursionist
25 0 0

Great! Thank you very Much! 😍

-Charlo-007
Excursionist
25 0 0

Hello, @EBOOST 

 

When I attempt to navigate to this particular slider, it consistently slides to the first slider of the collection instead of the intended slider. Could you please review the code to address this issue? 


https://community.shopify.com/c/shopify-design/product-slider-section-layout-issue-dawn-theme/m-p/25...

 

Additionally, it seems that the swipe arrow functionality only moves the first collection slider within the section, neglecting the others

 

https://060ef5-5.myshopify.com/

 

Screenshot 2024-04-27 114530.png

EBOOST
Shopify Partner
971 263 303

Hi,

You try to code below

<style>

  .dawn-product-slider {
    position: relative;
    margin: 0 auto;
  }
  .carousel-cell {
    scroll-snap-align: start;
  }
  .carousel-cell a img {
    max-width: 100%;
    width: 100%;
  }
  .carousel {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  a.next,
  a.previous{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
  }
  a.next {
    left: auto;
    right: -50px;
  }
  a.next svg,
  a.previous svg {
    width: 20px;
    height: auto;
  }  
</style>
<style>


  .dawn-product-slider {
    max-width: 1300px;
    margin: auto;
    padding: 0 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  .dawn-product-slider img {

      margin: 0 auto;
      display: block;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 1px;
    margin: auto;
    padding: 2px;
    margin: 2px;
    width: 200px;
    min-width: 200px;
  }
  .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(max-width: 1300px){
    a.next{ right: 0;}
    a.previous{ left: 0;}
 }
.overflow-scroll-x {
    overflow-x: scroll;
}
  
</style>
<div class="collection page-width">
    <div class="title-wrapper-with-link">
        <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="dawn-product-slider"  id="slider-inner-{{ section.id }}">
       <div class="carousel" id="slider-{{ section.id }}">
          {% for block in section.blocks %}
              {% assign product = all_products[block.settings.product_item] %}
              <div class="carousel-cell">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'master' }}"  border="0" />
                    {% comment %}
                               <p class="title">{{ product.title }}</p>
                                <p class="price">{{ product.price | money }}</p>
                    {% endcomment %}
                </a>
              </div>
          {% endfor %}
       </div>
        <a href="#" class="previous" >
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
        </a>
        <a href="#" class="next" >
            <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
        </a>
    </div>
</div>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slider-inner-{{ section.id }} .previous").click(function(e){
    e.preventDefault();
    const el = document.getElementById('slider-{{ section.id }}');
     el.scrollTo({
        top: 0,
        left: el.scrollLeft - 250,
        behavior: 'smooth'
      });
  });
  $("#slider-inner-{{ section.id }} .next").click(function(e){
    e.preventDefault();
    const el = document.getElementById('slider-{{ section.id }}');
    el.scrollTo({
        top: 0,
        left: el.scrollLeft + 250,
        behavior: 'smooth'
      });
  });
});
</script>

{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 6,
      "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 %}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤