How can I adjust the slideshow spacing and navigation on Debut theme?

Store Design
1

We need to do the below customisation to our slideshow:

  • The space between the Search Bar and the Image, AND the space between the Image and the “Buy Now” button is enormous. We need to remove those spaces to have a continuous User experience. So that in the Mobile View the Banner/Image looks properly, in an almost portrait size.
  • We need to remove the pagination and would rather like to have arrows on the sides of each image, as shown in the screenshot below.
  • The Banner/Image needs to be responsive to all kinds of screen sizes.

Please refer to the screenshot below for what we are trying to achieve.

Homepage Banner.jpg
Homepage Banner.jpg750×1294 123 KB

We really need some help, and would be really thankful if someone from the this amazing community can guide us about what code changes should we do to make those changes.?

Website URL: www.klasek.store
Password: astowy

2

hi @Khan01

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media(max-width:786px){
  .main-content {
    padding-top: 0;
}
#shopify-section-165269118720396d99 {
    padding: 0;
}
.slick-dots{
  display:none;
}
.slideshow__btn{
line-height: 18px;
}
}

for the image height plz use the image with a high height. changing this image height will distort it. your theme may have an option for uploading different images on mobile.

3

Hi @Khan01 .

This is PageFly - Free Landing Page Builder. I would love to provide my advice for your store based on 6 years of providing solutions for about 100.000+ active Shopify merchants.

You can use this code of mine to edit

Go to Onilne Store => themes => Actions => Edit code Asset-> theme.css → and add this code on file.

.page-container{
  bottom: 90px;
}

.slideshow__arrows .slideshow__arrow {
position: relative;
top: -120px;
}

.slick-dots{
display: none;
}
.slideshow__btn{

line-height: 20px;

}

I hope my above information can help you

Kind regards

PageFly

4

Hello @Ahsan_ANC ,

Thank you for your kind response. Will for sure try your code.

P.S: My theme does not have an option for uploading different images on mobile. Can you guide, what shall we do about that.?

5

Hello @PageFly-Victor ,

Would this code be responsive to different screen sizes.? Also would it increase the height of the image.?