How to customize gallery arrows in Squarespace
Tired of those default arrows in your Squarespace galleries? In this tutorial, I’m going to show you exactly how to change their color, size, and thickness, whether you're using slideshow sections or the old-school gallery blocks. In this step-by-step walkthrough, you'll learn which gallery types use which code, how to target specific arrow elements, and how to change each side individually: left vs right.
Gallery Sections vs Gallery Blocks
Before we dive into the code, it’s important to know which type of gallery you're editing. In Squarespace, there are two main types:
Gallery Sections: These are full-width image layouts added via the “Add Section” panel. You’ll see style names like Slideshow Simple, Slideshow Full, or Reel. These do not use traditional content blocks—you’ll edit them using the gallery editor on the left.
Gallery Blocks: These are added as content blocks inside any section. You can choose from layouts like Slideshow or Carousel. These are older but still work great, and the customization code is a little different.
You’ll need different CSS selectors for each one & don’t worry, I’ve got them all listed below!
CSS for Gallery Section Arrows: Slideshow Simple & Slideshow Full
These gallery sections use arrow icons that are SVG-based. You can customize them using stroke color, stroke width, height, and width.
This is a sample CSS snippet to start with.
These are basic definitions of the properties in this code to keep in mind when updating this code to match your own unique site styles:
stroke = color of the arrows
stroke width = thickness of the arrows
height & width = size of the arrows
/* slideshow full or simple */
.caret-left-icon--small{
stroke:red!important;
stroke-width:5px;
height:35px!important;
width:35px!important
}
.caret-right-icon--small{
stroke:blue!important;
stroke-width:5px;
height:35px!important;
width:35px!important;
}CSS for Gallery Sections: Slideshow Reel
The “Reel” layout uses a completely different structure. Arrows are buttons inside square containers, so we’ll adjust both the icon color and the container size.
Change the colors, height, and width to match your own unique style.
Keep the height and width equal if you want the arrows to stay centered inside the square background.
/* slideshow reel */
.gallery-reel-control-btn[data-previous]{
color: red;
}
.gallery-reel-control-btn[data-next]{
color: blue;
}
.gallery-reel-control-btn[data-previous] *,.gallery-reel-control-btn[data-next] *{
width:90px;
height:90px
}CSS for Gallery Blocks
These older content block galleries use arrows that are actually rendered as special fonts, so we’ll use font-based CSS to style them!
Color changes the color of the font, size adjusts the size of the arrow, and font-weight: bold is how we can make it thicker using CSS.
/* gallery blocks*/
.sqs-gallery-controls .previous{
color:red!important;
}
.sqs-gallery-controls .next{
color:blue!important
}
.sqs-gallery-controls .previous::before,
.sqs-gallery-controls .next::before{
font-size:30px;
font-weight:bold
}Custom Codes for Individual Sections or Blocks
Want to change just one specific gallery on your site? You can target individual sections or blocks using their unique ID! Check out this article for more info:
