# (Squarespace/CSS) Product Arrows Background

**URL:** <https://community.elfsight.com/t/squarespace-css-product-arrows-background/44003>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [March 14, 2024, 3:14am UTC](https://community.elfsight.com/t/squarespace-css-product-arrows-background/44003 "2024-03-14T03:14:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [March 14, 2024, 3:14am UTC](https://community.elfsight.com/t/squarespace-css-product-arrows-background/44003/1 "2024-03-14T03:14:23Z")

</div>

Use this code to Custom CSS box

```auto
/* 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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/6/c666648e29b17dc4e1d7f8b6315e03d0d55197af.png)

---

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 26, 2024, 4:30am UTC](https://community.elfsight.com/t/squarespace-css-product-arrows-background/44003/2 "2024-07-26T04:30:08Z")

</div>

Update code

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 15, 2025, 1:55am UTC](https://community.elfsight.com/t/squarespace-css-product-arrows-background/44003/3 "2025-07-15T01:55:01Z")

</div>

Updated code for Product Update V2