Dawn theme featured collection slider arrows customization

Store Design
, , , , , , ,
1

I’m using the Dawn theme for my website. I want to customize the Featured Collection section in the mobile view by bringing the slider arrows to the top, as marked in the reference image. I’ve already customized it for the desktop view using custom code.

website link: https://coffeebyrsa.myshopify.com/

Password: coffee

Screenshot 2025-05-08 120121.png
Screenshot 2025-05-08 120121.png415×570 181 KB

2

Hi,

Hope this will help

  • At CSS File to Add Custom Code

CSS code example

@media screen and (max-width: 749px) {
.slider-buttons {
position: absolute;
top: 0;
left: 0;
right: 0;
justify-content: space-between;
padding: 0 1rem;
z-index: 2;
}

.section-featured-collection .slider-buttons {
top: -20px; /* Move up even more if needed */
}

.slider-buttons__button {
background: white;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
}
3

Hi @Sivadarshan

let try to add this Custom CSS code:

@media (max-width: 989px) {
  #shopify-section-template--18801499603044__featured_collection
    slider-component {
    display: flex;
    flex-direction: column-reverse;
    margin-top: -6rem !important;
  }
  #shopify-section-template--18801499603044__featured_collection
    .slider-buttons {
    justify-content: flex-end;
  }
}

The result:

BiDealDiscount_0-1746688871618.png
BiDealDiscount_0-1746688871618.png391×875 353 KB

4

@BiDeal-Discount I need this for all the featured collection section

5

@Sivadarshan

you only need to use this code to apply for all featured collection section:

@media (max-width: 989px) {
  .shopify-section .collection slider-component {
    display: flex;
    flex-direction: column-reverse;
    margin-top: -6rem !important;
  }
  .shopify-section .collection .slider-buttons {
    justify-content: flex-end;
  }
}
6

if you want apply for all featured collection section both desktop & mobile screen, you can remove the @media like this:

.shopify-section .collection slider-component {
  display: flex;
  flex-direction: column-reverse;
  margin-top: -6rem !important;
}
.shopify-section .collection .slider-buttons {
  justify-content: flex-end;
}