(Squarespace/CSS) Product Arrows Background

Pro Tips Other Tips
1

Use this code to Custom CSS box

/* Product arrows background */
button.product-item-gallery-carousel-control, button.product-gallery-carousel-control {
    background-color: #fff !important;
    justify-content: center !important;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-next:after, .product-gallery-carousel-controls .product-gallery-carousel-control.product-gallery-next:after {
    margin-left: 0 !important;
    left: -5px !important;
    position: relative;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-prev:after, .product-gallery-carousel-controls .product-gallery-carousel-control.product-gallery-prev:after {
    margin-right: 0 !important;
    right: -5px !important;
    position: relative !important;
}

product-arrows-min
product-arrows-min1000×234 77.2 KB

2 Likes
2

Update code

button.product-item-gallery-carousel-control {
    background-color: #f1f !important;
    width: 35px !important;
    min-width: unset !important;
    min-height: unset !important;
    align-items: center;
    justify-content: center;
}
button.product-item-gallery-carousel-control.ProductItem-gallery-prev:after {
    position: relative;
    left: 5px;
}
button.product-item-gallery-carousel-control.ProductItem-gallery-next:after {
    position: relative;
    right: 5px;
}
3

Updated code for Product Update V2