Request to Modify Product Slider Section Layout Code - Dawn Theme
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 %}
Thanks for code! can we remove padding between two product images in collection check @EBOOST
https://060ef5-5.myshopify.com/
Hi,
You can refer the screenshot below to remove code.
Hi,
You try to add code below:
width: 100%;
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?
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/
Community Blog Articles
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025