Possible to change slideshow controls to arrows on each side?

[cardboardhouse]

Hey folks,

I want to know if it's possible to change the slideshow controls to arrows on each end of the pic?

Currently:

What I want;

Thanks a lot!

[cardboardhouse]

https://www.cardboardhouse.store/

CBH25

[websensepro]

Hi @cardboardhouse 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.page-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
}

.page-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  transform: translate(-50%, -50%) rotate(-135deg); /* Left arrow by default */
}


.page-btn[data-index="1"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

span.page-btn__line.block.relative.overflow-hidden.pointer-events-none {
    opacity: 0;
}

.slideshow-pagination.flex.items-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[cardboardhouse]

Thanks a lot!!

It worked however I wanted to change the style a bit - Is it possible to center them vertically, make them bigger, with a circle shadow, basically exactly like the screenshot?

[websensepro · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.slideshow-ctrl {

    bottom: 50% !important;

}
.page-btn {
    border-radius: 50%;
    background: #272727b5 !important;
    width: 45px !important;
    height: 45px !important;
 
}

.page-btn::before {
    border-top: 3px solid #ffffff !important;
    border-right: 3px solid #ffffff !important;

}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 

 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[cardboardhouse]

Thanks, it's perfect!

[cardboardhouse]

Sorry, could you also help me with the code to position the buy now bottom to the very bottom of the slideshow?

[websensepro]

Sure, here is a code for positioning of button

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.js .slideshow__slide--ignore-pagination .text-overlay{
 margin:0px !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 

 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[cardboardhouse]

Thanks for the reply!

The code works for the first slideshow, but on the second it does to a different position again 😞 

[cardboardhouse]

nevermind, fixed it 🙂 

[websensepro]

@cardboardhouse 

Both slideshow buttons are positioned perfectly. Now implement the full code, and then I’ll check why the button on the second slideshow isn’t working.