Possible to change slideshow controls to arrows on each side?

Store Design
, ,
3

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:

websensepro_0-1747924303929.png
websensepro_0-1747924303929.png1366×496 556 KB

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! :rocket: (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!