Hi
I have attached a screenshot for reference, highlighting the desired layout that I would like to achieve.
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
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 %}
can we reduce size of image ? 
