Customize Navigation Arrows in Squarespace Gallery Reel Layout

Squarespace Tutorial
Written By Walid Hasan

If you are using the Gallery Reel layout from Squarespace and want to spruce up the designs of the navigation arrows to match your brand better, this is the guide for you.

In this tutorial, we’re going to look at a more focused CSS replacement of the default arrow buttons with something more unique. This solution has the correct, narrowly scoped for the Gallery Reel layout only for tidy, conflict-free styling of certain gallery types.

What Is the Gallery Reel Layout in Squarespace?

There are some ways you can display galleries when using Squarespace, one of the most animated being Gallery Reel. The game has a side-scrolling screen and is best for:

  • Product image sliders

  • Horizontal image galleries

  • Modern visual storytelling sections

This template uses button composition, HTML element class:

button.gallery-reel-control-btn

This makes it possible—and safe—to target with CSS without affecting elements elsewhere on your site.

Objective

We’ll be replacing the default Squarespace arrow buttons in the Gallery Reel layout with custom image-based icons using a minimal, efficient CSS snippet. This solution does not affect other gallery types like Slideshow, Carousel, or Lightbox.

The Custom CSS Code (Gallery Reel Only)

To apply your own branded arrows, navigate to:
Pages → Custom code → Custom CSS, and paste the following:

Copied!

/* Custom Navigation Arrows — Gallery Reel Only */
button.gallery-reel-control-btn[aria-label$="Slide"] > div {
  background: url('https://freepngimg.com/download/web_design/24826-2-right-arrow-free-download.png') center/contain no-repeat !important;
  width: 40px;
  height: 40px;
}
button.gallery-reel-control-btn[aria-label$="Slide"]::before {
  background: none !important;
}
button.gallery-reel-control-btn[aria-label$="Slide"] > div > * {
  visibility: hidden;
}
/* ◀ Flip left arrow for "Previous" */
button.gallery-reel-control-btn[aria-label="Previous Slide"] > div {
  transform: rotate(180deg);
}

This Code Works Only for Gallery Reel Layouts

It’s important to emphasize:

This code targets only the Gallery Reel layout in Squarespace.
It does not affect other gallery styles such as:

  • Slideshow galleries

  • Carousel galleries

  • Grid or lightbox layouts

Each of these layouts uses a different markup and requires unique CSS selectors. Applying this code to a non-reel layout will result in no visible changes.

Optional Enhancements

Responsive Sizing for Mobile:

Copied!

@media screen and (max-width: 640px) {
  button.gallery-reel-control-btn > div {
    width: 30px;
    height: 30px;
  }
}

Pro Tips for Advanced Users

  • Consider using SVG icons instead of PNGs for retina-sharp results.

  • Upload custom icons to the Squarespace File Manager for clean hosting.

  • For multi-layout sites, use layout-specific selectors to avoid cross-styling.

Final Thoughts

When done right, even subtle design improvements like customizing slideshow arrows can elevate the entire user experience. By targeting only the Gallery Reel layout, this solution ensures a precise, maintainable, and scalable customization without impacting other areas of your website.

This method is perfect for Squarespace designers, brand strategists, and developers who care about aesthetic consistency and performance.

FAQ: Customizing Gallery Reel Arrows in Squarespace

1. Will this customization affect other gallery layouts like Slideshow or Carousel?

No, the CSS code is scoped specifically to .gallery-reel-control-btn, which is unique to the Gallery Reel layout. It will not impact Slideshow, Carousel, Grid, or Lightbox galleries because they use different class structures.

2. Can I use SVG icons instead of PNG for the arrow buttons?

Yes, SVG icons are recommended for better performance and retina-level clarity. You can replace the background: url(...) in the CSS with a direct link to your SVG file hosted in Squarespace's File Manager.

3. Where should I upload custom arrow icons in Squarespace?

Upload your arrow image (PNG or SVG) through:
Design → Custom CSS → Manage Custom Files
Once uploaded, click the file to get the direct URL and insert it into your background: url('...') CSS line.

4. Can I further customize the position of the arrows in the Gallery Reel?

Yes. You can use CSS properties like top, bottom, left, right, or use transform: translate() to adjust placement. Just target the button.gallery-reel-control-btn, and apply position-related styling as needed.